@pooder/vue 4.2.6 → 4.2.7

package/dist/index.es.js

@@ -1,106 +1,234 @@
-import { defineComponent as O, ref as M, onMounted as K, onUnmounted as Y, createElementBlock as R, openBlock as X, createElementVNode as Q, provide as Z, createVNode as ee } from "vue";
-import { Pooder as te } from "@pooder/core";
+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";
 export * from "@pooder/core";
-import { CanvasService as ne, SceneLayoutService as ie, SceneVisibilityService as oe, BackgroundTool as ae, SizeTool as re, ImageTool as ce, WhiteInkTool as se, MirrorTool as de, DielineTool as ue, RulerTool as me, FeatureTool as ge } from "@pooder/kit";
+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";
 export * from "@pooder/kit";
-const le = /* @__PURE__ */ O({
+const Ee = /* @__PURE__ */ J({
   __name: "CanvasArea",
   emits: ["canvas-ready", "resize"],
-  setup(p, { emit: v }) {
-    const g = v, a = M(null), c = M(null);
-    let d = null;
-    return K(() => {
-      if (a.value && c.value) {
-        const { clientWidth: f, clientHeight: C } = a.value;
-        c.value.width = f, c.value.height = C, g("canvas-ready", c.value), d = new ResizeObserver((w) => {
-          for (const b of w) {
-            const { width: S, height: x } = b.contentRect;
-            g("resize", S, x);
+  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);
           }
-        }), d.observe(a.value);
+        }), c.observe(u.value);
       }
-    }), Y(() => {
-      d && d.disconnect();
-    }), (f, C) => (X(), R("div", {
+    }), G(() => {
+      c && c.disconnect();
+    }), (S, F) => (q(), $("div", {
       ref_key: "container",
-      ref: a,
+      ref: u,
       class: "pooder-canvas-area"
     }, [
-      Q("canvas", {
+      fe("canvas", {
         ref_key: "canvas",
-        ref: c
+        ref: g
       }, null, 512)
     ], 512));
   }
-}), A = (p, v) => {
-  const g = p.__vccOpts || p;
-  for (const [a, c] of v)
-    g[a] = c;
-  return g;
-}, he = /* @__PURE__ */ A(le, [["__scopeId", "data-v-203ff8d9"]]), fe = { class: "pooder-editor" }, T = "SceneLayoutService", B = "SceneVisibilityService", ve = "image.user", pe = /* @__PURE__ */ O({
+}), 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({
   __name: "PooderEditor",
   emits: ["image-change"],
-  setup(p, { expose: v, emit: g }) {
-    const a = new te();
-    Z("pooder", a);
-    const c = a.getService("CommandService"), d = a.getService("ConfigurationService"), f = a.getService("WorkbenchService"), C = g, w = d.onAnyChange((e) => {
-      e.key === "image.items" && C("image-change", e.value);
-    }), b = (e) => {
-      d.import(e);
-    }, S = () => d.export(), x = () => d.get("image.items", []), k = async (e) => {
+  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) => {
       try {
-        const t = await c.executeCommand(
+        const t = await g.executeCommand(
           "exportCutImage",
           e
         );
         return t || console.warn("[PooderEditor] generateCutImage returned null", {
           options: e,
-          imageCount: (d.get("image.items") || []).length,
-          hasCanvasService: !!a.getService("CanvasService")
+          imageCount: (c.get("image.items") || []).length,
+          hasCanvasService: !!u.getService("CanvasService")
         }), t;
       } catch (t) {
         throw console.error("[PooderEditor] generateCutImage failed", t), t;
       }
-    }, _ = async (e, t) => await c.executeCommand("upsertImage", e, {
+    }, O = async (e, t) => await g.executeCommand("upsertImage", e, {
       id: t?.id,
       mode: t?.mode,
       addOptions: t?.addOptions,
       fitOnAdd: t?.fitOnAdd
-    }), I = async (e, t) => (await _(e, {
+    }), U = async (e, t) => (await O(e, {
       mode: "add",
       addOptions: t,
       fitOnAdd: !0
-    })).id, W = async (e, t) => await c.executeCommand("updateImage", e, t), z = async () => await c.executeCommand("clearImages"), N = async (e) => await c.executeCommand(
+    })).id, Z = async (e, t) => await g.executeCommand("updateImage", e, t), ee = async () => await g.executeCommand("clearImages"), B = async (e) => await g.executeCommand(
       "exportUserCroppedImage",
       e
-    ), P = async (e, t) => await c.executeCommand("focusImage", e, t), D = (e) => Math.max(-1, Math.min(2, e)), H = (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 n = Number(t.width), i = Number(t.height), r = Number(t.left), o = Number(t.top);
-      return !Number.isFinite(n) || !Number.isFinite(i) || !Number.isFinite(r) || !Number.isFinite(o) || n <= 0 || i <= 0 ? null : { left: r, top: o, width: n, height: i };
-    }, E = (e) => {
+      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(), n = [];
-      for (const i of t) {
-        if (i?.data?.layerId !== ve) continue;
-        const r = i?.data?.id;
-        if (typeof r != "string") continue;
-        const o = i.getCenterPoint ? i.getCenterPoint() : null, s = Number(o?.x ?? i.left), u = Number(o?.y ?? i.top), m = Number(i.scaleX), l = Number(i.width), h = Number(i.height);
-        !Number.isFinite(s) || !Number.isFinite(u) || !Number.isFinite(m) || !Number.isFinite(l) || !Number.isFinite(h) || l <= 0 || h <= 0 || n.push({
-          id: r,
-          centerX: s,
-          centerY: u,
-          objectScale: m,
-          sourceWidth: l,
+      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 n;
-    }, y = (e) => {
-      d.update("dieline.shape", "custom"), d.update("dieline.pathData", e.pathData), d.update("dieline.features", []), d.update("size.cutMode", "trim"), d.update("size.cutMarginMm", 0);
-    }, j = (e, t) => {
-      const n = e.rawBounds || e.baseBounds || null;
-      if (!n)
+      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)
         return {
           sourceWidth: t.width,
           sourceHeight: t.height,
@@ -110,76 +238,171 @@ const le = /* @__PURE__ */ O({
           coverageX: 0,
           coverageY: 0
         };
-      const i = t.width / 2, r = t.height / 2, o = n.x + n.width / 2, s = n.y + n.height / 2;
+      const n = t.width / 2, d = t.height / 2, r = i.x + i.width / 2, m = i.y + i.height / 2;
       return {
         sourceWidth: t.width,
         sourceHeight: t.height,
-        detectedBounds: n,
-        centerOffsetX: o - i,
-        centerOffsetY: s - r,
-        coverageX: t.width > 0 ? n.width / t.width : 0,
-        coverageY: t.height > 0 ? n.height / t.height : 0
+        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
       };
-    }, L = (e, t) => {
-      const n = e.rawBounds || e.baseBounds, i = Number(e.imageWidth ?? 0), r = Number(e.imageHeight ?? 0);
-      if (!n || !Number.isFinite(n.x) || !Number.isFinite(n.y) || !Number.isFinite(n.width) || !Number.isFinite(n.height) || n.width <= 0 || n.height <= 0 || i <= 0 || r <= 0)
+    }, 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 o = t.width / n.width, s = t.height / n.height, u = n.x + n.width / 2, m = n.y + n.height / 2, l = i / 2, h = r / 2;
+      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;
       return {
-        shiftX: (u - l) * o,
-        shiftY: (m - h) * s
+        shiftX: (s - o) * r,
+        shiftY: (a - h) * m
       };
-    }, F = async (e, t, n = !1, i = "auto") => {
+    }, T = async (e, t, i = !1, n = "auto") => {
       if (!t.length) return;
-      const r = await c.executeCommand("getSceneLayout"), o = H(r);
+      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
+        });
+      }
+      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 { shiftX: s, shiftY: u } = L(e, o);
-      n && console.info("[PooderEditor] detectDieline alignment", {
+      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: s,
-        shiftY: u,
-        snapshotCount: t.length,
-        baseBounds: e.baseBounds,
-        rawBounds: e.rawBounds,
-        imageWidth: e.imageWidth,
-        imageHeight: e.imageHeight
+        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 m of t) {
-        const l = Math.max(
-          o.width / Math.max(1, m.sourceWidth),
-          o.height / Math.max(1, m.sourceHeight)
-        ), h = Math.max(0.05, m.objectScale / l), q = m.centerX - s, G = m.centerY - u, J = D(
-          (q - o.left) / Math.max(1, o.width)
-        ), $ = D(
-          (G - o.top) / Math.max(1, o.height)
+      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)
         );
-        await c.executeCommand(
+        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",
-          m.id,
+          l.id,
           {
-            scale: h,
-            left: J,
-            top: $
+            left: f,
+            top: v
           },
           {
-            target: i
+            target: m
           }
         );
       }
     };
-    v({
-      importConfig: b,
-      exportConfig: S,
-      getImages: x,
-      generateCutImage: k,
-      addImage: I,
-      upsertImage: _,
-      updateImage: W,
-      clearImages: z,
-      exportUserCroppedImage: N,
-      focusImage: P,
+    N({
+      importConfig: _,
+      exportConfig: Y,
+      getImages: X,
+      generateCutImage: Q,
+      addImage: U,
+      upsertImage: O,
+      updateImage: Z,
+      clearImages: ee,
+      exportUserCroppedImage: B,
+      focusImage: te,
       detectDieline: async (e) => {
-        const t = a.getService("CanvasService"), n = E(t), i = await c.executeCommand("detectEdge", e, {
+        const t = u.getService("CanvasService"), i = D(t), n = await g.executeCommand("detectEdge", e, {
           expand: 10,
           // 安全距离（像素）
           smoothing: !0,
@@ -187,126 +410,226 @@ const le = /* @__PURE__ */ O({
           simplifyTolerance: 2
           // 平滑度容差，值越大越圆润
         });
-        if (i) {
-          y(i);
-          const o = (d.get("image.items") || []).find((s) => s.url === e);
-          if (o?.id) {
-            const s = n.filter(
-              (u) => u.id === o.id
+        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 F(i, s);
+            await T(n, m);
           }
-          return i.pathData;
+          return n.pathData;
         }
         return null;
       },
       detectDielineFromFrame: async (e) => {
-        const t = e?.detect?.debug === !0, n = e?.inspect?.includeCroppedImage === !0, i = e?.inspect?.includeDiagnostics === !0, r = await N({
+        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({
           multiplier: e?.export?.multiplier ?? 2,
           format: e?.export?.format ?? "png",
           imageIds: e?.export?.imageIds
-        }), o = r?.url;
-        if (!o) return null;
+        }), a = s?.url;
+        if (!a) return null;
         try {
           t && console.info("[PooderEditor] detectDielineFromFrame sourceImage", {
-            width: r.width,
-            height: r.height,
-            format: r.format,
-            multiplier: r.multiplier,
-            imageCount: r.imageIds.length
+            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 s = await c.executeCommand("detectEdge", o, {
+          const o = await g.executeCommand("detectEdge", a, {
             expand: e?.detect?.expand ?? 0,
             smoothing: e?.detect?.smoothing ?? !0,
             simplifyTolerance: e?.detect?.simplifyTolerance ?? 2,
             threshold: e?.detect?.threshold,
-            morphologyRadius: e?.detect?.morphologyRadius,
-            connectRadiusMax: e?.detect?.connectRadiusMax,
-            maskMode: e?.detect?.maskMode,
-            whiteThreshold: e?.detect?.whiteThreshold,
-            alphaOpaqueCutoff: e?.detect?.alphaOpaqueCutoff,
-            noChannels: e?.detect?.noChannels,
-            componentMode: e?.detect?.componentMode ?? "all",
-            minComponentArea: e?.detect?.minComponentArea,
-            forceConnected: e?.detect?.forceConnected ?? !0,
             debug: t
           });
-          if (!s) return null;
-          const u = j(s, r);
-          return t && console.info(
+          if (!o) return null;
+          const h = ce(o, s);
+          if (t && console.info(
             "[PooderEditor] detectDielineFromFrame diagnostics",
-            u
-          ), e?.commit === !1 ? {
-            ...s,
-            ...n ? { sourceImage: r } : {},
-            ...i ? { diagnostics: u } : {}
-          } : (y(s), {
-            ...s,
-            ...n ? { sourceImage: r } : {},
-            ...i ? { diagnostics: u } : {}
-          });
+            h
+          ), e?.commit === !1)
+            return {
+              ...o,
+              ...i ? { sourceImage: s } : {},
+              ...n ? { diagnostics: h } : {}
+            };
+          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({
+            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);
+            }
+          if (l === "config" && s.imageIds.length > 0 && (w = await se(
+            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 } : {}
+          };
         } finally {
-          o && !n && URL.revokeObjectURL(o);
+          a && !i && URL.revokeObjectURL(a);
         }
       },
       uploadAndDetectEdge: async (e, t) => {
-        const n = a.getService("CanvasService"), i = await I(e), r = E(n).filter(
-          (s) => s.id === i
-        ), o = await c.executeCommand("detectEdge", e, {
+        const i = u.getService("CanvasService"), n = await U(e), d = D(i).filter(
+          (m) => m.id === n
+        ), r = await g.executeCommand("detectEdge", e, {
           expand: t?.expand ?? 10,
           smoothing: t?.smoothing ?? !0,
           simplifyTolerance: t?.simplifyTolerance ?? 2
         });
-        return o ? (y(o), await F(o, r), { imageId: i, url: e, pathData: o.pathData }) : null;
+        return r ? (P(r), await T(r, d), { imageId: n, url: e, pathData: r.pathData }) : null;
       },
-      activateTool: async (e) => await f.switchTool(e),
-      deactivateTool: async () => await f.deactivate(),
-      on: (e, t) => a.eventBus.on(e, t),
-      off: (e, t) => a.eventBus.off(e, t),
-      emit: (e, t) => a.eventBus.emit(e, t),
-      executeCommand: (e, ...t) => c.executeCommand(e, ...t),
-      getConfig: (e) => d.get(e),
-      updateConfig: (e, t) => d.update(e, t),
+      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),
       services: {
-        workbench: f,
-        command: c,
-        config: d
+        workbench: S,
+        command: g,
+        config: c
       }
     });
-    const U = (e) => {
-      const t = new ne(e, {
-        eventBus: a.eventBus
+    const ue = (e) => {
+      const t = new ve(e, {
+        eventBus: u.eventBus
       });
-      a.registerService(t, "CanvasService"), a.registerService(new ie(), T), a.registerService(
-        new oe(),
-        B
+      u.registerService(t, "CanvasService"), u.registerService(new be(), j), u.registerService(
+        new xe(),
+        V
       ), [
-        new ae(),
-        new re(),
-        new ce(),
+        new Se(),
+        new Ce(),
+        new Ne(),
         // new FilmTool(),
-        new se(),
-        new de(),
-        new ue(),
-        new me(),
-        new ge()
-      ].forEach((i) => {
-        a.extensionManager.register(i);
+        new Ie(),
+        new Fe(),
+        new Be(),
+        new Me(),
+        new De()
+      ].forEach((n) => {
+        u.extensionManager.register(n);
       });
-    }, V = (e, t) => {
-      const n = a.getService("CanvasService");
-      n && n.resize(e, t);
+    }, ge = (e, t) => {
+      const i = u.getService("CanvasService");
+      i && i.resize(e, t);
     };
-    return Y(() => {
-      w.dispose(), a.extensionManager.destroy(), a.unregisterService(B), a.unregisterService(T), a.unregisterService("CanvasService");
-    }), (e, t) => (X(), R("div", fe, [
-      ee(he, {
-        onCanvasReady: U,
-        onResize: V
+    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
       })
     ]));
   }
-}), _e = /* @__PURE__ */ A(pe, [["__scopeId", "data-v-2149abdf"]]);
+}), We = /* @__PURE__ */ K(Pe, [["__scopeId", "data-v-7e138562"]]);
 export {
-  _e as PooderEditor
+  We as PooderEditor
 };

package/dist/index.umd.js

@@ -1 +1 @@
-(function(l,u){typeof exports=="object"&&typeof module<"u"?u(exports,require("vue"),require("@pooder/core"),require("@pooder/kit")):typeof define=="function"&&define.amd?define(["exports","vue","@pooder/core","@pooder/kit"],u):(l=typeof globalThis<"u"?globalThis:l||self,u(l.PooderVue={},l.Vue,l.PooderCore,l.PooderKit))})(this,(function(l,u,S,h){"use strict";const j=u.defineComponent({__name:"CanvasArea",emits:["canvas-ready","resize"],setup(m,{emit:b}){const p=b,r=u.ref(null),c=u.ref(null);let d=null;return u.onMounted(()=>{if(r.value&&c.value){const{clientWidth:w,clientHeight:y}=r.value;c.value.width=w,c.value.height=y,p("canvas-ready",c.value),d=new ResizeObserver(x=>{for(const _ of x){const{width:I,height:E}=_.contentRect;p("resize",I,E)}}),d.observe(r.value)}}),u.onUnmounted(()=>{d&&d.disconnect()}),(w,y)=>(u.openBlock(),u.createElementBlock("div",{ref_key:"container",ref:r,class:"pooder-canvas-area"},[u.createElementVNode("canvas",{ref_key:"canvas",ref:c},null,512)],512))}}),D=(m,b)=>{const p=m.__vccOpts||m;for(const[r,c]of b)p[r]=c;return p},X=D(j,[["__scopeId","data-v-203ff8d9"]]),A={class:"pooder-editor"},O="SceneLayoutService",F="SceneVisibilityService",W="image.user",z=D(u.defineComponent({__name:"PooderEditor",emits:["image-change"],setup(m,{expose:b,emit:p}){const r=new S.Pooder;u.provide("pooder",r);const c=r.getService("CommandService"),d=r.getService("ConfigurationService"),w=r.getService("WorkbenchService"),y=p,x=d.onAnyChange(e=>{e.key==="image.items"&&y("image-change",e.value)}),_=e=>{d.import(e)},I=()=>d.export(),E=()=>d.get("image.items",[]),H=async e=>{try{const t=await c.executeCommand("exportCutImage",e);return t||console.warn("[PooderEditor] generateCutImage returned null",{options:e,imageCount:(d.get("image.items")||[]).length,hasCanvasService:!!r.getService("CanvasService")}),t}catch(t){throw console.error("[PooderEditor] generateCutImage failed",t),t}},T=async(e,t)=>await c.executeCommand("upsertImage",e,{id:t?.id,mode:t?.mode,addOptions:t?.addOptions,fitOnAdd:t?.fitOnAdd}),M=async(e,t)=>(await T(e,{mode:"add",addOptions:t,fitOnAdd:!0})).id,V=async(e,t)=>await c.executeCommand("updateImage",e,t),L=async()=>await c.executeCommand("clearImages"),B=async e=>await c.executeCommand("exportUserCroppedImage",e),U=async(e,t)=>await c.executeCommand("focusImage",e,t),P=e=>Math.max(-1,Math.min(2,e)),q=e=>{const t=e?.cutRect;if(!t)return null;const n=Number(t.width),o=Number(t.height),a=Number(t.left),i=Number(t.top);return!Number.isFinite(n)||!Number.isFinite(o)||!Number.isFinite(a)||!Number.isFinite(i)||n<=0||o<=0?null:{left:a,top:i,width:n,height:o}},Y=e=>{if(!e)return[];const t=e.canvas.getObjects(),n=[];for(const o of t){if(o?.data?.layerId!==W)continue;const a=o?.data?.id;if(typeof a!="string")continue;const i=o.getCenterPoint?o.getCenterPoint():null,s=Number(i?.x??o.left),g=Number(i?.y??o.top),f=Number(o.scaleX),v=Number(o.width),C=Number(o.height);!Number.isFinite(s)||!Number.isFinite(g)||!Number.isFinite(f)||!Number.isFinite(v)||!Number.isFinite(C)||v<=0||C<=0||n.push({id:a,centerX:s,centerY:g,objectScale:f,sourceWidth:v,sourceHeight:C})}return n},N=e=>{d.update("dieline.shape","custom"),d.update("dieline.pathData",e.pathData),d.update("dieline.features",[]),d.update("size.cutMode","trim"),d.update("size.cutMarginMm",0)},k=(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 o=t.width/2,a=t.height/2,i=n.x+n.width/2,s=n.y+n.height/2;return{sourceWidth:t.width,sourceHeight:t.height,detectedBounds:n,centerOffsetX:i-o,centerOffsetY:s-a,coverageX:t.width>0?n.width/t.width:0,coverageY:t.height>0?n.height/t.height:0}},G=(e,t)=>{const n=e.rawBounds||e.baseBounds,o=Number(e.imageWidth??0),a=Number(e.imageHeight??0);if(!n||!Number.isFinite(n.x)||!Number.isFinite(n.y)||!Number.isFinite(n.width)||!Number.isFinite(n.height)||n.width<=0||n.height<=0||o<=0||a<=0)return{shiftX:0,shiftY:0};const i=t.width/n.width,s=t.height/n.height,g=n.x+n.width/2,f=n.y+n.height/2,v=o/2,C=a/2;return{shiftX:(g-v)*i,shiftY:(f-C)*s}},R=async(e,t,n=!1,o="auto")=>{if(!t.length)return;const a=await c.executeCommand("getSceneLayout"),i=q(a);if(!i)return;const{shiftX:s,shiftY:g}=G(e,i);n&&console.info("[PooderEditor] detectDieline alignment",{frame:i,shiftX:s,shiftY:g,snapshotCount:t.length,baseBounds:e.baseBounds,rawBounds:e.rawBounds,imageWidth:e.imageWidth,imageHeight:e.imageHeight});for(const f of t){const v=Math.max(i.width/Math.max(1,f.sourceWidth),i.height/Math.max(1,f.sourceHeight)),C=Math.max(.05,f.objectScale/v),$=f.centerX-s,Q=f.centerY-g,Z=P(($-i.left)/Math.max(1,i.width)),ee=P((Q-i.top)/Math.max(1,i.height));await c.executeCommand("updateImage",f.id,{scale:C,left:Z,top:ee},{target:o})}};b({importConfig:_,exportConfig:I,getImages:E,generateCutImage:H,addImage:M,upsertImage:T,updateImage:V,clearImages:L,exportUserCroppedImage:B,focusImage:U,detectDieline:async e=>{const t=r.getService("CanvasService"),n=Y(t),o=await c.executeCommand("detectEdge",e,{expand:10,smoothing:!0,simplifyTolerance:2});if(o){N(o);const i=(d.get("image.items")||[]).find(s=>s.url===e);if(i?.id){const s=n.filter(g=>g.id===i.id);await R(o,s)}return o.pathData}return null},detectDielineFromFrame:async e=>{const t=e?.detect?.debug===!0,n=e?.inspect?.includeCroppedImage===!0,o=e?.inspect?.includeDiagnostics===!0,a=await B({multiplier:e?.export?.multiplier??2,format:e?.export?.format??"png",imageIds:e?.export?.imageIds}),i=a?.url;if(!i)return null;try{t&&console.info("[PooderEditor] detectDielineFromFrame sourceImage",{width:a.width,height:a.height,format:a.format,multiplier:a.multiplier,imageCount:a.imageIds.length});const s=await c.executeCommand("detectEdge",i,{expand:e?.detect?.expand??0,smoothing:e?.detect?.smoothing??!0,simplifyTolerance:e?.detect?.simplifyTolerance??2,threshold:e?.detect?.threshold,morphologyRadius:e?.detect?.morphologyRadius,connectRadiusMax:e?.detect?.connectRadiusMax,maskMode:e?.detect?.maskMode,whiteThreshold:e?.detect?.whiteThreshold,alphaOpaqueCutoff:e?.detect?.alphaOpaqueCutoff,noChannels:e?.detect?.noChannels,componentMode:e?.detect?.componentMode??"all",minComponentArea:e?.detect?.minComponentArea,forceConnected:e?.detect?.forceConnected??!0,debug:t});if(!s)return null;const g=k(s,a);return t&&console.info("[PooderEditor] detectDielineFromFrame diagnostics",g),e?.commit===!1?{...s,...n?{sourceImage:a}:{},...o?{diagnostics:g}:{}}:(N(s),{...s,...n?{sourceImage:a}:{},...o?{diagnostics:g}:{}})}finally{i&&!n&&URL.revokeObjectURL(i)}},uploadAndDetectEdge:async(e,t)=>{const n=r.getService("CanvasService"),o=await M(e),a=Y(n).filter(s=>s.id===o),i=await c.executeCommand("detectEdge",e,{expand:t?.expand??10,smoothing:t?.smoothing??!0,simplifyTolerance:t?.simplifyTolerance??2});return i?(N(i),await R(i,a),{imageId:o,url:e,pathData:i.pathData}):null},activateTool:async e=>await w.switchTool(e),deactivateTool:async()=>await w.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)=>c.executeCommand(e,...t),getConfig:e=>d.get(e),updateConfig:(e,t)=>d.update(e,t),services:{workbench:w,command:c,config:d}});const J=e=>{const t=new h.CanvasService(e,{eventBus:r.eventBus});r.registerService(t,"CanvasService"),r.registerService(new h.SceneLayoutService,O),r.registerService(new h.SceneVisibilityService,F),[new h.BackgroundTool,new h.SizeTool,new h.ImageTool,new h.WhiteInkTool,new h.MirrorTool,new h.DielineTool,new h.RulerTool,new h.FeatureTool].forEach(o=>{r.extensionManager.register(o)})},K=(e,t)=>{const n=r.getService("CanvasService");n&&n.resize(e,t)};return u.onUnmounted(()=>{x.dispose(),r.extensionManager.destroy(),r.unregisterService(F),r.unregisterService(O),r.unregisterService("CanvasService")}),(e,t)=>(u.openBlock(),u.createElementBlock("div",A,[u.createVNode(X,{onCanvasReady:J,onResize:K})]))}}),[["__scopeId","data-v-2149abdf"]]);l.PooderEditor=z,Object.keys(S).forEach(m=>{m!=="default"&&!Object.prototype.hasOwnProperty.call(l,m)&&Object.defineProperty(l,m,{enumerable:!0,get:()=>S[m]})}),Object.keys(h).forEach(m=>{m!=="default"&&!Object.prototype.hasOwnProperty.call(l,m)&&Object.defineProperty(l,m,{enumerable:!0,get:()=>h[m]})}),Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));
+(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"})}));

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

@@ -53,15 +53,6 @@ declare const _default: import('vue').DefineComponent<{}, {
             smoothing?: boolean;
             simplifyTolerance?: number;
             threshold?: number;
-            morphologyRadius?: number;
-            connectRadiusMax?: number;
-            maskMode?: "auto" | "alpha" | "whitebg";
-            whiteThreshold?: number;
-            alphaOpaqueCutoff?: number;
-            noChannels?: boolean;
-            componentMode?: "largest" | "all";
-            minComponentArea?: number;
-            forceConnected?: boolean;
             debug?: boolean;
         };
         export?: {

package/dist/vue.css

@@ -1 +1 @@
-.pooder-canvas-area[data-v-203ff8d9]{flex:1;width:100%;height:100%;min-height:650px;min-width:650px;overflow:hidden;background:#ececec;position:relative}canvas[data-v-203ff8d9]{display:block}.pooder-editor[data-v-2149abdf]{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-7e138562]{display:flex;width:100%;height:100%;overflow:hidden}

package/package.json

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