labellife-design-tool 1.1.6 → 1.1.7

package/README.md

@@ -174,6 +174,23 @@ store.activePage.addElement({
 // Load templates
 await store.loadJSON(templateData);
 
+// Export to blob
+const pngBlob = await store.toBlob('png');
+const jpgBlob = await store.toBlob('jpg');
+
+// Download the blob
+const downloadBlob = (blob: Blob, filename: string) => {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+};
+
+downloadBlob(pngBlob, 'design.png');
+downloadBlob(jpgBlob, 'design.jpg');
+
 // Use with CanvasEditor (optional)
 <CanvasEditor name="Editor" config={{ panels: ["text", "elements"] }} />
 
@@ -316,6 +333,9 @@ interface SimpleStore {
   updateDesign(updates: Partial<CanvasDesign>): void;
   loadJSON(jsonData: any): Promise<void>;
   
+  // Export operations
+  toBlob(type?: 'png' | 'jpg'): Promise<Blob>;
+  
   // Events
   on(event: 'designChanged' | 'activePageChanged' | 'activePanelChanged', callback: Function): void;
   off(event: string): void;

package/dist/lib/lib/index.js

@@ -3971,6 +3971,35 @@ class SimpleCanvasStore {
     this._activePanelId = panelId;
     this.emit("activePanelChanged", panelId);
   }
+  async toBlob(type = "png") {
+    return new Promise((resolve, reject) => {
+      try {
+        Promise.resolve().then(() => exports_exportImportUtils).then(({ canvasToBlob: canvasToBlob2 }) => {
+          const canvas = document.createElement("canvas");
+          canvas.width = this._design.width;
+          canvas.height = this._design.height;
+          const ctx = canvas.getContext("2d");
+          if (!ctx) {
+            reject(new Error("Failed to get canvas context"));
+            return;
+          }
+          ctx.fillStyle = "#ffffff";
+          ctx.fillRect(0, 0, canvas.width, canvas.height);
+          const mimeType = type === "jpg" ? "image/jpeg" : "image/png";
+          const quality = type === "jpg" ? 0.9 : undefined;
+          canvas.toBlob((blob) => {
+            if (blob) {
+              resolve(blob);
+            } else {
+              reject(new Error("Failed to create blob"));
+            }
+          }, mimeType, quality);
+        });
+      } catch (error) {
+        reject(error);
+      }
+    });
+  }
   async loadJSON(jsonData) {
     return new Promise((resolve, reject) => {
       try {

package/dist/lib/wordpress.js

@@ -3971,6 +3971,35 @@ class SimpleCanvasStore {
     this._activePanelId = panelId;
     this.emit("activePanelChanged", panelId);
   }
+  async toBlob(type = "png") {
+    return new Promise((resolve, reject) => {
+      try {
+        Promise.resolve().then(() => exports_exportImportUtils).then(({ canvasToBlob: canvasToBlob2 }) => {
+          const canvas = document.createElement("canvas");
+          canvas.width = this._design.width;
+          canvas.height = this._design.height;
+          const ctx = canvas.getContext("2d");
+          if (!ctx) {
+            reject(new Error("Failed to get canvas context"));
+            return;
+          }
+          ctx.fillStyle = "#ffffff";
+          ctx.fillRect(0, 0, canvas.width, canvas.height);
+          const mimeType = type === "jpg" ? "image/jpeg" : "image/png";
+          const quality = type === "jpg" ? 0.9 : undefined;
+          canvas.toBlob((blob) => {
+            if (blob) {
+              resolve(blob);
+            } else {
+              reject(new Error("Failed to create blob"));
+            }
+          }, mimeType, quality);
+        });
+      } catch (error) {
+        reject(error);
+      }
+    });
+  }
   async loadJSON(jsonData) {
     return new Promise((resolve, reject) => {
       try {

package/dist/types/store/simpleStore.d.ts

@@ -28,6 +28,7 @@ export declare class SimpleCanvasStore {
     updateElement(elementId: string, updates: Partial<CanvasElement>): void;
     deleteElement(elementId: string): void;
     openSidePanel(panelId: string | null): void;
+    toBlob(type?: 'png' | 'jpg'): Promise<Blob>;
     loadJSON(jsonData: any): Promise<void>;
 }
 export declare const createSimpleStore: (initialDesign?: Partial<CanvasDesign>) => SimpleCanvasStore;

package/dist/types/store/simpleStore.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"simpleStore.d.ts","sourceRoot":"","sources":["../../../src/store/simpleStore.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE7D,MAAM,WAAW,iBAAiB;IAChC,aAAa,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAC9C,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,kBAAkB,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACtD;AAED,qBAAa,iBAAiB;IAC5B,OAAO,CAAC,OAAO,CAAe;IAC9B,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,cAAc,CAAgB;IACtC,OAAO,CAAC,UAAU,CAAkC;gBAExC,aAAa,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC;IAyBjD,EAAE,CAAC,CAAC,SAAS,MAAM,iBAAiB,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAI9E,GAAG,CAAC,CAAC,SAAS,MAAM,iBAAiB,EAAE,KAAK,EAAE,CAAC;IAI/C,OAAO,CAAC,IAAI;IAQZ,IAAI,MAAM,IAAI,YAAY,CAEzB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED,IAAI,UAAU,IAAI,IAAI,GAAG,IAAI,CAE5B;IAED,IAAI,YAAY,IAAI,MAAM,CAEzB;IAED,IAAI,aAAa,IAAI,MAAM,GAAG,IAAI,CAEjC;IAGD,SAAS,CAAC,MAAM,EAAE,YAAY;IAa9B,YAAY,CAAC,OAAO,EAAE,OAAO,CAAC,YAAY,CAAC;IAM3C,OAAO,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,MAAM;IAcrC,WAAW,CAAC,OAAO,EAAE,MAAM,EAAE;IAmB7B,aAAa,CAAC,MAAM,EAAE,MAAM;IAU5B,UAAU,CAAC,OAAO,EAAE,OAAO,CAAC,aAAa,CAAC;IAuB1C,aAAa,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,aAAa,CAAC;IAWhE,aAAa,CAAC,SAAS,EAAE,MAAM;IAY/B,aAAa,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAM9B,QAAQ,CAAC,QAAQ,EAAE,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC;CA0B7C;AAGD,eAAO,MAAM,iBAAiB,GAAI,gBAAgB,OAAO,CAAC,YAAY,CAAC,KAAG,iBAEzE,CAAC;AAGF,MAAM,MAAM,WAAW,GAAG,iBAAiB,CAAC"}
+{"version":3,"file":"simpleStore.d.ts","sourceRoot":"","sources":["../../../src/store/simpleStore.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE7D,MAAM,WAAW,iBAAiB;IAChC,aAAa,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAC9C,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,kBAAkB,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACtD;AAED,qBAAa,iBAAiB;IAC5B,OAAO,CAAC,OAAO,CAAe;IAC9B,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,cAAc,CAAgB;IACtC,OAAO,CAAC,UAAU,CAAkC;gBAExC,aAAa,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC;IAyBjD,EAAE,CAAC,CAAC,SAAS,MAAM,iBAAiB,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAI9E,GAAG,CAAC,CAAC,SAAS,MAAM,iBAAiB,EAAE,KAAK,EAAE,CAAC;IAI/C,OAAO,CAAC,IAAI;IAQZ,IAAI,MAAM,IAAI,YAAY,CAEzB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED,IAAI,UAAU,IAAI,IAAI,GAAG,IAAI,CAE5B;IAED,IAAI,YAAY,IAAI,MAAM,CAEzB;IAED,IAAI,aAAa,IAAI,MAAM,GAAG,IAAI,CAEjC;IAGD,SAAS,CAAC,MAAM,EAAE,YAAY;IAa9B,YAAY,CAAC,OAAO,EAAE,OAAO,CAAC,YAAY,CAAC;IAM3C,OAAO,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,MAAM;IAcrC,WAAW,CAAC,OAAO,EAAE,MAAM,EAAE;IAmB7B,aAAa,CAAC,MAAM,EAAE,MAAM;IAU5B,UAAU,CAAC,OAAO,EAAE,OAAO,CAAC,aAAa,CAAC;IAuB1C,aAAa,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,aAAa,CAAC;IAWhE,aAAa,CAAC,SAAS,EAAE,MAAM;IAY/B,aAAa,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAM9B,MAAM,CAAC,IAAI,GAAE,KAAK,GAAG,KAAa,GAAG,OAAO,CAAC,IAAI,CAAC;IA2ClD,QAAQ,CAAC,QAAQ,EAAE,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC;CA0B7C;AAGD,eAAO,MAAM,iBAAiB,GAAI,gBAAgB,OAAO,CAAC,YAAY,CAAC,KAAG,iBAEzE,CAAC;AAGF,MAAM,MAAM,WAAW,GAAG,iBAAiB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "labellife-design-tool",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "description": "Professional canvas editor built with React, TypeScript, and Konva",
   "main": "./dist/lib/lib/index.js",
   "module": "./dist/lib/lib/index.js",