@pooder/vue 4.1.0 → 4.1.2

package/dist/index.es.js

@@ -1,52 +1,52 @@
-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";
+import { defineComponent as T, ref as b, onMounted as F, onUnmounted as k, createElementBlock as B, openBlock as D, createElementVNode as L, provide as U, createVNode as $ } from "vue";
+import { Pooder as q } from "@pooder/core";
 export * from "@pooder/core";
-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";
+import { CanvasService as J, BackgroundTool as K, ImageTool as Q, MirrorTool as Z, DielineTool as ee, RulerTool as te, FeatureTool as ne } from "@pooder/kit";
 export * from "@pooder/kit";
-const $ = /* @__PURE__ */ w({
+const ae = /* @__PURE__ */ T({
   __name: "CanvasArea",
   emits: ["canvas-ready", "resize"],
-  setup(v, { emit: d }) {
-    const r = d, t = C(null), a = C(null);
+  setup(f, { emit: v }) {
+    const d = v, t = b(null), a = b(null);
     let o = null;
-    return z(() => {
+    return F(() => {
       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);
+        const { clientWidth: u, clientHeight: h } = t.value;
+        a.value.width = u, a.value.height = h, d("canvas-ready", a.value), o = new ResizeObserver((w) => {
+          for (const _ of w) {
+            const { width: S, height: I } = _.contentRect;
+            d("resize", S, I);
           }
         }), o.observe(t.value);
       }
-    }), _(() => {
+    }), k(() => {
       o && o.disconnect();
-    }), (m, g) => (S(), x("div", {
+    }), (u, h) => (D(), B("div", {
       ref_key: "container",
       ref: t,
       class: "pooder-canvas-area"
     }, [
-      A("canvas", {
+      L("canvas", {
         ref_key: "canvas",
         ref: a
       }, null, 512)
     ], 512));
   }
-}), 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-dc60e8d6"]]), q = { class: "pooder-editor" }, J = /* @__PURE__ */ w({
+}), E = (f, v) => {
+  const d = f.__vccOpts || f;
+  for (const [t, a] of v)
+    d[t] = a;
+  return d;
+}, oe = /* @__PURE__ */ E(ae, [["__scopeId", "data-v-ba73979d"]]), ce = { class: "pooder-editor" }, ie = /* @__PURE__ */ T({
   __name: "PooderEditor",
   emits: ["image-change"],
-  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);
+  setup(f, { expose: v, emit: d }) {
+    const t = new q();
+    U("pooder", t);
+    const a = t.getService("CommandService"), o = t.getService("ConfigurationService"), u = t.getService("WorkbenchService"), h = d, w = o.onAnyChange((e) => {
+      e.key === "image.items" && h("image-change", e.value);
     });
-    d({
+    v({
       importConfig: (e) => {
         o.import(e);
       },
@@ -56,12 +56,12 @@ const $ = /* @__PURE__ */ w({
       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 k = s.canvas.width, b = s.canvas.height, h = (o.get("dieline.offset") || 0) * i.scale, B = i.width + 2 * h, D = i.height + 2 * h, E = i.x / k, O = i.y / b;
+          const r = s.canvas.width, p = s.canvas.height, m = (o.get("dieline.offset") || 0) * i.scale, y = i.width + 2 * m, C = i.height + 2 * m, g = i.x / r, l = i.y / p;
           await a.executeCommand("fitImageToArea", c, {
-            width: B,
-            height: D,
-            left: E,
-            top: O
+            width: y,
+            height: C,
+            left: g,
+            top: l
           });
         } else s && await a.executeCommand("fitImageToArea", c, {
           width: s.canvas.width,
@@ -83,12 +83,26 @@ const $ = /* @__PURE__ */ w({
           // 平滑度容差，值越大越圆润
         });
         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;
+          const { pathData: c, width: i, height: s, rawBounds: r, imageWidth: p, imageHeight: x } = n;
+          if (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), r && p && x) {
+            const m = t.getService("CanvasService"), C = (o.get("image.items") || []).find((g) => g.url === e);
+            if (m && C) {
+              const g = await a.executeCommand("getGeometry");
+              if (g) {
+                const l = g.width / r.width, z = p / 2, A = x / 2, H = r.x + r.width / 2, R = r.y + r.height / 2, M = H - z, X = R - A, Y = M * l, P = X * l, j = m.canvas.width, G = m.canvas.height, N = 0.5 - Y / j, V = 0.5 - P / G;
+                await a.executeCommand("updateImage", C.id, {
+                  scale: l,
+                  left: N,
+                  top: V
+                });
+              }
+            }
+          }
+          return c;
         }
         return null;
       },
-      activateTool: (e) => m.activate(e),
+      activateTool: (e) => u.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),
@@ -96,42 +110,42 @@ const $ = /* @__PURE__ */ w({
       getConfig: (e) => o.get(e),
       updateConfig: (e, n) => o.update(e, n),
       services: {
-        workbench: m,
+        workbench: u,
         command: a,
         config: o
       }
     });
-    const y = (e) => {
-      const n = new H(e, {
+    const O = (e) => {
+      const n = new J(e, {
         eventBus: t.eventBus
       });
       t.registerService(n, "CanvasService"), [
-        new P(),
-        new N(),
+        new K(),
+        new Q(),
         // new FilmTool(),
         // new WhiteInkTool(),
-        new V(),
-        new F(),
-        new G(),
-        new U()
+        new Z(),
+        new ee(),
+        new te(),
+        new ne()
       ].forEach((i) => {
         t.extensionManager.register(i);
       });
-    }, T = (e, n) => {
+    }, W = (e, n) => {
       const c = t.getService("CanvasService");
       c && c.canvas.setDimensions({ width: e, height: n });
     };
-    return _(() => {
+    return k(() => {
       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
+      e && e.dispose(), w.dispose(), t.extensionManager.destroy();
+    }), (e, n) => (D(), B("div", ce, [
+      $(oe, {
+        onCanvasReady: O,
+        onResize: W
       })
     ]));
   }
-}), ae = /* @__PURE__ */ I(J, [["__scopeId", "data-v-fe0feb51"]]);
+}), fe = /* @__PURE__ */ E(ie, [["__scopeId", "data-v-51bac65f"]]);
 export {
-  ae as PooderEditor
+  fe as PooderEditor
 };

package/dist/index.umd.js

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pooder/vue",
-  "version": "4.1.0",
+  "version": "4.1.2",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -19,8 +19,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@pooder/core": "2.0.0",
-    "@pooder/kit": "4.2.0"
+    "@pooder/kit": "4.3.1",
+    "@pooder/core": "2.0.0"
   },
   "peerDependencies": {
     "vue": "^3.0.0"