@pooder/vue 4.2.3 → 4.2.4

package/dist/index.es.js

@@ -1,15 +1,15 @@
-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 E, ref as T, onMounted as V, onUnmounted as M, createElementBlock as B, openBlock as O, createElementVNode as G, provide as J, createVNode as $ } from "vue";
+import { Pooder as q } 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 K, BackgroundTool as Q, SizeTool as Z, SceneLayoutService as ee, SceneVisibilityService as te, ImageTool as ne, WhiteInkTool as ae, MirrorTool as ie, DielineTool as oe, RulerTool as ce, FeatureTool as re } from "@pooder/kit";
 export * from "@pooder/kit";
-const re = /* @__PURE__ */ T({
+const se = /* @__PURE__ */ E({
   __name: "CanvasArea",
   emits: ["canvas-ready", "resize"],
   setup(p, { emit: v }) {
-    const u = v, o = M(null), r = M(null);
+    const u = v, o = T(null), r = T(null);
     let s = null;
-    return U(() => {
+    return V(() => {
       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) => {
@@ -19,14 +19,14 @@ const re = /* @__PURE__ */ T({
           }
         }), s.observe(o.value);
       }
-    }), E(() => {
+    }), M(() => {
       s && s.disconnect();
     }), (h, w) => (O(), B("div", {
       ref_key: "container",
       ref: o,
       class: "pooder-canvas-area"
     }, [
-      V("canvas", {
+      G("canvas", {
         ref_key: "canvas",
         ref: r
       }, null, 512)
@@ -37,12 +37,12 @@ const re = /* @__PURE__ */ T({
   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({
+}, me = /* @__PURE__ */ k(se, [["__scopeId", "data-v-dc60e8d6"]]), de = { class: "pooder-editor" }, ue = "image.user", ge = /* @__PURE__ */ E({
   __name: "PooderEditor",
   emits: ["image-change"],
   setup(p, { expose: v, emit: u }) {
-    const o = new $();
-    G("pooder", o);
+    const o = new q();
+    J("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);
     }), b = (e) => {
@@ -64,14 +64,13 @@ const re = /* @__PURE__ */ T({
     }, N = async (e, t) => await r.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, {
       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, R = async (e, t) => await r.executeCommand("updateImage", e, t), z = async () => await r.executeCommand("clearImages"), X = async (e, t) => await r.executeCommand("focusImage", e, t), D = (e) => Math.max(-1, Math.min(2, e)), Y = (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);
@@ -80,14 +79,14 @@ const re = /* @__PURE__ */ T({
       if (!e) return [];
       const t = e.canvas.getObjects(), n = [];
       for (const a of t) {
-        if (a?.data?.layerId !== me) continue;
+        if (a?.data?.layerId !== ue) 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({
+        const c = a.getCenterPoint ? a.getCenterPoint() : null, m = Number(c?.x ?? a.left), d = Number(c?.y ?? a.top), f = Number(a.scaleX), g = Number(a.width), l = Number(a.height);
+        !Number.isFinite(m) || !Number.isFinite(d) || !Number.isFinite(f) || !Number.isFinite(g) || !Number.isFinite(l) || g <= 0 || l <= 0 || n.push({
           id: i,
-          centerX: d,
-          centerY: m,
+          centerX: m,
+          centerY: d,
           objectScale: f,
           sourceWidth: g,
           sourceHeight: l
@@ -96,43 +95,43 @@ const re = /* @__PURE__ */ T({
       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) => {
+    }, W = (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 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 c = t.width / n.width, m = t.height / n.height, d = n.x + n.width / 2, f = n.y + n.height / 2, g = a / 2, l = i / 2;
       return {
-        shiftX: (m - g) * c,
-        shiftY: (f - l) * d
+        shiftX: (d - g) * c,
+        shiftY: (f - l) * m
       };
     }, I = async (e, t, n = !1) => {
       if (!t.length) return;
-      const a = await r.executeCommand("getSceneLayout"), i = X(a);
+      const a = await r.executeCommand("getSceneLayout"), i = Y(a);
       if (!i) return;
-      const { shiftX: c, shiftY: d } = Y(e, i);
+      const { shiftX: c, shiftY: m } = W(e, i);
       n && console.info("[PooderEditor] detectDieline alignment", {
         frame: i,
         shiftX: c,
-        shiftY: d,
+        shiftY: m,
         snapshotCount: t.length,
         baseBounds: e.baseBounds,
         rawBounds: e.rawBounds,
         imageWidth: e.imageWidth,
         imageHeight: e.imageHeight
       });
-      for (const m of t) {
+      for (const d 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(
+          i.width / Math.max(1, d.sourceWidth),
+          i.height / Math.max(1, d.sourceHeight)
+        ), g = Math.max(0.05, d.objectScale / f), l = d.centerX - c, H = d.centerY - m, L = D(
           (l - i.left) / Math.max(1, i.width)
-        ), L = D(
-          (P - i.top) / Math.max(1, i.height)
+        ), U = D(
+          (H - i.top) / Math.max(1, i.height)
         );
-        await r.executeCommand("updateImage", m.id, {
+        await r.executeCommand("updateImage", d.id, {
           scale: g,
-          left: H,
-          top: L
+          left: L,
+          top: U
         });
       }
     };
@@ -145,6 +144,7 @@ const re = /* @__PURE__ */ T({
       upsertImage: N,
       updateImage: R,
       clearImages: z,
+      focusImage: X,
       detectDieline: async (e) => {
         const t = o.getService("CanvasService"), n = y(t), a = await r.executeCommand("detectEdge", e, {
           expand: 10,
@@ -156,12 +156,12 @@ const re = /* @__PURE__ */ T({
         });
         if (a) {
           _(a);
-          const c = (s.get("image.items") || []).find((d) => d.url === e);
+          const c = (s.get("image.items") || []).find((m) => m.url === e);
           if (c?.id) {
-            const d = n.filter(
-              (m) => m.id === c.id
+            const m = n.filter(
+              (d) => d.id === c.id
             );
-            await I(a, d);
+            await I(a, m);
           }
           return a.pathData;
         }
@@ -186,7 +186,7 @@ const re = /* @__PURE__ */ T({
       },
       uploadAndDetectEdge: async (e, t) => {
         const n = o.getService("CanvasService"), a = await F(e), i = y(n).filter(
-          (d) => d.id === a
+          (m) => m.id === a
         ), c = await r.executeCommand("detectEdge", e, {
           expand: t?.expand ?? 10,
           smoothing: t?.smoothing ?? !0,
@@ -208,40 +208,40 @@ const re = /* @__PURE__ */ T({
         config: s
       }
     });
-    const W = (e) => {
-      const t = new q(e, {
+    const j = (e) => {
+      const t = new K(e, {
         eventBus: o.eventBus
       });
       o.registerService(t, "CanvasService"), [
-        new K(),
         new Q(),
         new Z(),
         new ee(),
         new te(),
-        // new FilmTool(),
         new ne(),
+        // new FilmTool(),
         new ae(),
         new ie(),
         new oe(),
-        new ce()
+        new ce(),
+        new re()
       ].forEach((a) => {
         o.extensionManager.register(a);
       });
-    }, j = (e, t) => {
+    }, P = (e, t) => {
       const n = o.getService("CanvasService");
       n && n.resize(e, t);
     };
-    return E(() => {
+    return M(() => {
       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
+      $(me, {
+        onCanvasReady: j,
+        onResize: P
       })
     ]));
   }
-}), we = /* @__PURE__ */ k(ue, [["__scopeId", "data-v-234847f9"]]);
+}), Ce = /* @__PURE__ */ k(ge, [["__scopeId", "data-v-522d075c"]]);
 export {
-  we as PooderEditor
+  Ce 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(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),r=s.ref(null);let d=null;return s.onMounted(()=>{if(i.value&&r.value){const{clientWidth:b,clientHeight:C}=i.value;r.value.width=b,r.value.height=C,h("canvas-ready",r.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:r},null,512)],512))}}),E=(m,y)=>{const h=m.__vccOpts||m;for(const[i,r]of y)h[i]=r;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 r=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 r.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 r.executeCommand("upsertImage",e,{id:t?.id,mode:t?.mode,addOptions:t?.addOptions,fitOnAdd:t?.fitOnAdd}),B=async(e,t)=>(await T(e,{mode:"add",addOptions:t,fitOnAdd:!0})).id,Y=async(e,t)=>await r.executeCommand("updateImage",e,t),W=async()=>await r.executeCommand("clearImages"),H=async(e,t)=>await r.executeCommand("focusImage",e,t),M=e=>Math.max(-1,Math.min(2,e)),L=e=>{const t=e?.cutRect;if(!t)return null;const n=Number(t.width),o=Number(t.height),a=Number(t.left),c=Number(t.top);return!Number.isFinite(n)||!Number.isFinite(o)||!Number.isFinite(a)||!Number.isFinite(c)||n<=0||o<=0?null:{left:a,top:c,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 c=o.getCenterPoint?o.getCenterPoint():null,l=Number(c?.x??o.left),f=Number(c?.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)},U=(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 c=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)*c,shiftY:(w-v)*l}},D=async(e,t,n=!1)=>{if(!t.length)return;const o=await r.executeCommand("getSceneLayout"),a=L(o);if(!a)return;const{shiftX:c,shiftY:l}=U(e,a);n&&console.info("[PooderEditor] detectDieline alignment",{frame:a,shiftX:c,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-c,G=f.centerY-l,J=M((v-a.left)/Math.max(1,a.width)),K=M((G-a.top)/Math.max(1,a.height));await r.executeCommand("updateImage",f.id,{scale:p,left:J,top:K})}};y({importConfig:_,exportConfig:I,getImages:N,generateCutImage:X,addImage:B,upsertImage:T,updateImage:Y,clearImages:W,focusImage:H,detectDieline:async e=>{const t=i.getService("CanvasService"),n=F(t),o=await r.executeCommand("detectEdge",e,{expand:10,smoothing:!0,simplifyTolerance:2});if(o){O(o);const c=(d.get("image.items")||[]).find(l=>l.url===e);if(c?.id){const l=n.filter(f=>f.id===c.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 r.executeCommand("exportImageFrameUrl",{multiplier:2,format:"png"});try{const c=await r.executeCommand("detectEdge",a,{expand:e?.detect?.expand??30,smoothing:e?.detect?.smoothing??!0,simplifyTolerance:e?.detect?.simplifyTolerance??2,debug:t});return c?(e?.commit===!1||(O(c),await D(c,o,t)),c):null}finally{a&&URL.revokeObjectURL(a)}},uploadAndDetectEdge:async(e,t)=>{const n=i.getService("CanvasService"),o=await B(e),a=F(n).filter(l=>l.id===o),c=await r.executeCommand("detectEdge",e,{expand:t?.expand??10,smoothing:t?.smoothing??!0,simplifyTolerance:t?.simplifyTolerance??2});return c?(O(c),await D(c,a),{imageId:o,url:e,pathData:c.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)=>r.executeCommand(e,...t),getConfig:e=>d.get(e),updateConfig:(e,t)=>d.update(e,t),services:{workbench:b,command:r,config:d}});const V=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)})},q=(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:V,onResize:q})]))}}),[["__scopeId","data-v-522d075c"]]);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

@@ -22,13 +22,15 @@ 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>;
+    focusImage: (id: string | null, options?: {
+        syncCanvasSelection?: boolean;
+    }) => Promise<any>;
     detectDieline: (url: string) => Promise<string | null>;
     detectDielineFromFrame: (options?: {
         detect?: {

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-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-522d075c]{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.4",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -20,7 +20,7 @@
   },
   "dependencies": {
     "@pooder/core": "2.1.0",
-    "@pooder/kit": "5.0.3"
+    "@pooder/kit": "5.0.4"
   },
   "peerDependencies": {
     "vue": "^3.0.0"