@pooder/vue 3.2.1 → 3.3.1

package/dist/index.es.js

@@ -1,87 +1,123 @@
-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 A, onUnmounted as w, createElementBlock as x, openBlock as I, createElementVNode as R, provide as M, createVNode as B } from "vue";
+import { Pooder as H } 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 F, RulerTool as G, FeatureTool as U } from "@pooder/kit";
 export * from "@pooder/kit";
-const A = /* @__PURE__ */ f({
+const $ = /* @__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) => {
+  setup(m, { emit: d }) {
+    const r = d, t = _(null), a = _(null);
+    let n = null;
+    return A(() => {
+      if (t.value && a.value) {
+        const { clientWidth: g, clientHeight: v } = t.value;
+        a.value.width = g, a.value.height = v, r("canvas-ready", a.value), n = new ResizeObserver((l) => {
           for (const u of l) {
-            const { width: g, height: d } = u.contentRect;
-            e("resize", g, d);
+            const { width: p, height: f } = u.contentRect;
+            r("resize", p, f);
           }
-        }), c.observe(n.value);
+        }), n.observe(t.value);
       }
-    }), _(() => {
-      c && c.disconnect();
-    }), (i, v) => (S(), C("div", {
+    }), w(() => {
+      n && n.disconnect();
+    }), (g, v) => (I(), x("div", {
       ref_key: "container",
-      ref: n,
+      ref: t,
       class: "pooder-canvas-area"
     }, [
-      y("canvas", {
+      R("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 = (m, d) => {
+  const r = m.__vccOpts || m;
+  for (const [t, a] of d)
+    r[t] = a;
+  return r;
+}, j = /* @__PURE__ */ S($, [["__scopeId", "data-v-ba73979d"]]), q = { 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(m, { expose: d, emit: r }) {
+    const t = new H();
+    M("pooder", t);
+    const a = t.getService("CommandService"), n = t.getService("ConfigurationService"), g = r, v = n.onAnyChange((e) => {
+      e.key === "image.items" && g("image-change", e.value);
+    });
+    d({
+      importConfig: (e) => {
+        n.import(e);
+      },
+      exportConfig: () => n.export(),
+      getImages: () => n.get("image.items", []),
+      generateCutImage: async () => await a.executeCommand("exportCutImage"),
+      addImage: async (e, o) => {
+        const c = await a.executeCommand("addImage", e, o), i = await a.executeCommand("getGeometry"), s = t.getService("CanvasService");
+        if (i && s) {
+          const k = s.canvas.width, D = s.canvas.height, h = (n.get("dieline.offset") || 0) * i.scale, b = i.width + 2 * h, E = i.height + 2 * h, O = i.x / k, z = i.y / D;
+          await a.executeCommand("fitImageToArea", c, {
+            width: b,
+            height: E,
+            left: O,
+            top: z
+          });
+        } else s && await a.executeCommand("fitImageToArea", c, {
+          width: s.canvas.width,
+          height: s.canvas.height,
+          left: 0.5,
+          top: 0.5
+        });
+        return c;
       },
-      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 (e, o) => await a.executeCommand("updateImage", e, o),
+      clearImages: async () => await a.executeCommand("clearImages"),
+      detectDieline: async (e) => {
+        const o = await a.executeCommand("detectEdge", e, {
+          expand: 10,
+          // 安全距离（像素）
+          smoothing: !0,
+          // 是否平滑
+          simplifyTolerance: 2
+          // 平滑度容差，值越大越圆润
+        });
+        if (o) {
+          const { pathData: c, width: i, height: s } = o;
+          return n.update("dieline.shape", "custom"), n.update("dieline.pathData", c), n.update("dieline.width", i), n.update("dieline.height", s), c;
+        }
+        return null;
+      }
     });
-    const d = (o) => {
-      const a = new E(o);
-      e.registerService(a, "CanvasService"), [
-        new R(),
-        new M(),
+    const y = (e) => {
+      const o = new P(e);
+      t.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 F(),
+        new G(),
+        new U()
+      ].forEach((i) => {
+        t.extensionManager.register(i);
       });
-    }, w = (o, a) => {
-      const m = e.getService("CanvasService");
-      m && m.canvas.setDimensions({ width: o, height: a });
+    }, T = (e, o) => {
+      const c = t.getService("CanvasService");
+      c && c.canvas.setDimensions({ width: e, 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 e = t.getService("CanvasService");
+      e && e.dispose(), v.dispose(), t.extensionManager.destroy();
+    }), (e, o) => (I(), x("div", q, [
+      B(j, {
+        onCanvasReady: y,
+        onResize: T
       })
     ]));
   }
-}), $ = /* @__PURE__ */ x(N, [["__scopeId", "data-v-903d7337"]]);
+}), ae = /* @__PURE__ */ S(J, [["__scopeId", "data-v-a3843b59"]]);
 export {
-  $ as PooderEditor
+  ae 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(i,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):(i=typeof globalThis<"u"?globalThis:i||self,e(i.PooderVue={},i.Vue,i.PooderCore,i.PooderKit))})(this,(function(i,e,v,m){"use strict";const I=e.defineComponent({__name:"CanvasArea",emits:["canvas-ready","resize"],setup(a,{emit:u}){const g=u,n=e.ref(null),o=e.ref(null);let c=null;return e.onMounted(()=>{if(n.value&&o.value){const{clientWidth:f,clientHeight:p}=n.value;o.value.width=f,o.value.height=p,g("canvas-ready",o.value),c=new ResizeObserver(y=>{for(const _ of y){const{width:C,height:w}=_.contentRect;g("resize",C,w)}}),c.observe(n.value)}}),e.onUnmounted(()=>{c&&c.disconnect()}),(f,p)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"container",ref:n,class:"pooder-canvas-area"},[e.createElementVNode("canvas",{ref_key:"canvas",ref:o},null,512)],512))}}),h=(a,u)=>{const g=a.__vccOpts||a;for(const[n,o]of u)g[n]=o;return g},x=h(I,[["__scopeId","data-v-ba73979d"]]),O={class:"pooder-editor"},b=h(e.defineComponent({__name:"PooderEditor",emits:["image-change"],setup(a,{expose:u,emit:g}){const n=new v.Pooder;e.provide("pooder",n);const o=n.getService("CommandService"),c=n.getService("ConfigurationService"),f=g,p=c.onAnyChange(t=>{t.key==="image.items"&&f("image-change",t.value)});u({importConfig:t=>{c.import(t)},exportConfig:()=>c.export(),getImages:()=>c.get("image.items",[]),generateCutImage:async()=>await o.executeCommand("exportCutImage"),addImage:async(t,r)=>{const s=await o.executeCommand("addImage",t,r),d=await o.executeCommand("getGeometry"),l=n.getService("CanvasService");if(d&&l){const E=l.canvas.width,j=l.canvas.height,S=(c.get("dieline.offset")||0)*d.scale,D=d.width+2*S,z=d.height+2*S,A=d.x/E,B=d.y/j;await o.executeCommand("fitImageToArea",s,{width:D,height:z,left:A,top:B})}else l&&await o.executeCommand("fitImageToArea",s,{width:l.canvas.width,height:l.canvas.height,left:.5,top:.5});return s},updateImage:async(t,r)=>await o.executeCommand("updateImage",t,r),clearImages:async()=>await o.executeCommand("clearImages"),detectDieline:async t=>{const r=await o.executeCommand("detectEdge",t,{expand:10,smoothing:!0,simplifyTolerance:2});if(r){const{pathData:s,width:d,height:l}=r;return c.update("dieline.shape","custom"),c.update("dieline.pathData",s),c.update("dieline.width",d),c.update("dieline.height",l),s}return null}});const P=t=>{const r=new m.CanvasService(t);n.registerService(r,"CanvasService"),[new m.BackgroundTool,new m.ImageTool,new m.MirrorTool,new m.DielineTool,new m.RulerTool,new m.FeatureTool].forEach(d=>{n.extensionManager.register(d)})},T=(t,r)=>{const s=n.getService("CanvasService");s&&s.canvas.setDimensions({width:t,height:r})};return e.onUnmounted(()=>{const t=n.getService("CanvasService");t&&t.dispose(),p.dispose(),n.extensionManager.destroy()}),(t,r)=>(e.openBlock(),e.createElementBlock("div",O,[e.createVNode(x,{onCanvasReady:P,onResize:T})]))}}),[["__scopeId","data-v-a3843b59"]]);i.PooderEditor=b,Object.keys(v).forEach(a=>{a!=="default"&&!Object.prototype.hasOwnProperty.call(i,a)&&Object.defineProperty(i,a,{enumerable:!0,get:()=>v[a]})}),Object.keys(m).forEach(a=>{a!=="default"&&!Object.prototype.hasOwnProperty.call(i,a)&&Object.defineProperty(i,a,{enumerable:!0,get:()=>m[a]})}),Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})}));

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

@@ -1,9 +1,15 @@
 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>;
+    detectDieline: (url: string) => Promise<any>;
+}, {}, {}, {}, 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-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-a3843b59]{display:flex;width:100%;height:100%;overflow:hidden}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pooder/vue",
-  "version": "3.2.1",
+  "version": "3.3.1",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -19,8 +19,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@pooder/kit": "3.3.0",
-    "@pooder/core": "1.2.0"
+    "@pooder/core": "1.2.0",
+    "@pooder/kit": "3.5.0"
   },
   "peerDependencies": {
     "vue": "^3.0.0"