@pooder/vue 2.0.0 → 3.0.0

package/dist/index.es.js

@@ -1,321 +1,85 @@
-import { defineComponent as v, ref as k, onMounted as A, onBeforeUnmount as M, createElementBlock as p, openBlock as h, createElementVNode as l, computed as T, toDisplayString as b, watch as N, isReactive as P, reactive as E, resolveComponent as V, createCommentVNode as O, Fragment as C, renderList as S, createVNode as y, shallowRef as L } from "vue";
-import { BackgroundTool as W, ImageTool as B, WhiteInkTool as F, DielineTool as H, HoleTool as R, FilmTool as U } from "@pooder/kit";
-import { PooderEditor as j } from "@pooder/core";
-const q = v({
-  name: "CanvasArea",
-  props: {
-    width: {
-      type: Number,
-      required: !0
-    },
-    height: {
-      type: Number,
-      required: !0
-    }
-  },
-  emits: ["init"],
-  setup(t, { emit: o }) {
-    const d = k(null);
-    let s = null;
-    return A(() => {
-      d.value && (d.value.width = t.width, d.value.height = t.height, s = new j(d.value, {
-        width: t.width,
-        height: t.height
-      }), o("init", s));
-    }), M(() => {
-      s && s.destroy();
-    }), {
-      canvasRef: d
-    };
-  }
-}), I = (t, o) => {
-  const d = t.__vccOpts || t;
-  for (const [s, f] of o)
-    d[s] = f;
-  return d;
-}, D = { class: "canvas-area" }, z = { class: "canvas-wrapper" }, G = { ref: "canvasRef" };
-function J(t, o, d, s, f, _) {
-  return h(), p("div", D, [
-    l("div", z, [
-      l("canvas", G, null, 512)
-    ])
-  ]);
-}
-const K = /* @__PURE__ */ I(q, [["render", J], ["__scopeId", "data-v-c0e5ef40"]]), Q = v({
-  name: "ColorPicker",
-  props: {
-    modelValue: {
-      type: String,
-      default: "#000000"
-    }
-  },
-  emits: ["update:modelValue", "change"],
-  setup(t, { emit: o }) {
-    const d = (r) => {
-      if (!r) return "#000000";
-      const n = String(r);
-      if (n.startsWith("#")) {
-        if (n.length === 9) return n.slice(0, 7);
-        if (n.length === 7) return n;
-        if (n.length === 4)
-          return "#" + n[1] + n[1] + n[2] + n[2] + n[3] + n[3];
-      }
-      if (n.startsWith("rgb")) {
-        const e = n.match(/\d+(\.\d+)?/g);
-        if (e && e.length >= 3) {
-          const u = parseInt(e[0]), i = parseInt(e[1]), c = parseInt(e[2]), g = ($) => {
-            const w = $.toString(16);
-            return w.length === 1 ? "0" + w : w;
-          };
-          return `#${g(u)}${g(i)}${g(c)}`;
-        }
+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";
+export * from "@pooder/core";
+import { CanvasService as T, BackgroundTool as z, RulerTool as E, MirrorTool as R, DielineTool as M, ImageTool as U, HoleTool as b } from "@pooder/kit";
+export * from "@pooder/kit";
+const B = /* @__PURE__ */ g({
+  __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);
+          }
+        }), a.observe(t.value);
       }
-      return "#000000";
-    }, s = (r) => {
-      if (!r) return 1;
-      const n = String(r);
-      if (n.startsWith("#"))
-        return n.length === 9 ? parseInt(n.slice(7), 16) / 255 : 1;
-      if (n.startsWith("rgba")) {
-        const e = n.match(/\d+(\.\d+)?/g);
-        if (e && e.length >= 4) return parseFloat(e[3]);
-      }
-      return 1;
-    }, f = T(() => d(t.modelValue)), _ = T(
-      () => Math.round(s(t.modelValue) * 100)
-    );
-    return {
-      hexValue: f,
-      alphaValue: _,
-      updateColor: (r) => {
-        const n = r.target.value, e = s(t.modelValue), u = parseInt(n.slice(1, 3), 16), i = parseInt(n.slice(3, 5), 16), c = parseInt(n.slice(5, 7), 16), g = `rgba(${u}, ${i}, ${c}, ${e})`;
-        o("update:modelValue", g), o("change", g);
-      },
-      updateAlpha: (r) => {
-        const n = r.target.value, e = parseInt(n) / 100, u = d(t.modelValue), i = parseInt(u.slice(1, 3), 16), c = parseInt(u.slice(3, 5), 16), g = parseInt(u.slice(5, 7), 16), $ = `rgba(${i}, ${c}, ${g}, ${e})`;
-        o("update:modelValue", $), o("change", $);
-      }
-    };
+    }), f(() => {
+      a && a.disconnect();
+    }), (i, v) => (C(), _("div", {
+      ref_key: "container",
+      ref: t,
+      class: "pooder-canvas-area"
+    }, [
+      h("canvas", {
+        ref_key: "canvas",
+        ref: n
+      }, null, 512)
+    ], 512));
   }
-}), X = { class: "color-picker" }, Y = ["value"], Z = { class: "alpha-slider-wrap" }, x = ["value"], ee = { class: "alpha-value" };
-function te(t, o, d, s, f, _) {
-  return h(), p("div", X, [
-    l("input", {
-      type: "color",
-      value: t.hexValue,
-      onInput: o[0] || (o[0] = (...m) => t.updateColor && t.updateColor(...m))
-    }, null, 40, Y),
-    l("div", Z, [
-      o[2] || (o[2] = l("span", { class: "alpha-label" }, "A:", -1)),
-      l("input", {
-        type: "range",
-        min: "0",
-        max: "100",
-        step: "1",
-        value: t.alphaValue,
-        onInput: o[1] || (o[1] = (...m) => t.updateAlpha && t.updateAlpha(...m))
-      }, null, 40, x),
-      l("span", ee, b(t.alphaValue) + "%", 1)
-    ])
-  ]);
-}
-const ne = /* @__PURE__ */ I(Q, [["render", te], ["__scopeId", "data-v-21507ccd"]]), oe = v({
-  name: "ToolPanel",
-  components: { ColorPicker: ne },
-  props: {
-    editor: {
-      type: Object,
-      default: null
-    }
-  },
-  setup(t) {
-    const o = k([]), d = () => {
-      t.editor ? o.value = Array.from(
-        t.editor.getExtensions().map((e) => (e.options && !P(e.options) && (e.options = E(e.options)), e))
-      ) : o.value = [];
-    };
-    N(
-      () => t.editor,
-      (e) => {
-        d();
+}), S = (c, r) => {
+  const e = c.__vccOpts || c;
+  for (const [t, n] of r)
+    e[t] = n;
+  return e;
+}, O = /* @__PURE__ */ S(B, [["__scopeId", "data-v-dc60e8d6"]]), P = { class: "pooder-editor" }, A = /* @__PURE__ */ g({
+  __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");
+    r({
+      importConfig: (o) => {
+        n.import(o);
       },
-      { immediate: !0 }
-    );
-    const s = (e, u) => e.schema?.[u];
-    return {
-      extensionList: o,
-      getInputType: (e, u, i) => {
-        const c = s(e, u);
-        if (c && c.type) return c.type;
-        if (typeof i == "boolean") return "checkbox";
-        if (typeof i == "number") return "number";
-        if (typeof i == "string") {
-          const g = u.toLowerCase();
-          return g.includes("color") || g.includes("fill") || g.includes("stroke") || i.startsWith("#") || i.startsWith("rgb") ? "color" : "text";
-        }
-        return "text";
-      },
-      updateOption: (e, u, i) => {
-        e.options && (e.options[String(u)] = i, t.editor && t.editor.updateState((c) => ({ ...c })));
-      },
-      getMinMax: (e, u, i) => {
-        const c = s(e, u);
-        return c ? {
-          min: c.min ?? 0,
-          max: c.max ?? 100,
-          step: c.step ?? 1
-        } : i <= 1 && i >= 0 ? { min: 0, max: 1, step: 0.01 } : { min: 0, max: Math.max(1e3, i * 2), step: 1 };
-      },
-      formatNumber: (e) => typeof e == "number" ? Number.isInteger(e) ? e : e.toFixed(2) : e,
-      getLabel: (e, u) => {
-        const i = s(e, u);
-        return i && i.label ? i.label : u.charAt(0).toUpperCase() + u.slice(1);
-      },
-      getSelectOptions: (e, u) => {
-        const i = s(e, u);
-        return !i || !i.options ? [] : i.options.map((c) => typeof c == "string" ? { label: c, value: c } : c);
-      }
-    };
-  }
-}), se = {
-  key: 0,
-  class: "tool-panel"
-}, re = { key: 0 }, ae = { key: 0 }, ie = ["value", "onChange"], le = ["value"], ue = { key: 1 }, ce = { key: 2 }, de = ["value", "onInput"], pe = { class: "slider-container" }, he = ["min", "max", "step", "value", "onInput"], ge = { class: "slider-value" }, me = { key: 3 }, fe = { class: "switch-wrapper" }, _e = { class: "switch" }, be = ["checked", "onChange"], $e = { key: 4 }, ve = { class: "checkbox-wrapper" }, Ie = ["checked", "onChange"], we = { key: 5 }, Ce = ["value", "onInput"];
-function Se(t, o, d, s, f, _) {
-  const m = V("ColorPicker");
-  return t.editor ? (h(), p("div", se, [
-    (h(!0), p(C, null, S(t.extensionList, (a) => (h(), p("div", {
-      class: "plugin-section",
-      key: a.name
-    }, [
-      l("h3", null, b(a.name), 1),
-      a.options ? (h(), p("div", re, [
-        (h(!0), p(C, null, S(a.options, (r, n) => (h(), p("div", {
-          key: n,
-          class: "config-item"
-        }, [
-          l("label", null, b(t.getLabel(a, String(n))), 1),
-          t.getInputType(a, String(n), r) === "select" ? (h(), p("div", ae, [
-            l("select", {
-              value: r,
-              onChange: (e) => t.updateOption(a, n, e.target.value)
-            }, [
-              (h(!0), p(C, null, S(t.getSelectOptions(a, String(n)), (e) => (h(), p("option", {
-                key: e.value,
-                value: e.value
-              }, b(e.label), 9, le))), 128))
-            ], 40, ie)
-          ])) : t.getInputType(a, String(n), r) === "color" ? (h(), p("div", ue, [
-            y(m, {
-              modelValue: String(r),
-              "onUpdate:modelValue": (e) => t.updateOption(a, n, e)
-            }, null, 8, ["modelValue", "onUpdate:modelValue"])
-          ])) : t.getInputType(a, String(n), r) === "number" ? (h(), p("div", ce, [
-            l("input", {
-              type: "number",
-              value: r,
-              onInput: (e) => t.updateOption(
-                a,
-                n,
-                Number(e.target.value)
-              )
-            }, null, 40, de),
-            l("div", pe, [
-              l("input", {
-                type: "range",
-                min: t.getMinMax(a, String(n), r).min,
-                max: t.getMinMax(a, String(n), r).max,
-                step: t.getMinMax(a, String(n), r).step,
-                value: r,
-                onInput: (e) => t.updateOption(
-                  a,
-                  n,
-                  Number(e.target.value)
-                )
-              }, null, 40, he),
-              l("span", ge, b(t.formatNumber(r)), 1)
-            ])
-          ])) : t.getInputType(a, String(n), r) === "boolean" ? (h(), p("div", me, [
-            l("div", fe, [
-              l("label", _e, [
-                l("input", {
-                  type: "checkbox",
-                  checked: !!r,
-                  onChange: (e) => t.updateOption(
-                    a,
-                    n,
-                    e.target.checked
-                  )
-                }, null, 40, be),
-                o[0] || (o[0] = l("span", { class: "slider" }, null, -1))
-              ])
-            ])
-          ])) : t.getInputType(a, String(n), r) === "checkbox" ? (h(), p("div", $e, [
-            l("div", ve, [
-              l("input", {
-                type: "checkbox",
-                checked: !!r,
-                onChange: (e) => t.updateOption(
-                  a,
-                  n,
-                  e.target.checked
-                )
-              }, null, 40, Ie)
-            ])
-          ])) : (h(), p("div", we, [
-            l("input", {
-              type: "text",
-              value: r,
-              onInput: (e) => t.updateOption(a, n, e.target.value)
-            }, null, 40, Ce)
-          ]))
-        ]))), 128))
-      ])) : O("", !0)
-    ]))), 128))
-  ])) : O("", !0);
-}
-const Ve = /* @__PURE__ */ I(oe, [["render", Se], ["__scopeId", "data-v-77c5b72f"]]), ye = v({
-  name: "PooderEditor",
-  components: {
-    CanvasArea: K,
-    ToolPanel: Ve
-  },
-  props: {
-    width: {
-      type: Number,
-      default: 1200
-    },
-    height: {
-      type: Number,
-      default: 600
-    }
-  },
-  setup(t) {
-    const o = L(null);
-    return {
-      editor: o,
-      onInit: (s) => {
-        s.use(new W()), s.use(new B()), s.use(new F()), s.use(new H()), s.use(new R()), s.use(new U()), o.value = s, console.log(s.getObjects());
-      }
+      exportConfig: () => n.export(),
+      generateCutImage: async () => await t.executeCommand("exportCutImage"),
+      setUserImage: async (o) => await t.executeCommand("setUserImage", o, 1)
+    });
+    const d = (o) => {
+      const s = new T(o);
+      e.registerService(s), [
+        new z(),
+        new E(),
+        // new FilmTool(),
+        // new WhiteInkTool(),
+        new R(),
+        new M(),
+        new U(),
+        new b()
+      ].forEach((x) => {
+        e.extensionManager.register(x);
+      });
+    }, m = (o, s) => {
+      const l = e.getService("CanvasService");
+      l && l.canvas.setDimensions({ width: o, height: s });
     };
+    return f(() => {
+      const o = e.getService("CanvasService");
+      o && o.dispose(), e.extensionManager.destroy();
+    }), (o, s) => (C(), _("div", P, [
+      I(O, {
+        onCanvasReady: d,
+        onResize: m
+      })
+    ]));
   }
-}), Te = { class: "pooder-editor" }, Oe = { class: "center-area" }, ke = { class: "right-panel" };
-function Ae(t, o, d, s, f, _) {
-  const m = V("CanvasArea"), a = V("ToolPanel");
-  return h(), p("div", Te, [
-    l("div", Oe, [
-      y(m, {
-        width: t.width,
-        height: t.height,
-        onInit: t.onInit
-      }, null, 8, ["width", "height", "onInit"])
-    ]),
-    l("div", ke, [
-      y(a, { editor: t.editor }, null, 8, ["editor"])
-    ])
-  ]);
-}
-const Ee = /* @__PURE__ */ I(ye, [["render", Ae], ["__scopeId", "data-v-b9b03377"]]);
+}), V = /* @__PURE__ */ S(A, [["__scopeId", "data-v-014c232e"]]);
 export {
-  Ee as PooderEditor
+  V as PooderEditor
 };

package/dist/index.umd.js

@@ -1 +1 @@
-(function(m,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@pooder/kit"),require("@pooder/core")):typeof define=="function"&&define.amd?define(["exports","vue","@pooder/kit","@pooder/core"],e):(m=typeof globalThis<"u"?globalThis:m||self,e(m.PooderVue={},m.Vue,m.PooderKit,m.PooderCore))})(this,(function(m,e,f,$){"use strict";const k=e.defineComponent({name:"CanvasArea",props:{width:{type:Number,required:!0},height:{type:Number,required:!0}},emits:["init"],setup(n,{emit:r}){const p=e.ref(null);let s=null;return e.onMounted(()=>{p.value&&(p.value.width=n.width,p.value.height=n.height,s=new $.PooderEditor(p.value,{width:n.width,height:n.height}),r("init",s))}),e.onBeforeUnmount(()=>{s&&s.destroy()}),{canvasRef:p}}}),V=(n,r)=>{const p=n.__vccOpts||n;for(const[s,g]of r)p[s]=g;return p},B={class:"canvas-area"},I={class:"canvas-wrapper"},N={ref:"canvasRef"};function C(n,r,p,s,g,_){return e.openBlock(),e.createElementBlock("div",B,[e.createElementVNode("div",I,[e.createElementVNode("canvas",N,null,512)])])}const y=V(k,[["render",C],["__scopeId","data-v-c0e5ef40"]]),S=e.defineComponent({name:"ColorPicker",props:{modelValue:{type:String,default:"#000000"}},emits:["update:modelValue","change"],setup(n,{emit:r}){const p=a=>{if(!a)return"#000000";const o=String(a);if(o.startsWith("#")){if(o.length===9)return o.slice(0,7);if(o.length===7)return o;if(o.length===4)return"#"+o[1]+o[1]+o[2]+o[2]+o[3]+o[3]}if(o.startsWith("rgb")){const t=o.match(/\d+(\.\d+)?/g);if(t&&t.length>=3){const c=parseInt(t[0]),i=parseInt(t[1]),d=parseInt(t[2]),u=E=>{const b=E.toString(16);return b.length===1?"0"+b:b};return`#${u(c)}${u(i)}${u(d)}`}}return"#000000"},s=a=>{if(!a)return 1;const o=String(a);if(o.startsWith("#"))return o.length===9?parseInt(o.slice(7),16)/255:1;if(o.startsWith("rgba")){const t=o.match(/\d+(\.\d+)?/g);if(t&&t.length>=4)return parseFloat(t[3])}return 1},g=e.computed(()=>p(n.modelValue)),_=e.computed(()=>Math.round(s(n.modelValue)*100));return{hexValue:g,alphaValue:_,updateColor:a=>{const o=a.target.value,t=s(n.modelValue),c=parseInt(o.slice(1,3),16),i=parseInt(o.slice(3,5),16),d=parseInt(o.slice(5,7),16),u=`rgba(${c}, ${i}, ${d}, ${t})`;r("update:modelValue",u),r("change",u)},updateAlpha:a=>{const o=a.target.value,t=parseInt(o)/100,c=p(n.modelValue),i=parseInt(c.slice(1,3),16),d=parseInt(c.slice(3,5),16),u=parseInt(c.slice(5,7),16),E=`rgba(${i}, ${d}, ${u}, ${t})`;r("update:modelValue",E),r("change",E)}}}}),w={class:"color-picker"},T=["value"],O={class:"alpha-slider-wrap"},P=["value"],M={class:"alpha-value"};function A(n,r,p,s,g,_){return e.openBlock(),e.createElementBlock("div",w,[e.createElementVNode("input",{type:"color",value:n.hexValue,onInput:r[0]||(r[0]=(...h)=>n.updateColor&&n.updateColor(...h))},null,40,T),e.createElementVNode("div",O,[r[2]||(r[2]=e.createElementVNode("span",{class:"alpha-label"},"A:",-1)),e.createElementVNode("input",{type:"range",min:"0",max:"100",step:"1",value:n.alphaValue,onInput:r[1]||(r[1]=(...h)=>n.updateAlpha&&n.updateAlpha(...h))},null,40,P),e.createElementVNode("span",M,e.toDisplayString(n.alphaValue)+"%",1)])])}const L=V(S,[["render",A],["__scopeId","data-v-21507ccd"]]),W=e.defineComponent({name:"ToolPanel",components:{ColorPicker:L},props:{editor:{type:Object,default:null}},setup(n){const r=e.ref([]),p=()=>{n.editor?r.value=Array.from(n.editor.getExtensions().map(t=>(t.options&&!e.isReactive(t.options)&&(t.options=e.reactive(t.options)),t))):r.value=[]};e.watch(()=>n.editor,t=>{p()},{immediate:!0});const s=(t,c)=>t.schema?.[c];return{extensionList:r,getInputType:(t,c,i)=>{const d=s(t,c);if(d&&d.type)return d.type;if(typeof i=="boolean")return"checkbox";if(typeof i=="number")return"number";if(typeof i=="string"){const u=c.toLowerCase();return u.includes("color")||u.includes("fill")||u.includes("stroke")||i.startsWith("#")||i.startsWith("rgb")?"color":"text"}return"text"},updateOption:(t,c,i)=>{t.options&&(t.options[String(c)]=i,n.editor&&n.editor.updateState(d=>({...d})))},getMinMax:(t,c,i)=>{const d=s(t,c);return d?{min:d.min??0,max:d.max??100,step:d.step??1}:i<=1&&i>=0?{min:0,max:1,step:.01}:{min:0,max:Math.max(1e3,i*2),step:1}},formatNumber:t=>typeof t=="number"?Number.isInteger(t)?t:t.toFixed(2):t,getLabel:(t,c)=>{const i=s(t,c);return i&&i.label?i.label:c.charAt(0).toUpperCase()+c.slice(1)},getSelectOptions:(t,c)=>{const i=s(t,c);return!i||!i.options?[]:i.options.map(d=>typeof d=="string"?{label:d,value:d}:d)}}}}),D={key:0,class:"tool-panel"},F={key:0},q={key:0},j=["value","onChange"],H=["value"],R={key:1},U={key:2},K=["value","onInput"],z={class:"slider-container"},G=["min","max","step","value","onInput"],J={class:"slider-value"},Q={key:3},X={class:"switch-wrapper"},Y={class:"switch"},Z=["checked","onChange"],x={key:4},v={class:"checkbox-wrapper"},ee=["checked","onChange"],te={key:5},ne=["value","onInput"];function oe(n,r,p,s,g,_){const h=e.resolveComponent("ColorPicker");return n.editor?(e.openBlock(),e.createElementBlock("div",D,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.extensionList,l=>(e.openBlock(),e.createElementBlock("div",{class:"plugin-section",key:l.name},[e.createElementVNode("h3",null,e.toDisplayString(l.name),1),l.options?(e.openBlock(),e.createElementBlock("div",F,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.options,(a,o)=>(e.openBlock(),e.createElementBlock("div",{key:o,class:"config-item"},[e.createElementVNode("label",null,e.toDisplayString(n.getLabel(l,String(o))),1),n.getInputType(l,String(o),a)==="select"?(e.openBlock(),e.createElementBlock("div",q,[e.createElementVNode("select",{value:a,onChange:t=>n.updateOption(l,o,t.target.value)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.getSelectOptions(l,String(o)),t=>(e.openBlock(),e.createElementBlock("option",{key:t.value,value:t.value},e.toDisplayString(t.label),9,H))),128))],40,j)])):n.getInputType(l,String(o),a)==="color"?(e.openBlock(),e.createElementBlock("div",R,[e.createVNode(h,{modelValue:String(a),"onUpdate:modelValue":t=>n.updateOption(l,o,t)},null,8,["modelValue","onUpdate:modelValue"])])):n.getInputType(l,String(o),a)==="number"?(e.openBlock(),e.createElementBlock("div",U,[e.createElementVNode("input",{type:"number",value:a,onInput:t=>n.updateOption(l,o,Number(t.target.value))},null,40,K),e.createElementVNode("div",z,[e.createElementVNode("input",{type:"range",min:n.getMinMax(l,String(o),a).min,max:n.getMinMax(l,String(o),a).max,step:n.getMinMax(l,String(o),a).step,value:a,onInput:t=>n.updateOption(l,o,Number(t.target.value))},null,40,G),e.createElementVNode("span",J,e.toDisplayString(n.formatNumber(a)),1)])])):n.getInputType(l,String(o),a)==="boolean"?(e.openBlock(),e.createElementBlock("div",Q,[e.createElementVNode("div",X,[e.createElementVNode("label",Y,[e.createElementVNode("input",{type:"checkbox",checked:!!a,onChange:t=>n.updateOption(l,o,t.target.checked)},null,40,Z),r[0]||(r[0]=e.createElementVNode("span",{class:"slider"},null,-1))])])])):n.getInputType(l,String(o),a)==="checkbox"?(e.openBlock(),e.createElementBlock("div",x,[e.createElementVNode("div",v,[e.createElementVNode("input",{type:"checkbox",checked:!!a,onChange:t=>n.updateOption(l,o,t.target.checked)},null,40,ee)])])):(e.openBlock(),e.createElementBlock("div",te,[e.createElementVNode("input",{type:"text",value:a,onInput:t=>n.updateOption(l,o,t.target.value)},null,40,ne)]))]))),128))])):e.createCommentVNode("",!0)]))),128))])):e.createCommentVNode("",!0)}const re=V(W,[["render",oe],["__scopeId","data-v-77c5b72f"]]),se=e.defineComponent({name:"PooderEditor",components:{CanvasArea:y,ToolPanel:re},props:{width:{type:Number,default:1200},height:{type:Number,default:600}},setup(n){const r=e.shallowRef(null);return{editor:r,onInit:s=>{s.use(new f.BackgroundTool),s.use(new f.ImageTool),s.use(new f.WhiteInkTool),s.use(new f.DielineTool),s.use(new f.HoleTool),s.use(new f.FilmTool),r.value=s,console.log(s.getObjects())}}}}),ae={class:"pooder-editor"},le={class:"center-area"},ie={class:"right-panel"};function ce(n,r,p,s,g,_){const h=e.resolveComponent("CanvasArea"),l=e.resolveComponent("ToolPanel");return e.openBlock(),e.createElementBlock("div",ae,[e.createElementVNode("div",le,[e.createVNode(h,{width:n.width,height:n.height,onInit:n.onInit},null,8,["width","height","onInit"])]),e.createElementVNode("div",ie,[e.createVNode(l,{editor:n.editor},null,8,["editor"])])])}const de=V(se,[["render",ce],["__scopeId","data-v-b9b03377"]]);m.PooderEditor=de,Object.defineProperty(m,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,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:u}=s.value;c.value.width=p,c.value.height=u,o("canvas-ready",c.value),d=new ResizeObserver(y=>{for(const v of y){const{width:m,height:r}=v.contentRect;o("resize",m,r)}}),d.observe(s.value)}}),e.onUnmounted(()=>{d&&d.disconnect()}),(p,u)=>(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},h=_(C,[["__scopeId","data-v-dc60e8d6"]]),S={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 v=r=>{const f=new a.CanvasService(r);o.registerService(f),[new a.BackgroundTool,new a.RulerTool,new a.MirrorTool,new a.DielineTool,new a.ImageTool,new a.HoleTool].forEach(O=>{o.extensionManager.register(O)})},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",S,[e.createVNode(h,{onCanvasReady:v,onResize:m})]))}}),[["__scopeId","data-v-014c232e"]]);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"})}));

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

@@ -1,129 +1,7 @@
-import { Editor } from '../../core/src/index.ts';
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    width: {
-        type: NumberConstructor;
-        default: number;
-    };
-    height: {
-        type: NumberConstructor;
-        default: number;
-    };
-}>, {
-    editor: import('vue').ShallowRef<Editor | null, Editor | null>;
-    onInit: (instance: Editor) => void;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    width: {
-        type: NumberConstructor;
-        default: number;
-    };
-    height: {
-        type: NumberConstructor;
-        default: number;
-    };
-}>> & Readonly<{}>, {
-    width: number;
-    height: number;
-}, {}, {
-    CanvasArea: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-        width: {
-            type: NumberConstructor;
-            required: true;
-        };
-        height: {
-            type: NumberConstructor;
-            required: true;
-        };
-    }>, {
-        canvasRef: import('vue').Ref<HTMLCanvasElement | null, HTMLCanvasElement | null>;
-    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "init"[], "init", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-        width: {
-            type: NumberConstructor;
-            required: true;
-        };
-        height: {
-            type: NumberConstructor;
-            required: true;
-        };
-    }>> & Readonly<{
-        onInit?: ((...args: any[]) => any) | undefined;
-    }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-    ToolPanel: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-        editor: {
-            type: import('vue').PropType<Editor | null>;
-            default: null;
-        };
-    }>, {
-        extensionList: import('vue').Ref<{
-            name: string;
-            priority?: number | undefined;
-            options?: import('../../core/src/index.ts').ExtensionOptions | undefined;
-            schema?: Record<string | number, import('../../core/src/index.ts').OptionSchema> | undefined;
-            enabled?: boolean | undefined;
-            onCreate?: ((editor: Editor) => void) | undefined;
-            onMount?: ((editor: Editor) => void) | undefined;
-            onUpdate?: ((editor: Editor, state: import('../../core/src/index.ts').EditorState) => void) | undefined;
-            onUnmount?: ((editor: Editor) => void) | undefined;
-            onDestroy?: ((editor: Editor) => void) | undefined;
-            toJSON?: (() => any) | undefined;
-            loadFromJSON?: ((data: any) => void | Promise<void>) | undefined;
-            commands?: Record<string, import('../../core/src/index.ts').Command> | undefined;
-        }[], import('../../core/src/index.ts').Extension<import('../../core/src/index.ts').ExtensionOptions>[] | {
-            name: string;
-            priority?: number | undefined;
-            options?: import('../../core/src/index.ts').ExtensionOptions | undefined;
-            schema?: Record<string | number, import('../../core/src/index.ts').OptionSchema> | undefined;
-            enabled?: boolean | undefined;
-            onCreate?: ((editor: Editor) => void) | undefined;
-            onMount?: ((editor: Editor) => void) | undefined;
-            onUpdate?: ((editor: Editor, state: import('../../core/src/index.ts').EditorState) => void) | undefined;
-            onUnmount?: ((editor: Editor) => void) | undefined;
-            onDestroy?: ((editor: Editor) => void) | undefined;
-            toJSON?: (() => any) | undefined;
-            loadFromJSON?: ((data: any) => void | Promise<void>) | undefined;
-            commands?: Record<string, import('../../core/src/index.ts').Command> | undefined;
-        }[]>;
-        getInputType: (ext: import('../../core/src/index.ts').Extension, key: string, value: any) => string;
-        updateOption: (ext: import('../../core/src/index.ts').Extension, key: string | number, value: any) => void;
-        getMinMax: (ext: import('../../core/src/index.ts').Extension, key: string, val: number) => {
-            min: number;
-            max: number;
-            step: number;
-        };
-        formatNumber: (val: any) => any;
-        getLabel: (ext: import('../../core/src/index.ts').Extension, key: string) => string;
-        getSelectOptions: (ext: import('../../core/src/index.ts').Extension, key: string) => {
-            label: string;
-            value: any;
-        }[];
-    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-        editor: {
-            type: import('vue').PropType<Editor | null>;
-            default: null;
-        };
-    }>> & Readonly<{}>, {
-        editor: Editor | null;
-    }, {}, {
-        ColorPicker: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-            modelValue: {
-                type: StringConstructor;
-                default: string;
-            };
-        }>, {
-            hexValue: import('vue').ComputedRef<string>;
-            alphaValue: import('vue').ComputedRef<number>;
-            updateColor: (e: Event) => void;
-            updateAlpha: (e: Event) => void;
-        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("update:modelValue" | "change")[], "update:modelValue" | "change", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-            modelValue: {
-                type: StringConstructor;
-                default: string;
-            };
-        }>> & Readonly<{
-            onChange?: ((...args: any[]) => any) | undefined;
-            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-        }>, {
-            modelValue: string;
-        }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-    }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: import('vue').DefineComponent<{}, {
+    importConfig: (config: Record<string, any>) => void;
+    exportConfig: () => Record<string, any>;
+    generateCutImage: () => Promise<any>;
+    setUserImage: (url: string) => 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/src/components/CanvasArea.vue.d.ts

@@ -1,24 +1,11 @@
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    width: {
-        type: NumberConstructor;
-        required: true;
-    };
-    height: {
-        type: NumberConstructor;
-        required: true;
-    };
-}>, {
-    canvasRef: import('vue').Ref<HTMLCanvasElement | null, HTMLCanvasElement | null>;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "init"[], "init", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    width: {
-        type: NumberConstructor;
-        required: true;
-    };
-    height: {
-        type: NumberConstructor;
-        required: true;
-    };
-}>> & Readonly<{
-    onInit?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "canvas-ready": (el: HTMLCanvasElement) => any;
+    resize: (width: number, height: number) => any;
+}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{
+    "onCanvas-ready"?: ((el: HTMLCanvasElement) => any) | undefined;
+    onResize?: ((width: number, height: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    container: HTMLDivElement;
+    canvas: HTMLCanvasElement;
+}, HTMLDivElement>;
 export default _default;

package/dist/vue/src/components/ConfigurationPanel.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

package/dist/vue/src/components/ToolPanel.vue.d.ts

@@ -1,81 +1,2 @@
-import { PropType } from 'vue';
-import { Editor, Extension, OptionSchema } from '../../../core/src/index.ts';
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    editor: {
-        type: PropType<Editor | null>;
-        default: null;
-    };
-}>, {
-    extensionList: import('vue').Ref<{
-        name: string;
-        priority?: number | undefined;
-        options?: import('../../../core/src/index.ts').ExtensionOptions | undefined;
-        schema?: Record<string | number, OptionSchema> | undefined;
-        enabled?: boolean | undefined;
-        onCreate?: ((editor: Editor) => void) | undefined;
-        onMount?: ((editor: Editor) => void) | undefined;
-        onUpdate?: ((editor: Editor, state: import('../../../core/src/index.ts').EditorState) => void) | undefined;
-        onUnmount?: ((editor: Editor) => void) | undefined;
-        onDestroy?: ((editor: Editor) => void) | undefined;
-        toJSON?: (() => any) | undefined;
-        loadFromJSON?: ((data: any) => void | Promise<void>) | undefined;
-        commands?: Record<string, import('../../../core/src/index.ts').Command> | undefined;
-    }[], Extension<import('../../../core/src/index.ts').ExtensionOptions>[] | {
-        name: string;
-        priority?: number | undefined;
-        options?: import('../../../core/src/index.ts').ExtensionOptions | undefined;
-        schema?: Record<string | number, OptionSchema> | undefined;
-        enabled?: boolean | undefined;
-        onCreate?: ((editor: Editor) => void) | undefined;
-        onMount?: ((editor: Editor) => void) | undefined;
-        onUpdate?: ((editor: Editor, state: import('../../../core/src/index.ts').EditorState) => void) | undefined;
-        onUnmount?: ((editor: Editor) => void) | undefined;
-        onDestroy?: ((editor: Editor) => void) | undefined;
-        toJSON?: (() => any) | undefined;
-        loadFromJSON?: ((data: any) => void | Promise<void>) | undefined;
-        commands?: Record<string, import('../../../core/src/index.ts').Command> | undefined;
-    }[]>;
-    getInputType: (ext: Extension, key: string, value: any) => string;
-    updateOption: (ext: Extension, key: string | number, value: any) => void;
-    getMinMax: (ext: Extension, key: string, val: number) => {
-        min: number;
-        max: number;
-        step: number;
-    };
-    formatNumber: (val: any) => any;
-    getLabel: (ext: Extension, key: string) => string;
-    getSelectOptions: (ext: Extension, key: string) => {
-        label: string;
-        value: any;
-    }[];
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    editor: {
-        type: PropType<Editor | null>;
-        default: null;
-    };
-}>> & Readonly<{}>, {
-    editor: Editor | null;
-}, {}, {
-    ColorPicker: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-        modelValue: {
-            type: StringConstructor;
-            default: string;
-        };
-    }>, {
-        hexValue: import('vue').ComputedRef<string>;
-        alphaValue: import('vue').ComputedRef<number>;
-        updateColor: (e: Event) => void;
-        updateAlpha: (e: Event) => void;
-    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("update:modelValue" | "change")[], "update:modelValue" | "change", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-        modelValue: {
-            type: StringConstructor;
-            default: string;
-        };
-    }>> & Readonly<{
-        onChange?: ((...args: any[]) => any) | undefined;
-        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    }>, {
-        modelValue: string;
-    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
 export default _default;

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

@@ -1,2 +1,4 @@
 import { default as PooderEditor } from './PooderEditor.vue';
 export { PooderEditor };
+export * from '../../core/src/index.ts';
+export * from '../../kit/src/index.ts';

package/dist/vue.css

@@ -1 +1 @@
-.canvas-area[data-v-c0e5ef40]{flex:1;background:#e0e0e0;display:flex;align-items:center;justify-content:center;overflow:auto;padding:20px}.canvas-wrapper[data-v-c0e5ef40]{background:#fff;box-shadow:0 0 10px #0000001a}.color-picker[data-v-21507ccd]{display:flex;flex-direction:column}.color-picker input[type=color][data-v-21507ccd]{width:100%;height:30px;padding:0;border:none;cursor:pointer}.alpha-slider-wrap[data-v-21507ccd]{display:flex;align-items:center;margin-top:5px}.alpha-label[data-v-21507ccd]{font-size:12px;color:#666;margin-right:5px;width:15px}.alpha-slider-wrap input[type=range][data-v-21507ccd]{flex:1;margin-right:5px}.alpha-value[data-v-21507ccd]{font-size:12px;color:#666;width:30px;text-align:right}.tool-panel[data-v-77c5b72f]{padding:15px;overflow-x:auto;overflow-y:hidden;height:100%;display:flex;flex-direction:row;background:#f9f9f9}.plugin-section[data-v-77c5b72f]{width:300px;flex-shrink:0;margin-right:20px;border-right:1px solid #eee;padding-right:20px;height:100%;overflow-y:auto}.plugin-section h3[data-v-77c5b72f]{margin-top:0;margin-bottom:15px;font-size:16px;color:#333;border-bottom:2px solid #ddd;padding-bottom:5px}.config-item[data-v-77c5b72f]{margin-bottom:15px}.config-item label[data-v-77c5b72f]{display:block;margin-bottom:5px;font-size:14px;font-weight:500;color:#555}.config-item input[type=text][data-v-77c5b72f],.config-item input[type=number][data-v-77c5b72f],.config-item select[data-v-77c5b72f]{width:100%;padding:8px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box;font-size:14px}.config-item input[type=checkbox][data-v-77c5b72f]{transform:scale(1.2)}.checkbox-wrapper[data-v-77c5b72f]{padding:5px 0}.slider-container[data-v-77c5b72f]{display:flex;align-items:center;margin-top:5px}.slider-container input[type=range][data-v-77c5b72f]{flex:1;margin-right:10px}.slider-value[data-v-77c5b72f]{font-size:12px;color:#666;width:35px;text-align:right}.switch-wrapper[data-v-77c5b72f]{padding:5px 0}.switch[data-v-77c5b72f]{position:relative;display:inline-block;width:40px;height:20px}.switch input[data-v-77c5b72f]{opacity:0;width:0;height:0}.slider[data-v-77c5b72f]{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:20px}.slider[data-v-77c5b72f]:before{position:absolute;content:"";height:16px;width:16px;left:2px;bottom:2px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider[data-v-77c5b72f]{background-color:#2196f3}input:checked+.slider[data-v-77c5b72f]:before{transform:translate(20px)}.pooder-editor[data-v-b9b03377]{display:flex;flex-direction:column;width:100%;height:100%;background:#f0f2f5;box-sizing:border-box}.center-area[data-v-b9b03377]{flex:1;display:flex;flex-direction:column;position:relative;overflow:hidden}.right-panel[data-v-b9b03377]{width:100%;height:320px;background:#fff;border-top:1px solid #ddd;display:flex;flex-direction:column;z-index:10}
+.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-014c232e]{display:flex;width:100%;height:100%;overflow:hidden}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pooder/vue",
-  "version": "2.0.0",
+  "version": "3.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": "2.0.0",
-    "@pooder/core": "0.1.0"
+    "@pooder/core": "1.0.0",
+    "@pooder/kit": "3.0.0"
   },
   "peerDependencies": {
     "vue": "^3.0.0"

package/dist/vue/src/components/ColorPicker.vue.d.ts

@@ -1,22 +0,0 @@
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    modelValue: {
-        type: StringConstructor;
-        default: string;
-    };
-}>, {
-    hexValue: import('vue').ComputedRef<string>;
-    alphaValue: import('vue').ComputedRef<number>;
-    updateColor: (e: Event) => void;
-    updateAlpha: (e: Event) => void;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("update:modelValue" | "change")[], "update:modelValue" | "change", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    modelValue: {
-        type: StringConstructor;
-        default: string;
-    };
-}>> & Readonly<{
-    onChange?: ((...args: any[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}>, {
-    modelValue: string;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export default _default;