@pooder/vue 3.3.0 → 4.0.0

package/dist/index.es.js

@@ -1,108 +1,137 @@
-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";
+import { defineComponent as w, ref as C, onMounted as z, onUnmounted as _, createElementBlock as x, openBlock as S, createElementVNode as A, provide as R, createVNode as M } from "vue";
+import { Pooder as W } from "@pooder/core";
 export * from "@pooder/core";
-import { CanvasService as P, BackgroundTool as W, ImageTool as N, MirrorTool as V, DielineTool as G, RulerTool as U, HoleTool as $ } from "@pooder/kit";
+import { CanvasService as H, BackgroundTool as P, ImageTool as N, MirrorTool as V, DielineTool as F, RulerTool as G, FeatureTool as U } from "@pooder/kit";
 export * from "@pooder/kit";
-const j = /* @__PURE__ */ C({
+const $ = /* @__PURE__ */ w({
   __name: "CanvasArea",
   emits: ["canvas-ready", "resize"],
-  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);
+  setup(v, { emit: d }) {
+    const r = d, t = C(null), a = C(null);
+    let o = null;
+    return z(() => {
+      if (t.value && a.value) {
+        const { clientWidth: m, clientHeight: g } = t.value;
+        a.value.width = m, a.value.height = g, r("canvas-ready", a.value), o = new ResizeObserver((u) => {
+          for (const l of u) {
+            const { width: f, height: p } = l.contentRect;
+            r("resize", f, p);
           }
-        }), n.observe(e.value);
+        }), o.observe(t.value);
       }
-    }), w(() => {
-      n && n.disconnect();
-    }), (v, g) => (I(), x("div", {
+    }), _(() => {
+      o && o.disconnect();
+    }), (m, g) => (S(), x("div", {
       ref_key: "container",
-      ref: e,
+      ref: t,
       class: "pooder-canvas-area"
     }, [
-      H("canvas", {
+      A("canvas", {
         ref_key: "canvas",
         ref: a
       }, null, 512)
     ], 512));
   }
-}), 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({
+}), I = (v, d) => {
+  const r = v.__vccOpts || v;
+  for (const [t, a] of d)
+    r[t] = a;
+  return r;
+}, j = /* @__PURE__ */ I($, [["__scopeId", "data-v-ba73979d"]]), q = { class: "pooder-editor" }, J = /* @__PURE__ */ w({
   __name: "PooderEditor",
   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);
+  setup(v, { expose: d, emit: r }) {
+    const t = new W();
+    R("pooder", t);
+    const a = t.getService("CommandService"), o = t.getService("ConfigurationService"), m = t.getService("WorkbenchService"), g = r, u = o.onAnyChange((e) => {
+      e.key === "image.items" && g("image-change", e.value);
     });
-    m({
-      importConfig: (t) => {
-        n.import(t);
+    d({
+      importConfig: (e) => {
+        o.import(e);
       },
-      exportConfig: () => n.export(),
-      getImages: () => n.get("image.items", []),
+      exportConfig: () => o.export(),
+      getImages: () => o.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,
+      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 b = s.canvas.width, k = s.canvas.height, h = (o.get("dieline.offset") || 0) * i.scale, B = i.width + 2 * h, D = i.height + 2 * h, E = i.x / b, O = i.y / k;
+          await a.executeCommand("fitImageToArea", c, {
+            width: B,
+            height: D,
             left: E,
-            top: R
+            top: O
           });
-        } else i && await a.executeCommand("fitImageToArea", r, {
-          width: i.canvas.width,
-          height: i.canvas.height,
+        } else s && await a.executeCommand("fitImageToArea", c, {
+          width: s.canvas.width,
+          height: s.canvas.height,
           left: 0.5,
           top: 0.5
         });
-        return r;
+        return c;
       },
-      updateImage: async (t, o) => await a.executeCommand("updateImage", t, o),
-      clearImages: async () => await a.executeCommand("clearImages")
+      updateImage: async (e, n) => await a.executeCommand("updateImage", e, n),
+      clearImages: async () => await a.executeCommand("clearImages"),
+      detectDieline: async (e) => {
+        const n = await a.executeCommand("detectEdge", e, {
+          expand: 10,
+          // 安全距离（像素）
+          smoothing: !0,
+          // 是否平滑
+          simplifyTolerance: 2
+          // 平滑度容差，值越大越圆润
+        });
+        if (n) {
+          const { pathData: c, width: i, height: s } = n;
+          return 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), c;
+        }
+        return null;
+      },
+      activateTool: (e) => m.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),
+      services: {
+        workbench: m,
+        command: a,
+        config: o
+      }
     });
-    const y = (t) => {
-      const o = new P(t);
-      e.registerService(o, "CanvasService"), [
-        new W(),
+    const y = (e) => {
+      const n = new H(e, {
+        eventBus: t.eventBus
+      });
+      t.registerService(n, "CanvasService"), [
+        new P(),
         new N(),
         // new FilmTool(),
         // new WhiteInkTool(),
         new V(),
+        new F(),
         new G(),
-        new U(),
-        new $()
-      ].forEach((c) => {
-        e.extensionManager.register(c);
+        new U()
+      ].forEach((i) => {
+        t.extensionManager.register(i);
       });
-    }, T = (t, o) => {
-      const r = e.getService("CanvasService");
-      r && r.canvas.setDimensions({ width: t, height: o });
+    }, T = (e, n) => {
+      const c = t.getService("CanvasService");
+      c && c.canvas.setDimensions({ width: e, height: n });
     };
-    return w(() => {
-      const t = e.getService("CanvasService");
-      t && t.dispose(), g.dispose(), e.extensionManager.destroy();
-    }), (t, o) => (I(), x("div", F, [
-      B(q, {
+    return _(() => {
+      const e = t.getService("CanvasService");
+      e && e.dispose(), u.dispose(), t.extensionManager.destroy();
+    }), (e, n) => (S(), x("div", q, [
+      M(j, {
         onCanvasReady: y,
         onResize: T
       })
     ]));
   }
-}), te = /* @__PURE__ */ S(J, [["__scopeId", "data-v-56106d22"]]);
+}), ae = /* @__PURE__ */ I(J, [["__scopeId", "data-v-fe0feb51"]]);
 export {
-  te as PooderEditor
+  ae as PooderEditor
 };

package/dist/index.umd.js

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

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

@@ -1,3 +1,4 @@
+import { CommandService, ConfigurationService, WorkbenchService } from '../../core/src/index.ts';
 declare const _default: import('vue').DefineComponent<{}, {
     importConfig: (config: Record<string, any>) => void;
     exportConfig: () => Record<string, any>;
@@ -6,6 +7,19 @@ declare const _default: import('vue').DefineComponent<{}, {
     addImage: (url: string, options?: any) => Promise<any>;
     updateImage: (id: string, options?: any) => Promise<any>;
     clearImages: () => Promise<any>;
+    detectDieline: (url: string) => Promise<any>;
+    activateTool: (id: string) => void;
+    on: (event: string, handler: any) => void;
+    off: (event: string, handler: any) => void;
+    emit: (event: string, data: any) => void;
+    executeCommand: (id: string, ...args: any[]) => Promise<any>;
+    getConfig: (key: string) => any;
+    updateConfig: (key: string, val: any) => void;
+    services: {
+        workbench: WorkbenchService;
+        command: CommandService;
+        config: ConfigurationService;
+    };
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "image-change": (images: any[]) => any;
 }, string, import('vue').PublicProps, Readonly<{}> & Readonly<{

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pooder/vue",
-  "version": "3.3.0",
+  "version": "4.0.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": "3.4.0",
-    "@pooder/core": "1.2.0"
+    "@pooder/core": "2.0.0",
+    "@pooder/kit": "4.0.0"
   },
   "peerDependencies": {
     "vue": "^3.0.0"