@pooder/vue 3.2.0 → 3.3.0

package/dist/index.es.js

@@ -1,87 +1,108 @@
-import { defineComponent as f, ref as p, onMounted as h, onUnmounted as _, createElementBlock as C, openBlock as S, createElementVNode as y, provide as k, createVNode as T } from "vue";
-import { Pooder as z } from "@pooder/core";
+import { defineComponent as C, ref as _, onMounted as b, onUnmounted as w, createElementBlock as x, openBlock as I, createElementVNode as H, provide as M, createVNode as B } from "vue";
+import { Pooder as D } from "@pooder/core";
 export * from "@pooder/core";
-import { CanvasService as E, BackgroundTool as R, MirrorTool as M, DielineTool as b, RulerTool as B, ImageTool as O, HoleTool as P } from "@pooder/kit";
+import { CanvasService as P, BackgroundTool as W, ImageTool as N, MirrorTool as V, DielineTool as G, RulerTool as U, HoleTool as $ } from "@pooder/kit";
 export * from "@pooder/kit";
-const A = /* @__PURE__ */ f({
+const j = /* @__PURE__ */ C({
   __name: "CanvasArea",
   emits: ["canvas-ready", "resize"],
-  setup(s, { emit: r }) {
-    const e = r, n = p(null), t = p(null);
-    let c = null;
-    return h(() => {
-      if (n.value && t.value) {
-        const { clientWidth: i, clientHeight: v } = n.value;
-        t.value.width = i, t.value.height = v, e("canvas-ready", t.value), c = new ResizeObserver((l) => {
-          for (const u of l) {
-            const { width: g, height: d } = u.contentRect;
-            e("resize", g, d);
+  setup(d, { emit: m }) {
+    const s = m, e = _(null), a = _(null);
+    let n = null;
+    return b(() => {
+      if (e.value && a.value) {
+        const { clientWidth: v, clientHeight: g } = e.value;
+        a.value.width = v, a.value.height = g, s("canvas-ready", a.value), n = new ResizeObserver((l) => {
+          for (const f of l) {
+            const { width: u, height: p } = f.contentRect;
+            s("resize", u, p);
           }
-        }), c.observe(n.value);
+        }), n.observe(e.value);
       }
-    }), _(() => {
-      c && c.disconnect();
-    }), (i, v) => (S(), C("div", {
+    }), w(() => {
+      n && n.disconnect();
+    }), (v, g) => (I(), x("div", {
       ref_key: "container",
-      ref: n,
+      ref: e,
       class: "pooder-canvas-area"
     }, [
-      y("canvas", {
+      H("canvas", {
         ref_key: "canvas",
-        ref: t
+        ref: a
       }, null, 512)
     ], 512));
   }
-}), x = (s, r) => {
-  const e = s.__vccOpts || s;
-  for (const [n, t] of r)
-    e[n] = t;
-  return e;
-}, D = /* @__PURE__ */ x(A, [["__scopeId", "data-v-dc60e8d6"]]), H = { class: "pooder-editor" }, N = /* @__PURE__ */ f({
+}), S = (d, m) => {
+  const s = d.__vccOpts || d;
+  for (const [e, a] of m)
+    s[e] = a;
+  return s;
+}, q = /* @__PURE__ */ S(j, [["__scopeId", "data-v-dc60e8d6"]]), F = { class: "pooder-editor" }, J = /* @__PURE__ */ C({
   __name: "PooderEditor",
-  setup(s, { expose: r }) {
-    const e = new z();
-    k("pooder", e), e.getService("CanvasService");
-    const n = e.getService("CommandService"), t = e.getService("ConfigurationService");
-    r({
-      importConfig: (o) => {
-        t.import(o);
+  emits: ["image-change"],
+  setup(d, { expose: m, emit: s }) {
+    const e = new D();
+    M("pooder", e);
+    const a = e.getService("CommandService"), n = e.getService("ConfigurationService"), v = s, g = n.onAnyChange((t) => {
+      t.key === "image.items" && v("image-change", t.value);
+    });
+    m({
+      importConfig: (t) => {
+        n.import(t);
+      },
+      exportConfig: () => n.export(),
+      getImages: () => n.get("image.items", []),
+      generateCutImage: async () => await a.executeCommand("exportCutImage"),
+      addImage: async (t, o) => {
+        const r = await a.executeCommand("addImage", t, o), c = await a.executeCommand("getGeometry"), i = e.getService("CanvasService");
+        if (c && i) {
+          const k = i.canvas.width, O = i.canvas.height, h = (n.get("dieline.offset") || 0) * c.scale, z = c.width + 2 * h, A = c.height + 2 * h, E = c.x / k, R = c.y / O;
+          await a.executeCommand("fitImageToArea", r, {
+            width: z,
+            height: A,
+            left: E,
+            top: R
+          });
+        } else i && await a.executeCommand("fitImageToArea", r, {
+          width: i.canvas.width,
+          height: i.canvas.height,
+          left: 0.5,
+          top: 0.5
+        });
+        return r;
       },
-      exportConfig: () => t.export(),
-      generateCutImage: async () => await n.executeCommand("exportCutImage"),
-      addImage: async (o, a) => await n.executeCommand("addImage", o, a),
-      updateImage: async (o, a) => await n.executeCommand("updateImage", o, a),
-      clearImages: async () => await n.executeCommand("clearImages")
+      updateImage: async (t, o) => await a.executeCommand("updateImage", t, o),
+      clearImages: async () => await a.executeCommand("clearImages")
     });
-    const d = (o) => {
-      const a = new E(o);
-      e.registerService(a, "CanvasService"), [
-        new R(),
-        new M(),
+    const y = (t) => {
+      const o = new P(t);
+      e.registerService(o, "CanvasService"), [
+        new W(),
+        new N(),
         // new FilmTool(),
         // new WhiteInkTool(),
-        new b(),
-        new B(),
-        new O(),
-        new P()
-      ].forEach((I) => {
-        e.extensionManager.register(I);
+        new V(),
+        new G(),
+        new U(),
+        new $()
+      ].forEach((c) => {
+        e.extensionManager.register(c);
       });
-    }, w = (o, a) => {
-      const m = e.getService("CanvasService");
-      m && m.canvas.setDimensions({ width: o, height: a });
+    }, T = (t, o) => {
+      const r = e.getService("CanvasService");
+      r && r.canvas.setDimensions({ width: t, height: o });
     };
-    return _(() => {
-      const o = e.getService("CanvasService");
-      o && o.dispose(), e.extensionManager.destroy();
-    }), (o, a) => (S(), C("div", H, [
-      T(D, {
-        onCanvasReady: d,
-        onResize: w
+    return w(() => {
+      const t = e.getService("CanvasService");
+      t && t.dispose(), g.dispose(), e.extensionManager.destroy();
+    }), (t, o) => (I(), x("div", F, [
+      B(q, {
+        onCanvasReady: y,
+        onResize: T
       })
     ]));
   }
-}), $ = /* @__PURE__ */ x(N, [["__scopeId", "data-v-903d7337"]]);
+}), te = /* @__PURE__ */ S(J, [["__scopeId", "data-v-56106d22"]]);
 export {
-  $ as PooderEditor
+  te as PooderEditor
 };

package/dist/index.umd.js

@@ -1 +1 @@
-(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@pooder/core"),require("@pooder/kit")):typeof define=="function"&&define.amd?define(["exports","vue","@pooder/core","@pooder/kit"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.PooderVue={},t.Vue,t.PooderCore,t.PooderKit))})(this,(function(t,e,m,s){"use strict";const S=e.defineComponent({__name:"CanvasArea",emits:["canvas-ready","resize"],setup(n,{emit:d}){const o=d,a=e.ref(null),c=e.ref(null);let l=null;return e.onMounted(()=>{if(a.value&&c.value){const{clientWidth:u,clientHeight:f}=a.value;c.value.width=u,c.value.height=f,o("canvas-ready",c.value),l=new ResizeObserver(_=>{for(const y of _){const{width:C,height:p}=y.contentRect;o("resize",C,p)}}),l.observe(a.value)}}),e.onUnmounted(()=>{l&&l.disconnect()}),(u,f)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"container",ref:a,class:"pooder-canvas-area"},[e.createElementVNode("canvas",{ref_key:"canvas",ref:c},null,512)],512))}}),g=(n,d)=>{const o=n.__vccOpts||n;for(const[a,c]of d)o[a]=c;return o},h=g(S,[["__scopeId","data-v-dc60e8d6"]]),w={class:"pooder-editor"},I=g(e.defineComponent({__name:"PooderEditor",setup(n,{expose:d}){const o=new m.Pooder;e.provide("pooder",o),o.getService("CanvasService");const a=o.getService("CommandService"),c=o.getService("ConfigurationService");d({importConfig:r=>{c.import(r)},exportConfig:()=>c.export(),generateCutImage:async()=>await a.executeCommand("exportCutImage"),addImage:async(r,i)=>await a.executeCommand("addImage",r,i),updateImage:async(r,i)=>await a.executeCommand("updateImage",r,i),clearImages:async()=>await a.executeCommand("clearImages")});const p=r=>{const i=new s.CanvasService(r);o.registerService(i,"CanvasService"),[new s.BackgroundTool,new s.MirrorTool,new s.DielineTool,new s.RulerTool,new s.ImageTool,new s.HoleTool].forEach(O=>{o.extensionManager.register(O)})},x=(r,i)=>{const v=o.getService("CanvasService");v&&v.canvas.setDimensions({width:r,height:i})};return e.onUnmounted(()=>{const r=o.getService("CanvasService");r&&r.dispose(),o.extensionManager.destroy()}),(r,i)=>(e.openBlock(),e.createElementBlock("div",w,[e.createVNode(h,{onCanvasReady:p,onResize:x})]))}}),[["__scopeId","data-v-903d7337"]]);t.PooderEditor=I,Object.keys(m).forEach(n=>{n!=="default"&&!Object.prototype.hasOwnProperty.call(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:()=>m[n]})}),Object.keys(s).forEach(n=>{n!=="default"&&!Object.prototype.hasOwnProperty.call(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:()=>s[n]})}),Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})}));
+(function(c,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@pooder/core"),require("@pooder/kit")):typeof define=="function"&&define.amd?define(["exports","vue","@pooder/core","@pooder/kit"],e):(c=typeof globalThis<"u"?globalThis:c||self,e(c.PooderVue={},c.Vue,c.PooderCore,c.PooderKit))})(this,(function(c,e,p,s){"use strict";const I=e.defineComponent({__name:"CanvasArea",emits:["canvas-ready","resize"],setup(a,{emit:l}){const m=l,t=e.ref(null),o=e.ref(null);let r=null;return e.onMounted(()=>{if(t.value&&o.value){const{clientWidth:u,clientHeight:v}=t.value;o.value.width=u,o.value.height=v,m("canvas-ready",o.value),r=new ResizeObserver(_=>{for(const y of _){const{width:C,height:w}=y.contentRect;m("resize",C,w)}}),r.observe(t.value)}}),e.onUnmounted(()=>{r&&r.disconnect()}),(u,v)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"container",ref:t,class:"pooder-canvas-area"},[e.createElementVNode("canvas",{ref_key:"canvas",ref:o},null,512)],512))}}),h=(a,l)=>{const m=a.__vccOpts||a;for(const[t,o]of l)m[t]=o;return m},x=h(I,[["__scopeId","data-v-dc60e8d6"]]),O={class:"pooder-editor"},b=h(e.defineComponent({__name:"PooderEditor",emits:["image-change"],setup(a,{expose:l,emit:m}){const t=new p.Pooder;e.provide("pooder",t);const o=t.getService("CommandService"),r=t.getService("ConfigurationService"),u=m,v=r.onAnyChange(n=>{n.key==="image.items"&&u("image-change",n.value)});l({importConfig:n=>{r.import(n)},exportConfig:()=>r.export(),getImages:()=>r.get("image.items",[]),generateCutImage:async()=>await o.executeCommand("exportCutImage"),addImage:async(n,i)=>{const f=await o.executeCommand("addImage",n,i),d=await o.executeCommand("getGeometry"),g=t.getService("CanvasService");if(d&&g){const E=g.canvas.width,j=g.canvas.height,S=(r.get("dieline.offset")||0)*d.scale,z=d.width+2*S,A=d.height+2*S,B=d.x/E,M=d.y/j;await o.executeCommand("fitImageToArea",f,{width:z,height:A,left:B,top:M})}else g&&await o.executeCommand("fitImageToArea",f,{width:g.canvas.width,height:g.canvas.height,left:.5,top:.5});return f},updateImage:async(n,i)=>await o.executeCommand("updateImage",n,i),clearImages:async()=>await o.executeCommand("clearImages")});const P=n=>{const i=new s.CanvasService(n);t.registerService(i,"CanvasService"),[new s.BackgroundTool,new s.ImageTool,new s.MirrorTool,new s.DielineTool,new s.RulerTool,new s.HoleTool].forEach(d=>{t.extensionManager.register(d)})},T=(n,i)=>{const f=t.getService("CanvasService");f&&f.canvas.setDimensions({width:n,height:i})};return e.onUnmounted(()=>{const n=t.getService("CanvasService");n&&n.dispose(),v.dispose(),t.extensionManager.destroy()}),(n,i)=>(e.openBlock(),e.createElementBlock("div",O,[e.createVNode(x,{onCanvasReady:P,onResize:T})]))}}),[["__scopeId","data-v-56106d22"]]);c.PooderEditor=b,Object.keys(p).forEach(a=>{a!=="default"&&!Object.prototype.hasOwnProperty.call(c,a)&&Object.defineProperty(c,a,{enumerable:!0,get:()=>p[a]})}),Object.keys(s).forEach(a=>{a!=="default"&&!Object.prototype.hasOwnProperty.call(c,a)&&Object.defineProperty(c,a,{enumerable:!0,get:()=>s[a]})}),Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})}));

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

@@ -1,9 +1,14 @@
 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>;
     updateImage: (id: string, options?: any) => Promise<any>;
     clearImages: () => Promise<any>;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "image-change": (images: any[]) => any;
+}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{
+    "onImage-change"?: ((images: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
 export default _default;

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-903d7337]{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-56106d22]{display:flex;width:100%;height:100%;overflow:hidden}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pooder/vue",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -19,7 +19,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@pooder/kit": "3.2.0",
+    "@pooder/kit": "3.4.0",
     "@pooder/core": "1.2.0"
   },
   "peerDependencies": {