@pooder/vue 4.1.2 → 4.2.0

package/dist/index.es.js

@@ -1,80 +1,138 @@
-import { defineComponent as T, ref as b, onMounted as F, onUnmounted as k, createElementBlock as B, openBlock as D, createElementVNode as L, provide as U, createVNode as $ } from "vue";
-import { Pooder as q } from "@pooder/core";
+import { defineComponent as T, ref as M, onMounted as U, onUnmounted as B, createElementBlock as E, openBlock as O, createElementVNode as V, provide as G, createVNode as J } from "vue";
+import { Pooder as $ } from "@pooder/core";
 export * from "@pooder/core";
-import { CanvasService as J, BackgroundTool as K, ImageTool as Q, MirrorTool as Z, DielineTool as ee, RulerTool as te, FeatureTool as ne } from "@pooder/kit";
+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";
 export * from "@pooder/kit";
-const ae = /* @__PURE__ */ T({
+const se = /* @__PURE__ */ T({
   __name: "CanvasArea",
   emits: ["canvas-ready", "resize"],
-  setup(f, { emit: v }) {
-    const d = v, t = b(null), a = b(null);
-    let o = null;
-    return F(() => {
-      if (t.value && a.value) {
-        const { clientWidth: u, clientHeight: h } = t.value;
-        a.value.width = u, a.value.height = h, d("canvas-ready", a.value), o = new ResizeObserver((w) => {
-          for (const _ of w) {
-            const { width: S, height: I } = _.contentRect;
-            d("resize", S, I);
+  setup(p, { emit: v }) {
+    const u = v, c = M(null), s = M(null);
+    let r = null;
+    return U(() => {
+      if (c.value && s.value) {
+        const { clientWidth: h, clientHeight: w } = c.value;
+        s.value.width = h, s.value.height = w, u("canvas-ready", s.value), r = new ResizeObserver((b) => {
+          for (const C of b) {
+            const { width: x, height: S } = C.contentRect;
+            u("resize", x, S);
           }
-        }), o.observe(t.value);
+        }), r.observe(c.value);
       }
-    }), k(() => {
-      o && o.disconnect();
-    }), (u, h) => (D(), B("div", {
+    }), B(() => {
+      r && r.disconnect();
+    }), (h, w) => (O(), E("div", {
       ref_key: "container",
-      ref: t,
+      ref: c,
       class: "pooder-canvas-area"
     }, [
-      L("canvas", {
+      V("canvas", {
         ref_key: "canvas",
-        ref: a
+        ref: s
       }, null, 512)
     ], 512));
   }
-}), E = (f, v) => {
-  const d = f.__vccOpts || f;
-  for (const [t, a] of v)
-    d[t] = a;
-  return d;
-}, oe = /* @__PURE__ */ E(ae, [["__scopeId", "data-v-ba73979d"]]), ce = { class: "pooder-editor" }, ie = /* @__PURE__ */ T({
+}), k = (p, v) => {
+  const u = p.__vccOpts || p;
+  for (const [c, s] of v)
+    u[c] = s;
+  return u;
+}, re = /* @__PURE__ */ k(se, [["__scopeId", "data-v-dc60e8d6"]]), de = { class: "pooder-editor" }, me = "image.user", ue = /* @__PURE__ */ T({
   __name: "PooderEditor",
   emits: ["image-change"],
-  setup(f, { expose: v, emit: d }) {
-    const t = new q();
-    U("pooder", t);
-    const a = t.getService("CommandService"), o = t.getService("ConfigurationService"), u = t.getService("WorkbenchService"), h = d, w = o.onAnyChange((e) => {
-      e.key === "image.items" && h("image-change", e.value);
-    });
-    v({
-      importConfig: (e) => {
-        o.import(e);
-      },
-      exportConfig: () => o.export(),
-      getImages: () => o.get("image.items", []),
-      generateCutImage: async () => await a.executeCommand("exportCutImage"),
-      addImage: async (e, n) => {
-        const c = await a.executeCommand("addImage", e, n), i = await a.executeCommand("getGeometry"), s = t.getService("CanvasService");
-        if (i && s) {
-          const r = s.canvas.width, p = s.canvas.height, m = (o.get("dieline.offset") || 0) * i.scale, y = i.width + 2 * m, C = i.height + 2 * m, g = i.x / r, l = i.y / p;
-          await a.executeCommand("fitImageToArea", c, {
-            width: y,
-            height: C,
-            left: g,
-            top: l
-          });
-        } else s && await a.executeCommand("fitImageToArea", c, {
-          width: s.canvas.width,
-          height: s.canvas.height,
-          left: 0.5,
-          top: 0.5
+  setup(p, { expose: v, emit: u }) {
+    const c = new $();
+    G("pooder", c);
+    const s = c.getService("CommandService"), r = c.getService("ConfigurationService"), h = c.getService("WorkbenchService"), w = u, b = r.onAnyChange((e) => {
+      e.key === "image.items" && w("image-change", e.value);
+    }), C = (e) => {
+      r.import(e);
+    }, x = () => r.export(), S = () => r.get("image.items", []), A = async () => await s.executeCommand("exportCutImage"), I = async (e, t) => await s.executeCommand("upsertImage", e, {
+      id: t?.id,
+      mode: t?.mode,
+      createIfMissing: t?.createIfMissing,
+      addOptions: t?.addOptions,
+      fitOnAdd: t?.fitOnAdd
+    }), F = async (e, t) => (await I(e, {
+      mode: "add",
+      addOptions: t,
+      fitOnAdd: !0
+    })).id, R = async (e, t) => await s.executeCommand("updateImage", e, t), z = async () => await s.executeCommand("clearImages"), D = (e) => Math.max(-1, Math.min(2, e)), X = (e) => {
+      const t = e?.cutRect;
+      if (!t) return null;
+      const n = Number(t.width), a = Number(t.height), i = Number(t.left), o = Number(t.top);
+      return !Number.isFinite(n) || !Number.isFinite(a) || !Number.isFinite(i) || !Number.isFinite(o) || n <= 0 || a <= 0 ? null : { left: i, top: o, width: n, height: a };
+    }, y = (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 o = a.getCenterPoint ? a.getCenterPoint() : null, d = Number(o?.x ?? a.left), m = Number(o?.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
         });
-        return c;
-      },
-      updateImage: async (e, n) => await a.executeCommand("updateImage", e, n),
-      clearImages: async () => await a.executeCommand("clearImages"),
+      }
+      return n;
+    }, _ = (e) => {
+      r.update("dieline.shape", "custom"), r.update("dieline.pathData", e.pathData), r.update("size.cutMode", "trim"), r.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)
+        return { shiftX: 0, shiftY: 0 };
+      const o = 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;
+      return {
+        shiftX: (m - g) * o,
+        shiftY: (f - l) * d
+      };
+    }, N = async (e, t, n = !1) => {
+      if (!t.length) return;
+      const a = await s.executeCommand("getSceneLayout"), i = X(a);
+      if (!i) return;
+      const { shiftX: o, shiftY: d } = Y(e, i);
+      n && console.info("[PooderEditor] detectDieline alignment", {
+        frame: i,
+        shiftX: o,
+        shiftY: d,
+        snapshotCount: t.length,
+        baseBounds: e.baseBounds,
+        rawBounds: e.rawBounds,
+        imageWidth: e.imageWidth,
+        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 - o, H = m.centerY - d, P = D(
+          (l - i.left) / Math.max(1, i.width)
+        ), L = D(
+          (H - i.top) / Math.max(1, i.height)
+        );
+        await s.executeCommand("updateImage", m.id, {
+          scale: g,
+          left: P,
+          top: L
+        });
+      }
+    };
+    v({
+      importConfig: C,
+      exportConfig: x,
+      getImages: S,
+      generateCutImage: A,
+      addImage: F,
+      upsertImage: I,
+      updateImage: R,
+      clearImages: z,
       detectDieline: async (e) => {
-        const n = await a.executeCommand("detectEdge", e, {
+        const t = c.getService("CanvasService"), n = y(t), a = await s.executeCommand("detectEdge", e, {
           expand: 10,
           // 安全距离（像素）
           smoothing: !0,
@@ -82,70 +140,94 @@ const ae = /* @__PURE__ */ T({
           simplifyTolerance: 2
           // 平滑度容差，值越大越圆润
         });
-        if (n) {
-          const { pathData: c, width: i, height: s, rawBounds: r, imageWidth: p, imageHeight: x } = n;
-          if (o.update("dieline.shape", "custom"), o.update("dieline.pathData", c), o.update("dieline.width", i), o.update("dieline.height", s), o.update("dieline.offset", 0), r && p && x) {
-            const m = t.getService("CanvasService"), C = (o.get("image.items") || []).find((g) => g.url === e);
-            if (m && C) {
-              const g = await a.executeCommand("getGeometry");
-              if (g) {
-                const l = g.width / r.width, z = p / 2, A = x / 2, H = r.x + r.width / 2, R = r.y + r.height / 2, M = H - z, X = R - A, Y = M * l, P = X * l, j = m.canvas.width, G = m.canvas.height, N = 0.5 - Y / j, V = 0.5 - P / G;
-                await a.executeCommand("updateImage", C.id, {
-                  scale: l,
-                  left: N,
-                  top: V
-                });
-              }
-            }
+        if (a) {
+          _(a);
+          const o = (r.get("image.items") || []).find((d) => d.url === e);
+          if (o?.id) {
+            const d = n.filter(
+              (m) => m.id === o.id
+            );
+            await N(a, d);
           }
-          return c;
+          return a.pathData;
         }
         return null;
       },
-      activateTool: (e) => u.activate(e),
-      on: (e, n) => t.eventBus.on(e, n),
-      off: (e, n) => t.eventBus.off(e, n),
-      emit: (e, n) => t.eventBus.emit(e, n),
-      executeCommand: (e, ...n) => a.executeCommand(e, ...n),
-      getConfig: (e) => o.get(e),
-      updateConfig: (e, n) => o.update(e, n),
+      detectDielineFromFrame: async (e) => {
+        const t = e?.detect?.debug === !0, n = c.getService("CanvasService"), a = y(n), { url: i } = await s.executeCommand("exportImageFrameUrl", {
+          multiplier: 2,
+          format: "png"
+        });
+        try {
+          const o = await s.executeCommand("detectEdge", i, {
+            expand: e?.detect?.expand ?? 30,
+            smoothing: e?.detect?.smoothing ?? !0,
+            simplifyTolerance: e?.detect?.simplifyTolerance ?? 2,
+            debug: t
+          });
+          return o ? (e?.commit === !1 || (_(o), await N(o, a, t)), o) : null;
+        } finally {
+          i && URL.revokeObjectURL(i);
+        }
+      },
+      uploadAndDetectEdge: async (e, t) => {
+        const n = c.getService("CanvasService"), a = await F(e), i = y(n).filter(
+          (d) => d.id === a
+        ), o = await s.executeCommand("detectEdge", e, {
+          expand: t?.expand ?? 10,
+          smoothing: t?.smoothing ?? !0,
+          simplifyTolerance: t?.simplifyTolerance ?? 2
+        });
+        return o ? (_(o), await N(o, i), { imageId: a, url: e, pathData: o.pathData }) : null;
+      },
+      activateTool: async (e) => await h.switchTool(e),
+      deactivateTool: async () => await h.deactivate(),
+      on: (e, t) => c.eventBus.on(e, t),
+      off: (e, t) => c.eventBus.off(e, t),
+      emit: (e, t) => c.eventBus.emit(e, t),
+      executeCommand: (e, ...t) => s.executeCommand(e, ...t),
+      getConfig: (e) => r.get(e),
+      updateConfig: (e, t) => r.update(e, t),
       services: {
-        workbench: u,
-        command: a,
-        config: o
+        workbench: h,
+        command: s,
+        config: r
       }
     });
-    const O = (e) => {
-      const n = new J(e, {
-        eventBus: t.eventBus
+    const W = (e) => {
+      const t = new q(e, {
+        eventBus: c.eventBus
       });
-      t.registerService(n, "CanvasService"), [
+      c.registerService(t, "CanvasService"), [
         new K(),
         new Q(),
-        // new FilmTool(),
-        // new WhiteInkTool(),
         new Z(),
         new ee(),
         new te(),
-        new ne()
-      ].forEach((i) => {
-        t.extensionManager.register(i);
+        // new FilmTool(),
+        new ne(),
+        new ae(),
+        new ie(),
+        new oe(),
+        new ce()
+      ].forEach((a) => {
+        c.extensionManager.register(a);
       });
-    }, W = (e, n) => {
-      const c = t.getService("CanvasService");
-      c && c.canvas.setDimensions({ width: e, height: n });
+    }, j = (e, t) => {
+      const n = c.getService("CanvasService");
+      n && n.resize(e, t);
     };
-    return k(() => {
-      const e = t.getService("CanvasService");
-      e && e.dispose(), w.dispose(), t.extensionManager.destroy();
-    }), (e, n) => (D(), B("div", ce, [
-      $(oe, {
-        onCanvasReady: O,
-        onResize: W
+    return B(() => {
+      const e = c.getService("CanvasService");
+      e && e.dispose(), b.dispose(), c.extensionManager.destroy();
+    }), (e, t) => (O(), E("div", de, [
+      J(re, {
+        onCanvasReady: W,
+        onResize: j
       })
     ]));
   }
-}), fe = /* @__PURE__ */ E(ie, [["__scopeId", "data-v-51bac65f"]]);
+}), we = /* @__PURE__ */ k(ue, [["__scopeId", "data-v-74b112ea"]]);
 export {
-  fe as PooderEditor
+  we as PooderEditor
 };

package/dist/index.umd.js

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

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

@@ -1,14 +1,53 @@
 import { CommandService, ConfigurationService, WorkbenchService } from '../../core/src/index.ts';
+interface DetectBounds {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+interface DetectEdgeResult {
+    pathData: string;
+    rawBounds?: DetectBounds;
+    baseBounds?: DetectBounds;
+    imageWidth?: number;
+    imageHeight?: number;
+}
 declare const _default: import('vue').DefineComponent<{}, {
     importConfig: (config: Record<string, any>) => void;
     exportConfig: () => Record<string, any>;
     getImages: () => never[];
     generateCutImage: () => Promise<any>;
     addImage: (url: string, options?: any) => Promise<any>;
+    upsertImage: (url: string, options?: {
+        id?: string;
+        mode?: "auto" | "replace" | "add";
+        createIfMissing?: boolean;
+        addOptions?: any;
+        fitOnAdd?: boolean;
+    }) => Promise<any>;
     updateImage: (id: string, options?: any) => Promise<any>;
     clearImages: () => Promise<any>;
-    detectDieline: (url: string) => Promise<any>;
-    activateTool: (id: string) => void;
+    detectDieline: (url: string) => Promise<string | null>;
+    detectDielineFromFrame: (options?: {
+        detect?: {
+            expand?: number;
+            smoothing?: boolean;
+            simplifyTolerance?: number;
+            debug?: boolean;
+        };
+        commit?: boolean;
+    }) => Promise<DetectEdgeResult | null>;
+    uploadAndDetectEdge: (url: string, options?: {
+        expand?: number;
+        smoothing?: boolean;
+        simplifyTolerance?: number;
+    }) => Promise<{
+        imageId: any;
+        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>;
     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-ba73979d]{flex:1;width:100%;height:100%;min-height:650px;min-width:650px;overflow:hidden;background:#f5f5f5;position:relative}canvas[data-v-ba73979d]{display:block}.pooder-editor[data-v-51bac65f]{display:flex;width:100%;height:100%;overflow:hidden}
+.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-74b112ea]{display:flex;width:100%;height:100%;overflow:hidden}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pooder/vue",
-  "version": "4.1.2",
+  "version": "4.2.0",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -19,8 +19,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@pooder/kit": "4.3.1",
-    "@pooder/core": "2.0.0"
+    "@pooder/core": "2.1.0",
+    "@pooder/kit": "5.0.0"
   },
   "peerDependencies": {
     "vue": "^3.0.0"