@pooder/vue 4.2.6 → 4.2.8

package/dist/index.es.js

@@ -1,104 +1,89 @@
-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 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 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 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 le = /* @__PURE__ */ O({
+const se = /* @__PURE__ */ O({
   __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(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);
           }
-        }), d.observe(a.value);
+        }), o.observe(r.value);
       }
-    }), Y(() => {
-      d && d.disconnect();
-    }), (f, C) => (X(), R("div", {
+    }), N(() => {
+      o && o.disconnect();
+    }), (u, f) => (k(), P("div", {
       ref_key: "container",
-      ref: a,
+      ref: r,
       class: "pooder-canvas-area"
     }, [
-      Q("canvas", {
+      $("canvas", {
         ref_key: "canvas",
-        ref: c
+        ref: i
       }, 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({
+}), 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-203ff8d9"]]), me = { class: "pooder-editor" }, F = "SceneLayoutService", B = "SceneVisibilityService", ue = /* @__PURE__ */ O({
   __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(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 c.executeCommand(
+        const t = await i.executeCommand(
           "exportCutImage",
           e
         );
         return t || console.warn("[PooderEditor] generateCutImage returned null", {
           options: e,
-          imageCount: (d.get("image.items") || []).length,
-          hasCanvasService: !!a.getService("CanvasService")
+          imageCount: (o.get("image.items") || []).length,
+          hasCanvasService: !!r.getService("CanvasService")
         }), t;
       } catch (t) {
         throw console.error("[PooderEditor] generateCutImage failed", t), t;
       }
-    }, _ = async (e, t) => await c.executeCommand("upsertImage", e, {
+    }, _ = async (e, t) => await i.executeCommand("upsertImage", e, {
       id: t?.id,
       mode: t?.mode,
       addOptions: t?.addOptions,
       fitOnAdd: t?.fitOnAdd
-    }), I = async (e, t) => (await _(e, {
+    }), D = async (e, t) => (await _(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, U = async (e, t) => await i.executeCommand("updateImage", e, t), z = async () => await i.executeCommand("clearImages"), C = async (e) => await i.executeCommand(
       "exportUserCroppedImage",
       e
-    ), P = async (e, t) => await c.executeCommand("focusImage", e, t), D = (e) => Math.max(-1, Math.min(2, e)), H = (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) => {
-      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,
-          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) => {
+    ), 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);
+    }, 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, E = (e, t) => {
       const n = e.rawBounds || e.baseBounds || null;
       if (!n)
         return {
@@ -110,76 +95,81 @@ 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 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: n,
-        centerOffsetX: o - i,
-        centerOffsetY: s - r,
+        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, 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)
-        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;
+    }, L = (e) => {
+      if (!b(e.rawBounds) || !b(e.baseBounds))
+        return null;
+      const t = e.rawBounds, n = e.baseBounds;
       return {
-        shiftX: (u - l) * o,
-        shiftY: (m - h) * s
+        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)
       };
-    }, F = async (e, t, n = !1, i = "auto") => {
-      if (!t.length) return;
-      const r = await c.executeCommand("getSceneLayout"), o = H(r);
-      if (!o) return;
-      const { shiftX: s, shiftY: u } = L(e, o);
-      n && console.info("[PooderEditor] detectDieline alignment", {
-        frame: o,
-        shiftX: s,
-        shiftY: u,
-        snapshotCount: t.length,
-        baseBounds: e.baseBounds,
-        rawBounds: e.rawBounds,
-        imageWidth: e.imageWidth,
-        imageHeight: e.imageHeight
-      });
-      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)
-        );
-        await c.executeCommand(
-          "updateImage",
-          m.id,
-          {
-            scale: h,
-            left: J,
-            top: $
-          },
-          {
-            target: i
-          }
-        );
+    }, 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 {
+        frame: a,
+        margin: c,
+        expectedExpand: n,
+        marginDeltaFromExpected: s,
+        marginAsymmetry: d
+      };
+    }, 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
+        });
+        return s ? V(
+          s,
+          a,
+          t
+        ) : null;
+      } finally {
+        URL.revokeObjectURL(c);
       }
     };
-    v({
-      importConfig: b,
-      exportConfig: S,
-      getImages: x,
-      generateCutImage: k,
-      addImage: I,
+    l({
+      importConfig: p,
+      exportConfig: w,
+      getImages: y,
+      generateCutImage: A,
+      addImage: D,
       upsertImage: _,
-      updateImage: W,
+      updateImage: U,
       clearImages: z,
-      exportUserCroppedImage: N,
-      focusImage: P,
+      exportUserCroppedImage: C,
+      focusImage: M,
       detectDieline: async (e) => {
-        const t = a.getService("CanvasService"), n = E(t), i = await c.executeCommand("detectEdge", e, {
+        const t = await i.executeCommand("detectEdge", e, {
           expand: 10,
           // 安全距离（像素）
           smoothing: !0,
@@ -187,126 +177,121 @@ 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
-            );
-            await F(i, s);
-          }
-          return i.pathData;
-        }
-        return null;
+        return t ? (x(t), t.pathData) : 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, 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
-        }), o = r?.url;
-        if (!o) return null;
+        }), d = s?.url;
+        if (!d)
+          return console.warn("[PooderEditor] detectDielineFromFrame no source image"), null;
         try {
-          t && console.info("[PooderEditor] detectDielineFromFrame sourceImage", {
-            width: r.width,
-            height: r.height,
-            format: r.format,
-            multiplier: r.multiplier,
-            imageCount: r.imageIds.length
-          });
-          const s = await c.executeCommand("detectEdge", o, {
+          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,
-            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(
-            "[PooderEditor] detectDielineFromFrame diagnostics",
-            u
-          ), e?.commit === !1 ? {
-            ...s,
-            ...n ? { sourceImage: r } : {},
-            ...i ? { diagnostics: u } : {}
-          } : (y(s), {
-            ...s,
-            ...n ? { sourceImage: r } : {},
-            ...i ? { diagnostics: u } : {}
-          });
+          if (!g)
+            return console.warn(
+              "[PooderEditor] detectDielineFromFrame detectEdge returned null"
+            ), null;
+          const I = E(g, s);
+          if (e?.commit === !1)
+            return {
+              ...g,
+              ...n ? { sourceImage: s } : {},
+              ...a ? { diagnostics: I } : {}
+            };
+          x(g, s);
+          const X = {
+            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 S = await W(
+            s.imageIds,
+            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 {
-          o && !n && URL.revokeObjectURL(o);
+          d && !n && URL.revokeObjectURL(d);
         }
       },
       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 n = await D(e), a = await i.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 a ? (x(a), { imageId: n, url: e, pathData: a.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 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: f,
-        command: c,
-        config: d
+        workbench: u,
+        command: i,
+        config: o
       }
     });
-    const U = (e) => {
-      const t = new ne(e, {
-        eventBus: a.eventBus
+    const Y = (e) => {
+      const t = new K(e, {
+        eventBus: r.eventBus
       });
-      a.registerService(t, "CanvasService"), a.registerService(new ie(), T), a.registerService(
-        new oe(),
+      r.registerService(t, "CanvasService"), r.registerService(new Q(), F), r.registerService(
+        new Z(),
         B
       ), [
-        new ae(),
-        new re(),
-        new ce(),
+        new ee(),
+        new te(),
+        new ne(),
         // new FilmTool(),
-        new se(),
-        new de(),
-        new ue(),
-        new me(),
-        new ge()
-      ].forEach((i) => {
-        a.extensionManager.register(i);
+        new re(),
+        new ie(),
+        new oe(),
+        new ae(),
+        new ce()
+      ].forEach((a) => {
+        r.extensionManager.register(a);
       });
-    }, V = (e, t) => {
-      const n = a.getService("CanvasService");
+    }, H = (e, t) => {
+      const n = r.getService("CanvasService");
       n && n.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 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
       })
     ]));
   }
-}), _e = /* @__PURE__ */ A(pe, [["__scopeId", "data-v-2149abdf"]]);
+}), we = /* @__PURE__ */ R(ue, [["__scopeId", "data-v-53ea55ea"]]);
 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(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 f=p,r=s.ref(null),o=s.ref(null);let i=null;return s.onMounted(()=>{if(r.value&&o.value){const{clientWidth:h,clientHeight:y}=r.value;o.value.width=h,o.value.height=y,f("canvas-ready",o.value),i=new ResizeObserver(C=>{for(const S of C){const{width:x,height:b}=S.contentRect;f("resize",x,b)}}),i.observe(r.value)}}),s.onUnmounted(()=>{i&&i.disconnect()}),(h,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 f=d.__vccOpts||d;for(const[r,o]of p)f[r]=o;return f},j=O(U,[["__scopeId","data-v-203ff8d9"]]),A={class:"pooder-editor"},I="SceneLayoutService",T="SceneVisibilityService",M=O(s.defineComponent({__name:"PooderEditor",emits:["image-change"],setup(d,{expose:p,emit:f}){const r=new w.Pooder;s.provide("pooder",r);const o=r.getService("CommandService"),i=r.getService("ConfigurationService"),h=r.getService("WorkbenchService"),y=f,C=i.onAnyChange(e=>{e.key==="image.items"&&y("image-change",e.value)}),S=e=>{i.import(e)},x=()=>i.export(),b=()=>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:x,getImages:b,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 h.switchTool(e),deactivateTool:async()=>await h.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:h,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-53ea55ea"]]);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;
@@ -53,15 +69,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?: {
@@ -76,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;
@@ -92,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-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-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-53ea55ea]{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.8",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -20,7 +20,7 @@
   },
   "dependencies": {
     "@pooder/core": "2.2.0",
-    "@pooder/kit": "5.2.0"
+    "@pooder/kit": "5.3.1"
   },
   "peerDependencies": {
     "vue": "^3.0.0"

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;