@pooder/vue 4.2.3 → 4.2.5

package/dist/index.es.js

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

package/dist/index.umd.js

@@ -1 +1 @@
-(function(u,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):(u=typeof globalThis<"u"?globalThis:u||self,s(u.PooderVue={},u.Vue,u.PooderCore,u.PooderKit))})(this,(function(u,s,S,g){"use strict";const P=s.defineComponent({__name:"CanvasArea",emits:["canvas-ready","resize"],setup(m,{emit:y}){const h=y,i=s.ref(null),c=s.ref(null);let d=null;return s.onMounted(()=>{if(i.value&&c.value){const{clientWidth:b,clientHeight:C}=i.value;c.value.width=b,c.value.height=C,h("canvas-ready",c.value),d=new ResizeObserver(x=>{for(const _ of x){const{width:I,height:N}=_.contentRect;h("resize",I,N)}}),d.observe(i.value)}}),s.onUnmounted(()=>{d&&d.disconnect()}),(b,C)=>(s.openBlock(),s.createElementBlock("div",{ref_key:"container",ref:i,class:"pooder-canvas-area"},[s.createElementVNode("canvas",{ref_key:"canvas",ref:c},null,512)],512))}}),E=(m,y)=>{const h=m.__vccOpts||m;for(const[i,c]of y)h[i]=c;return h},j=E(P,[["__scopeId","data-v-dc60e8d6"]]),A={class:"pooder-editor"},R="image.user",z=E(s.defineComponent({__name:"PooderEditor",emits:["image-change"],setup(m,{expose:y,emit:h}){const i=new S.Pooder;s.provide("pooder",i);const c=i.getService("CommandService"),d=i.getService("ConfigurationService"),b=i.getService("WorkbenchService"),C=h,x=d.onAnyChange(e=>{e.key==="image.items"&&C("image-change",e.value)}),_=e=>{d.import(e)},I=()=>d.export(),N=()=>d.get("image.items",[]),X=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:!!i.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,createIfMissing:t?.createIfMissing,addOptions:t?.addOptions,fitOnAdd:t?.fitOnAdd}),M=async(e,t)=>(await T(e,{mode:"add",addOptions:t,fitOnAdd:!0})).id,Y=async(e,t)=>await c.executeCommand("updateImage",e,t),W=async()=>await c.executeCommand("clearImages"),B=e=>Math.max(-1,Math.min(2,e)),H=e=>{const t=e?.cutRect;if(!t)return null;const n=Number(t.width),o=Number(t.height),a=Number(t.left),r=Number(t.top);return!Number.isFinite(n)||!Number.isFinite(o)||!Number.isFinite(a)||!Number.isFinite(r)||n<=0||o<=0?null:{left:a,top:r,width:n,height:o}},F=e=>{if(!e)return[];const t=e.canvas.getObjects(),n=[];for(const o of t){if(o?.data?.layerId!==R)continue;const a=o?.data?.id;if(typeof a!="string")continue;const r=o.getCenterPoint?o.getCenterPoint():null,l=Number(r?.x??o.left),f=Number(r?.y??o.top),w=Number(o.scaleX),p=Number(o.width),v=Number(o.height);!Number.isFinite(l)||!Number.isFinite(f)||!Number.isFinite(w)||!Number.isFinite(p)||!Number.isFinite(v)||p<=0||v<=0||n.push({id:a,centerX:l,centerY:f,objectScale:w,sourceWidth:p,sourceHeight:v})}return n},O=e=>{d.update("dieline.shape","custom"),d.update("dieline.pathData",e.pathData),d.update("size.cutMode","trim"),d.update("size.cutMarginMm",0)},L=(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 r=t.width/n.width,l=t.height/n.height,f=n.x+n.width/2,w=n.y+n.height/2,p=o/2,v=a/2;return{shiftX:(f-p)*r,shiftY:(w-v)*l}},D=async(e,t,n=!1)=>{if(!t.length)return;const o=await c.executeCommand("getSceneLayout"),a=H(o);if(!a)return;const{shiftX:r,shiftY:l}=L(e,a);n&&console.info("[PooderEditor] detectDieline alignment",{frame:a,shiftX:r,shiftY:l,snapshotCount:t.length,baseBounds:e.baseBounds,rawBounds:e.rawBounds,imageWidth:e.imageWidth,imageHeight:e.imageHeight});for(const f of t){const w=Math.max(a.width/Math.max(1,f.sourceWidth),a.height/Math.max(1,f.sourceHeight)),p=Math.max(.05,f.objectScale/w),v=f.centerX-r,q=f.centerY-l,G=B((v-a.left)/Math.max(1,a.width)),J=B((q-a.top)/Math.max(1,a.height));await c.executeCommand("updateImage",f.id,{scale:p,left:G,top:J})}};y({importConfig:_,exportConfig:I,getImages:N,generateCutImage:X,addImage:M,upsertImage:T,updateImage:Y,clearImages:W,detectDieline:async e=>{const t=i.getService("CanvasService"),n=F(t),o=await c.executeCommand("detectEdge",e,{expand:10,smoothing:!0,simplifyTolerance:2});if(o){O(o);const r=(d.get("image.items")||[]).find(l=>l.url===e);if(r?.id){const l=n.filter(f=>f.id===r.id);await D(o,l)}return o.pathData}return null},detectDielineFromFrame:async e=>{const t=e?.detect?.debug===!0,n=i.getService("CanvasService"),o=F(n),{url:a}=await c.executeCommand("exportImageFrameUrl",{multiplier:2,format:"png"});try{const r=await c.executeCommand("detectEdge",a,{expand:e?.detect?.expand??30,smoothing:e?.detect?.smoothing??!0,simplifyTolerance:e?.detect?.simplifyTolerance??2,debug:t});return r?(e?.commit===!1||(O(r),await D(r,o,t)),r):null}finally{a&&URL.revokeObjectURL(a)}},uploadAndDetectEdge:async(e,t)=>{const n=i.getService("CanvasService"),o=await M(e),a=F(n).filter(l=>l.id===o),r=await c.executeCommand("detectEdge",e,{expand:t?.expand??10,smoothing:t?.smoothing??!0,simplifyTolerance:t?.simplifyTolerance??2});return r?(O(r),await D(r,a),{imageId:o,url:e,pathData:r.pathData}):null},activateTool:async e=>await b.switchTool(e),deactivateTool:async()=>await b.deactivate(),on:(e,t)=>i.eventBus.on(e,t),off:(e,t)=>i.eventBus.off(e,t),emit:(e,t)=>i.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:b,command:c,config:d}});const U=e=>{const t=new g.CanvasService(e,{eventBus:i.eventBus});i.registerService(t,"CanvasService"),[new g.BackgroundTool,new g.SizeTool,new g.SceneLayoutService,new g.SceneVisibilityService,new g.ImageTool,new g.WhiteInkTool,new g.MirrorTool,new g.DielineTool,new g.RulerTool,new g.FeatureTool].forEach(o=>{i.extensionManager.register(o)})},V=(e,t)=>{const n=i.getService("CanvasService");n&&n.resize(e,t)};return s.onUnmounted(()=>{const e=i.getService("CanvasService");e&&e.dispose(),x.dispose(),i.extensionManager.destroy()}),(e,t)=>(s.openBlock(),s.createElementBlock("div",A,[s.createVNode(j,{onCanvasReady:U,onResize:V})]))}}),[["__scopeId","data-v-234847f9"]]);u.PooderEditor=z,Object.keys(S).forEach(m=>{m!=="default"&&!Object.prototype.hasOwnProperty.call(u,m)&&Object.defineProperty(u,m,{enumerable:!0,get:()=>S[m]})}),Object.keys(g).forEach(m=>{m!=="default"&&!Object.prototype.hasOwnProperty.call(u,m)&&Object.defineProperty(u,m,{enumerable:!0,get:()=>g[m]})}),Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})}));
+(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"})}));

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

@@ -5,12 +5,22 @@ interface DetectBounds {
     width: number;
     height: number;
 }
-interface DetectEdgeResult {
-    pathData: string;
-    rawBounds?: DetectBounds;
-    baseBounds?: DetectBounds;
-    imageWidth?: number;
-    imageHeight?: number;
+interface DetectFrameDiagnostics {
+    sourceWidth: number;
+    sourceHeight: number;
+    detectedBounds: DetectBounds | null;
+    centerOffsetX: number;
+    centerOffsetY: number;
+    coverageX: number;
+    coverageY: number;
+}
+interface ExportUserCroppedImageResult {
+    url: string;
+    width: number;
+    height: number;
+    multiplier: number;
+    format: "png" | "jpeg";
+    imageIds: string[];
 }
 declare const _default: import('vue').DefineComponent<{}, {
     importConfig: (config: Record<string, any>) => void;
@@ -22,23 +32,57 @@ declare const _default: import('vue').DefineComponent<{}, {
     addImage: (url: string, options?: any) => Promise<any>;
     upsertImage: (url: string, options?: {
         id?: string;
-        mode?: "auto" | "replace" | "add";
-        createIfMissing?: boolean;
+        mode?: "replace" | "add";
         addOptions?: any;
         fitOnAdd?: boolean;
     }) => Promise<any>;
     updateImage: (id: string, options?: any) => Promise<any>;
     clearImages: () => Promise<any>;
+    exportUserCroppedImage: (options?: {
+        multiplier?: number;
+        format?: "png" | "jpeg";
+        imageIds?: string[];
+    }) => Promise<ExportUserCroppedImageResult>;
+    focusImage: (id: string | null, options?: {
+        syncCanvasSelection?: boolean;
+    }) => Promise<any>;
     detectDieline: (url: string) => Promise<string | null>;
     detectDielineFromFrame: (options?: {
         detect?: {
             expand?: number;
             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?: {
+            multiplier?: number;
+            format?: "png" | "jpeg";
+            imageIds?: string[];
+        };
+        inspect?: {
+            includeCroppedImage?: boolean;
+            includeDiagnostics?: boolean;
+        };
         commit?: boolean;
-    }) => Promise<DetectEdgeResult | null>;
+    }) => Promise<{
+        diagnostics?: DetectFrameDiagnostics | undefined;
+        sourceImage?: ExportUserCroppedImageResult | undefined;
+        pathData: string;
+        rawBounds?: DetectBounds;
+        baseBounds?: DetectBounds;
+        imageWidth?: number;
+        imageHeight?: number;
+    } | null>;
     uploadAndDetectEdge: (url: string, options?: {
         expand?: number;
         smoothing?: boolean;

package/dist/vue.css

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pooder/vue",
-  "version": "4.2.3",
+  "version": "4.2.5",
   "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.1.0",
-    "@pooder/kit": "5.0.3"
+    "@pooder/core": "2.2.0",
+    "@pooder/kit": "5.1.0"
   },
   "peerDependencies": {
     "vue": "^3.0.0"