@pooder/vue 3.1.0 → 3.2.0

package/dist/index.es.js

@@ -1,85 +1,87 @@
-import { defineComponent as g, ref as u, onMounted as w, onUnmounted as f, createElementBlock as _, openBlock as C, createElementVNode as h, provide as y, createVNode as I } from "vue";
-import { Pooder as k } from "@pooder/core";
+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";
 export * from "@pooder/core";
-import { CanvasService as T, BackgroundTool as z, RulerTool as E, MirrorTool as R, DielineTool as b, ImageTool as M, HoleTool as U } from "@pooder/kit";
+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";
 export * from "@pooder/kit";
-const B = /* @__PURE__ */ g({
+const A = /* @__PURE__ */ f({
   __name: "CanvasArea",
   emits: ["canvas-ready", "resize"],
-  setup(c, { emit: r }) {
-    const e = r, t = u(null), n = u(null);
-    let a = null;
-    return w(() => {
-      if (t.value && n.value) {
-        const { clientWidth: i, clientHeight: v } = t.value;
-        n.value.width = i, n.value.height = v, e("canvas-ready", n.value), a = new ResizeObserver((p) => {
-          for (const d of p) {
-            const { width: m, height: o } = d.contentRect;
-            e("resize", m, o);
+  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);
           }
-        }), a.observe(t.value);
+        }), c.observe(n.value);
       }
-    }), f(() => {
-      a && a.disconnect();
-    }), (i, v) => (C(), _("div", {
+    }), _(() => {
+      c && c.disconnect();
+    }), (i, v) => (S(), C("div", {
       ref_key: "container",
-      ref: t,
+      ref: n,
       class: "pooder-canvas-area"
     }, [
-      h("canvas", {
+      y("canvas", {
         ref_key: "canvas",
-        ref: n
+        ref: t
       }, null, 512)
     ], 512));
   }
-}), S = (c, r) => {
-  const e = c.__vccOpts || c;
-  for (const [t, n] of r)
-    e[t] = n;
+}), x = (s, r) => {
+  const e = s.__vccOpts || s;
+  for (const [n, t] of r)
+    e[n] = t;
   return e;
-}, O = /* @__PURE__ */ S(B, [["__scopeId", "data-v-dc60e8d6"]]), P = { class: "pooder-editor" }, A = /* @__PURE__ */ g({
+}, D = /* @__PURE__ */ x(A, [["__scopeId", "data-v-dc60e8d6"]]), H = { class: "pooder-editor" }, N = /* @__PURE__ */ f({
   __name: "PooderEditor",
-  setup(c, { expose: r }) {
-    const e = new k();
-    y("pooder", e), e.getService("CanvasService");
-    const t = e.getService("CommandService"), n = e.getService("ConfigurationService");
+  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) => {
-        n.import(o);
+        t.import(o);
       },
-      exportConfig: () => n.export(),
-      generateCutImage: async () => await t.executeCommand("exportCutImage"),
-      setUserImage: async (o) => await t.executeCommand("setUserImage", o, 1)
+      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")
     });
     const d = (o) => {
-      const s = new T(o);
-      e.registerService(s, "CanvasService"), [
-        new z(),
-        new E(),
+      const a = new E(o);
+      e.registerService(a, "CanvasService"), [
+        new R(),
+        new M(),
         // new FilmTool(),
         // new WhiteInkTool(),
-        new R(),
         new b(),
-        new M(),
-        new U()
-      ].forEach((x) => {
-        e.extensionManager.register(x);
+        new B(),
+        new O(),
+        new P()
+      ].forEach((I) => {
+        e.extensionManager.register(I);
       });
-    }, m = (o, s) => {
-      const l = e.getService("CanvasService");
-      l && l.canvas.setDimensions({ width: o, height: s });
+    }, w = (o, a) => {
+      const m = e.getService("CanvasService");
+      m && m.canvas.setDimensions({ width: o, height: a });
     };
-    return f(() => {
+    return _(() => {
       const o = e.getService("CanvasService");
       o && o.dispose(), e.extensionManager.destroy();
-    }), (o, s) => (C(), _("div", P, [
-      I(O, {
+    }), (o, a) => (S(), C("div", H, [
+      T(D, {
         onCanvasReady: d,
-        onResize: m
+        onResize: w
       })
     ]));
   }
-}), V = /* @__PURE__ */ S(A, [["__scopeId", "data-v-9b83ac88"]]);
+}), $ = /* @__PURE__ */ x(N, [["__scopeId", "data-v-903d7337"]]);
 export {
-  V as PooderEditor
+  $ 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,l,a){"use strict";const C=e.defineComponent({__name:"CanvasArea",emits:["canvas-ready","resize"],setup(n,{emit:i}){const o=i,s=e.ref(null),c=e.ref(null);let d=null;return e.onMounted(()=>{if(s.value&&c.value){const{clientWidth:p,clientHeight:v}=s.value;c.value.width=p,c.value.height=v,o("canvas-ready",c.value),d=new ResizeObserver(y=>{for(const u of y){const{width:m,height:r}=u.contentRect;o("resize",m,r)}}),d.observe(s.value)}}),e.onUnmounted(()=>{d&&d.disconnect()}),(p,v)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"container",ref:s,class:"pooder-canvas-area"},[e.createElementVNode("canvas",{ref_key:"canvas",ref:c},null,512)],512))}}),_=(n,i)=>{const o=n.__vccOpts||n;for(const[s,c]of i)o[s]=c;return o},S=_(C,[["__scopeId","data-v-dc60e8d6"]]),h={class:"pooder-editor"},w=_(e.defineComponent({__name:"PooderEditor",setup(n,{expose:i}){const o=new l.Pooder;e.provide("pooder",o),o.getService("CanvasService");const s=o.getService("CommandService"),c=o.getService("ConfigurationService");i({importConfig:r=>{c.import(r)},exportConfig:()=>c.export(),generateCutImage:async()=>await s.executeCommand("exportCutImage"),setUserImage:async r=>await s.executeCommand("setUserImage",r,1)});const u=r=>{const f=new a.CanvasService(r);o.registerService(f,"CanvasService"),[new a.BackgroundTool,new a.RulerTool,new a.MirrorTool,new a.DielineTool,new a.ImageTool,new a.HoleTool].forEach(b=>{o.extensionManager.register(b)})},m=(r,f)=>{const g=o.getService("CanvasService");g&&g.canvas.setDimensions({width:r,height:f})};return e.onUnmounted(()=>{const r=o.getService("CanvasService");r&&r.dispose(),o.extensionManager.destroy()}),(r,f)=>(e.openBlock(),e.createElementBlock("div",h,[e.createVNode(S,{onCanvasReady:u,onResize:m})]))}}),[["__scopeId","data-v-9b83ac88"]]);t.PooderEditor=w,Object.keys(l).forEach(n=>{n!=="default"&&!Object.prototype.hasOwnProperty.call(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:()=>l[n]})}),Object.keys(a).forEach(n=>{n!=="default"&&!Object.prototype.hasOwnProperty.call(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:()=>a[n]})}),Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})}));
+(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"})}));

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

@@ -2,6 +2,8 @@ declare const _default: import('vue').DefineComponent<{}, {
     importConfig: (config: Record<string, any>) => void;
     exportConfig: () => Record<string, any>;
     generateCutImage: () => Promise<any>;
-    setUserImage: (url: string) => 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>;
 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-9b83ac88]{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-903d7337]{display:flex;width:100%;height:100%;overflow:hidden}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pooder/vue",
-  "version": "3.1.0",
+  "version": "3.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/core": "1.1.0",
-    "@pooder/kit": "3.0.1"
+    "@pooder/kit": "3.2.0",
+    "@pooder/core": "1.2.0"
   },
   "peerDependencies": {
     "vue": "^3.0.0"