labellife-design-tool 1.0.8 → 1.1.0

package/README.md

@@ -117,6 +117,32 @@ The `CanvasEditorRef` interface provides the following properties and methods:
 - `exportToJSON()`: Export the design to a JSON file
 - `getDesign()`: Get the current design object
 - `setCanvasSize(width, height)`: Set the canvas dimensions programmatically
+- `loadDesign(jsonData)`: Load a design from JSON data (Promise-based)
+
+### Export Helpers (JSON object + Base64)
+
+In addition to the UI download helpers, the library also provides functions that return data directly (no file download):
+
+```ts
+import { exportToJSONObject, canvasToDataURL } from 'labellife-design-tool';
+```
+
+#### Get a JSON-safe design object
+
+```ts
+const designObject = exportToJSONObject(editorRef.current.getDesign());
+// designObject is a plain JSON-compatible object you can send to an API
+```
+
+#### Get a base64 data URL of the canvas
+
+```ts
+const stage = editorRef.current.stage;
+if (stage) {
+  const dataUrl = canvasToDataURL(stage, 'png', { pixelRatio: 2 });
+  // dataUrl is like: "data:image/png;base64,iVBORw0..."
+}
+```
 
 ### Canvas Size Management
 
@@ -366,6 +392,166 @@ importFromJSONData(
 | **Use Case** | User file uploads | API data, database, programmatic imports |
 | **Processing** | Identical | Identical |
 
+### Simplified Template Loading (Recommended)
+
+For the easiest template loading experience, we recommend using the new `loadDesign` method or `loadTemplateFromJSON` utility. These methods handle all the complexity internally and provide a clean, promise-based API.
+
+#### Method 1: Using loadDesign with CanvasEditor Ref
+
+This is the most straightforward approach - just pass the JSON data directly to the editor:
+
+```tsx
+import { useRef } from 'react';
+import { CanvasEditor, CanvasEditorRef } from 'labellife-design-tool';
+
+function TemplateLoader() {
+  const canvasEditorRef = useRef<CanvasEditorRef>(null);
+  
+  const loadTemplate = async (templateData: any) => {
+    try {
+      await canvasEditorRef.current?.loadDesign(templateData);
+      console.log('Template loaded successfully!');
+    } catch (error) {
+      console.error('Failed to load template:', error);
+      alert('Failed to load template: ' + error.message);
+    }
+  };
+  
+  // Example: Load template from API
+  const loadTemplateFromAPI = async (templateId: string) => {
+    try {
+      const response = await fetch(`/api/templates/${templateId}`);
+      const templateData = await response.json();
+      
+      await canvasEditorRef.current?.loadDesign(templateData);
+      console.log('Template loaded successfully!');
+    } catch (error) {
+      console.error('API error:', error);
+      alert('Failed to load template: ' + error.message);
+    }
+  };
+  
+  return (
+    <div>
+      <CanvasEditor ref={canvasEditorRef} name="Template Editor" />
+      <button onClick={() => loadTemplateFromAPI('123')}>
+        Load Template
+      </button>
+    </div>
+  );
+}
+```
+
+#### Method 2: Using loadTemplateFromJSON Utility
+
+This provides a convenient wrapper with additional error checking:
+
+```tsx
+import { useRef } from 'react';
+import { CanvasEditor, CanvasEditorRef, loadTemplateFromJSON } from 'labellife-design-tool';
+
+function TemplateLoader() {
+  const canvasEditorRef = useRef<CanvasEditorRef>(null);
+  
+  const loadTemplate = async (templateData: any) => {
+    try {
+      await loadTemplateFromJSON(canvasEditorRef, templateData);
+      console.log('Template loaded successfully!');
+    } catch (error) {
+      console.error('Failed to load template:', error);
+    }
+  };
+  
+  return <CanvasEditor ref={canvasEditorRef} name="Template Editor" />;
+}
+```
+
+#### Your Colleague's Use Case
+
+Here's how your colleague can now load templates with the simplified API:
+
+```javascript
+const loadTemplate = async (id) => {
+    try {
+        const response = await fetch(`${window.wpDesignData.baseUrl}/api/polotno/get-template/${id}/`, {
+            headers: { 'Authorization': `Bearer ${window.wpDesignData.userToken}` }
+        });
+        const templateData = await response.json();
+
+        if (templateData) {
+            const detailFileJson = templateData.details_file;
+            const responseFile = await fetch(detailFileJson);
+            const templateDataJson = await responseFile.json();
+            
+            // Simple one-line call - no callbacks needed!
+            await canvasEditorRef.current.loadDesign(templateDataJson);
+            console.log('Template loaded successfully');
+        }
+    } catch (error) {
+        console.error('Failed to load template:', error);
+        alert('Failed to load template: ' + error.message);
+    }
+};
+```
+
+**Key Benefits:**
+- **No callbacks required** - uses promises for cleaner async handling
+- **Automatic error handling** - throws descriptive errors
+- **Internal state management** - handles `setDesign` automatically
+- **History integration** - automatically saves to undo/redo history
+- **Modal integration** - uses existing TemplateInputModal for user inputs
+- **TypeScript support** - full type safety
+
+#### What is canvasEditorRef?
+
+`canvasEditorRef` is a React ref object that provides access to the CanvasEditor component's internal methods. Here's how to create and use it:
+
+```tsx
+import { useRef } from 'react';
+import { CanvasEditor, CanvasEditorRef } from 'labellife-design-tool';
+
+function MyComponent() {
+  // 1. Create the ref with proper typing
+  const canvasEditorRef = useRef<CanvasEditorRef>(null);
+  
+  // 2. Pass it to the CanvasEditor component
+  return (
+    <CanvasEditor 
+      ref={canvasEditorRef}
+      name="My Editor"
+      config={{ /* your config */ }}
+    />
+  );
+}
+```
+
+**Important Notes:**
+- The ref is `null` until the component mounts
+- Always check `canvasEditorRef.current` before using it
+- The ref provides access to methods like `loadDesign`, `exportToPNG`, etc.
+- TypeScript provides full autocomplete and type checking
+
+#### Function Signature
+
+```typescript
+loadDesign(jsonData: any): Promise<void>
+```
+
+**Parameters:**
+- `jsonData` (any): The raw JSON template data to load
+
+**Returns:**
+- `Promise<void>`: Resolves when the design is loaded, rejects on error
+
+**Behavior:**
+- Converts template format to internal CanvasDesign format
+- Shows the existing TemplateInputModal for required user inputs
+- Automatically handles optional inputs with empty values
+- Updates the editor state
+- Saves to undo/redo history
+- Throws descriptive errors for invalid data or user cancellation
+- Supports both required and optional user input fields
+
 ### Canvas to Blob Export
 
 The library provides a flexible `canvasToBlob` function that allows converting the canvas to a Blob for various use cases:

package/dist/lib/lib/index.js

@@ -2552,6 +2552,9 @@ var exportToJPG = (stage, design) => {
     document.body.removeChild(link);
   }
 };
+var exportToJSONObject = (design) => {
+  return JSON.parse(JSON.stringify(design));
+};
 var exportToJSON = (design) => {
   const json = JSON.stringify(design, null, 2);
   const blob = new Blob([json], { type: "application/json" });
@@ -2564,6 +2567,22 @@ var exportToJSON = (design) => {
   document.body.removeChild(link);
   URL.revokeObjectURL(url);
 };
+var canvasToDataURL = (stage, format = "png", options) => {
+  if (!stage) {
+    throw new Error("Stage is required");
+  }
+  const oldScale = stage.scaleX();
+  stage.scale({ x: 1, y: 1 });
+  const pixelRatio = options?.pixelRatio ?? 2;
+  const quality = options?.quality ?? 0.9;
+  const dataUrl = stage.toDataURL({
+    pixelRatio,
+    mimeType: format === "jpg" ? "image/jpeg" : "image/png",
+    quality: format === "jpg" ? quality : undefined
+  });
+  stage.scale({ x: oldScale, y: oldScale });
+  return dataUrl;
+};
 var canvasToBlob = (stage, format = "png", options) => {
   if (!stage) {
     return Promise.reject(new Error("Stage is required"));
@@ -2589,6 +2608,12 @@ var canvasToBlob = (stage, format = "png", options) => {
     resolve(new Blob([arrayBuffer], { type: mimeType }));
   });
 };
+var loadTemplateFromJSON = async (canvasEditorRef, jsonData) => {
+  if (!canvasEditorRef.current) {
+    throw new Error("Canvas editor reference is not available. Make sure the CanvasEditor component is mounted.");
+  }
+  return canvasEditorRef.current.loadDesign(jsonData);
+};
 var importFromJSONData = (jsonData, onLoad, onError, onInputsRequired) => {
   try {
     const convertedDesign = convertTemplateToCanvasDesign(jsonData);
@@ -3067,20 +3092,6 @@ var CanvasEditor = forwardRef(({
     }));
   }, []);
   const stageRef = useRef5(null);
-  useImperativeHandle(ref, () => ({
-    stage: stageRef.current,
-    exportToPNG: () => {
-      if (stageRef.current)
-        exportToPNG(stageRef.current, design);
-    },
-    exportToJPG: () => {
-      if (stageRef.current)
-        exportToJPG(stageRef.current, design);
-    },
-    exportToJSON: () => exportToJSON(design),
-    getDesign: () => design,
-    setCanvasSize
-  }), [design, setCanvasSize]);
   const fileInputRef = useRef5(null);
   const jsonInputRef = useRef5(null);
   const containerRef = useRef5(null);
@@ -3104,6 +3115,39 @@ var CanvasEditor = forwardRef(({
       setDesign(JSON.parse(JSON.stringify(history[historyIndex + 1])));
     }
   }, [history, historyIndex]);
+  useImperativeHandle(ref, () => ({
+    stage: stageRef.current,
+    exportToPNG: () => {
+      if (stageRef.current)
+        exportToPNG(stageRef.current, design);
+    },
+    exportToJPG: () => {
+      if (stageRef.current)
+        exportToJPG(stageRef.current, design);
+    },
+    exportToJSON: () => exportToJSON(design),
+    getDesign: () => design,
+    setCanvasSize,
+    loadDesign: async (jsonData) => {
+      return new Promise((resolve, reject) => {
+        importFromJSONData(jsonData, (loadedDesign) => {
+          setDesign(loadedDesign);
+          saveToHistory(loadedDesign);
+          resolve();
+        }, (error) => {
+          reject(new Error(error));
+        }, (inputs, onComplete) => {
+          setPendingInputs(inputs);
+          setShowInputModal(true);
+          window.__pendingImportComplete = (values) => {
+            onComplete(values);
+            resolve();
+          };
+          window.__pendingImportReject = reject;
+        });
+      });
+    }
+  }), [design, setCanvasSize, setDesign, saveToHistory, setShowInputModal, setPendingInputs]);
   const addText = useCallback4(() => {
     const newElement = {
       id: Date.now().toString(),
@@ -3508,6 +3552,7 @@ var CanvasEditor = forwardRef(({
     if (onComplete) {
       onComplete(values);
       delete window.__pendingImportComplete;
+      delete window.__pendingImportReject;
     }
     setPendingInputs([]);
   };
@@ -3515,6 +3560,11 @@ var CanvasEditor = forwardRef(({
     setShowInputModal(false);
     setPendingInputs([]);
     delete window.__pendingImportComplete;
+    const onReject = window.__pendingImportReject;
+    if (onReject) {
+      onReject(new Error("User cancelled template import"));
+      delete window.__pendingImportReject;
+    }
   };
   const panelConfigs = [
     {
@@ -3890,14 +3940,17 @@ initJsxCompat();
 export {
   setUnsplashAccessKey,
   replaceUserInputs,
+  loadTemplateFromJSON,
   importFromJSONData,
   importFromJSON,
   getUnsplashAccessKey,
   findRequiredInputs,
   exportToPNG,
+  exportToJSONObject,
   exportToJSON,
   exportToJPG,
   convertTemplateToCanvasDesign,
+  canvasToDataURL,
   canvasToBlob,
   UrlImageElement,
   ShapeElement,

package/dist/lib/wordpress.js

@@ -2552,6 +2552,9 @@ var exportToJPG = (stage, design) => {
     document.body.removeChild(link);
   }
 };
+var exportToJSONObject = (design) => {
+  return JSON.parse(JSON.stringify(design));
+};
 var exportToJSON = (design) => {
   const json = JSON.stringify(design, null, 2);
   const blob = new Blob([json], { type: "application/json" });
@@ -2564,6 +2567,22 @@ var exportToJSON = (design) => {
   document.body.removeChild(link);
   URL.revokeObjectURL(url);
 };
+var canvasToDataURL = (stage, format = "png", options) => {
+  if (!stage) {
+    throw new Error("Stage is required");
+  }
+  const oldScale = stage.scaleX();
+  stage.scale({ x: 1, y: 1 });
+  const pixelRatio = options?.pixelRatio ?? 2;
+  const quality = options?.quality ?? 0.9;
+  const dataUrl = stage.toDataURL({
+    pixelRatio,
+    mimeType: format === "jpg" ? "image/jpeg" : "image/png",
+    quality: format === "jpg" ? quality : undefined
+  });
+  stage.scale({ x: oldScale, y: oldScale });
+  return dataUrl;
+};
 var canvasToBlob = (stage, format = "png", options) => {
   if (!stage) {
     return Promise.reject(new Error("Stage is required"));
@@ -2589,6 +2608,12 @@ var canvasToBlob = (stage, format = "png", options) => {
     resolve(new Blob([arrayBuffer], { type: mimeType }));
   });
 };
+var loadTemplateFromJSON = async (canvasEditorRef, jsonData) => {
+  if (!canvasEditorRef.current) {
+    throw new Error("Canvas editor reference is not available. Make sure the CanvasEditor component is mounted.");
+  }
+  return canvasEditorRef.current.loadDesign(jsonData);
+};
 var importFromJSONData = (jsonData, onLoad, onError, onInputsRequired) => {
   try {
     const convertedDesign = convertTemplateToCanvasDesign(jsonData);
@@ -3067,20 +3092,6 @@ var CanvasEditor = forwardRef(({
     }));
   }, []);
   const stageRef = useRef5(null);
-  useImperativeHandle(ref, () => ({
-    stage: stageRef.current,
-    exportToPNG: () => {
-      if (stageRef.current)
-        exportToPNG(stageRef.current, design);
-    },
-    exportToJPG: () => {
-      if (stageRef.current)
-        exportToJPG(stageRef.current, design);
-    },
-    exportToJSON: () => exportToJSON(design),
-    getDesign: () => design,
-    setCanvasSize
-  }), [design, setCanvasSize]);
   const fileInputRef = useRef5(null);
   const jsonInputRef = useRef5(null);
   const containerRef = useRef5(null);
@@ -3104,6 +3115,39 @@ var CanvasEditor = forwardRef(({
       setDesign(JSON.parse(JSON.stringify(history[historyIndex + 1])));
     }
   }, [history, historyIndex]);
+  useImperativeHandle(ref, () => ({
+    stage: stageRef.current,
+    exportToPNG: () => {
+      if (stageRef.current)
+        exportToPNG(stageRef.current, design);
+    },
+    exportToJPG: () => {
+      if (stageRef.current)
+        exportToJPG(stageRef.current, design);
+    },
+    exportToJSON: () => exportToJSON(design),
+    getDesign: () => design,
+    setCanvasSize,
+    loadDesign: async (jsonData) => {
+      return new Promise((resolve, reject) => {
+        importFromJSONData(jsonData, (loadedDesign) => {
+          setDesign(loadedDesign);
+          saveToHistory(loadedDesign);
+          resolve();
+        }, (error) => {
+          reject(new Error(error));
+        }, (inputs, onComplete) => {
+          setPendingInputs(inputs);
+          setShowInputModal(true);
+          window.__pendingImportComplete = (values) => {
+            onComplete(values);
+            resolve();
+          };
+          window.__pendingImportReject = reject;
+        });
+      });
+    }
+  }), [design, setCanvasSize, setDesign, saveToHistory, setShowInputModal, setPendingInputs]);
   const addText = useCallback4(() => {
     const newElement = {
       id: Date.now().toString(),
@@ -3508,6 +3552,7 @@ var CanvasEditor = forwardRef(({
     if (onComplete) {
       onComplete(values);
       delete window.__pendingImportComplete;
+      delete window.__pendingImportReject;
     }
     setPendingInputs([]);
   };
@@ -3515,6 +3560,11 @@ var CanvasEditor = forwardRef(({
     setShowInputModal(false);
     setPendingInputs([]);
     delete window.__pendingImportComplete;
+    const onReject = window.__pendingImportReject;
+    if (onReject) {
+      onReject(new Error("User cancelled template import"));
+      delete window.__pendingImportReject;
+    }
   };
   const panelConfigs = [
     {
@@ -3942,15 +3992,18 @@ function initWordPressCanvasEditor(containerId, props) {
 export {
   setUnsplashAccessKey,
   replaceUserInputs,
+  loadTemplateFromJSON,
   initWordPressCanvasEditor,
   importFromJSONData,
   importFromJSON,
   getUnsplashAccessKey,
   findRequiredInputs,
   exportToPNG,
+  exportToJSONObject,
   exportToJSON,
   exportToJPG,
   convertTemplateToCanvasDesign,
+  canvasToDataURL,
   canvasToBlob,
   UrlImageElement,
   ShapeElement,

package/dist/types/CanvasEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CanvasEditor.d.ts","sourceRoot":"","sources":["../../src/CanvasEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoF,MAAM,OAAO,CAAC;AAGzG,OAAO,KAAK,MAAM,OAAO,CAAC;AA0C1B,OAAO,EAEL,YAAY,EAKb,MAAM,SAAS,CAAC;AAiCjB,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAGxC,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC;IAC1B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,SAAS,EAAE,MAAM,YAAY,CAAC;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACxD;AAED,QAAA,MAAM,YAAY;UAAuC,MAAM;aAAW,MAAM;yCAuoC9E,CAAC;AAEH,eAAe,YAAY,CAAC"}
+{"version":3,"file":"CanvasEditor.d.ts","sourceRoot":"","sources":["../../src/CanvasEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoF,MAAM,OAAO,CAAC;AAGzG,OAAO,KAAK,MAAM,OAAO,CAAC;AA0C1B,OAAO,EAEL,YAAY,EAKb,MAAM,SAAS,CAAC;AAiCjB,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAGxC,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC;IAC1B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,SAAS,EAAE,MAAM,YAAY,CAAC;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACxD;AAED,QAAA,MAAM,YAAY;UAAuC,MAAM;aAAW,MAAM;yCAwqC9E,CAAC;AAEH,eAAe,YAAY,CAAC"}

package/dist/types/lib/index.d.ts

@@ -10,11 +10,14 @@ export interface CanvasEditorRef {
     exportToJPG: () => void;
     exportToJSON: () => void;
     getDesign: () => CanvasDesign;
+    setCanvasSize: (width: number, height: number) => void;
+    loadDesign: (jsonData: any) => Promise<void>;
 }
 export { default as CanvasEditor } from '../CanvasEditor';
 export * from '../types';
-export { exportToPNG, exportToJPG, exportToJSON, importFromJSON, importFromJSONData, // New: Import JSON data directly (no file needed)
-findRequiredInputs, replaceUserInputs, convertTemplateToCanvasDesign, canvasToBlob, } from '../utils/exportImportUtils';
+export { exportToPNG, exportToJPG, exportToJSON, exportToJSONObject, importFromJSON, importFromJSONData, // Import JSON data directly (no file needed)
+loadTemplateFromJSON, // Simplified template loading utility
+findRequiredInputs, replaceUserInputs, convertTemplateToCanvasDesign, canvasToDataURL, canvasToBlob, } from '../utils/exportImportUtils';
 export * from '../elements';
 export { FONT_FAMILIES, DEFAULT_COLORS, CANVAS_PRESETS } from '../constants';
 export { setUnsplashAccessKey, getUnsplashAccessKey } from '../config';

package/dist/types/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AASxC,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC;IAC1B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,SAAS,EAAE,MAAM,YAAY,CAAC;CAC/B;AAGD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAG1D,cAAc,UAAU,CAAC;AAGzB,OAAO,EACL,WAAW,EACX,WAAW,EACX,YAAY,EACZ,cAAc,EACd,kBAAkB,EAAE,kDAAkD;AACtE,kBAAkB,EAClB,iBAAiB,EACjB,6BAA6B,EAC7B,YAAY,GACb,MAAM,4BAA4B,CAAC;AAGpC,cAAc,aAAa,CAAC;AAG5B,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG7E,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AASxC,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC;IAC1B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,SAAS,EAAE,MAAM,YAAY,CAAC;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvD,UAAU,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9C;AAGD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAG1D,cAAc,UAAU,CAAC;AAGzB,OAAO,EACL,WAAW,EACX,WAAW,EACX,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,kBAAkB,EAAE,6CAA6C;AACjE,oBAAoB,EAAE,sCAAsC;AAC5D,kBAAkB,EAClB,iBAAiB,EACjB,6BAA6B,EAC7B,eAAe,EACf,YAAY,GACb,MAAM,4BAA4B,CAAC;AAGpC,cAAc,aAAa,CAAC;AAG5B,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG7E,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC"}

package/dist/types/utils/exportImportUtils.d.ts

@@ -1,5 +1,6 @@
 import { type CanvasDesign } from "../types/CanvasDesign";
 import { type UserInputItem } from "../types/UserInput";
+import { type CanvasEditorRef } from "../lib";
 import Konva from "konva";
 /**
  * Converts a template JSON format to CanvasDesign format
@@ -19,6 +20,7 @@ export declare function findRequiredInputs(design: CanvasDesign): UserInputItem[
 export declare function replaceUserInputs(design: CanvasDesign, collectedInputs: Record<string, any>): CanvasDesign;
 export declare const exportToPNG: (stage: Konva.Stage, design: CanvasDesign) => void;
 export declare const exportToJPG: (stage: Konva.Stage, design: CanvasDesign) => void;
+export declare const exportToJSONObject: (design: CanvasDesign) => CanvasDesign;
 export declare const exportToJSON: (design: CanvasDesign) => void;
 /**
  * Converts the canvas to a Blob that can be used for various purposes
@@ -27,6 +29,10 @@ export declare const exportToJSON: (design: CanvasDesign) => void;
  * @param options - Additional options for conversion
  * @returns Promise that resolves with a Blob
  */
+export declare const canvasToDataURL: (stage: Konva.Stage, format?: "png" | "jpg", options?: {
+    quality?: number;
+    pixelRatio?: number;
+}) => string;
 export declare const canvasToBlob: (stage: Konva.Stage, format?: "png" | "jpg", options?: {
     quality?: number;
     pixelRatio?: number;
@@ -126,6 +132,39 @@ export declare const canvasToBlob: (stage: Konva.Stage, format?: "png" | "jpg",
  * @see findRequiredInputs - User input detection
  * @see replaceUserInputs - Input replacement logic
  */
+/**
+ * Simplified function to load a template from JSON data using a CanvasEditor ref
+ *
+ * This is a convenience wrapper around the loadDesign method that provides
+ * a cleaner API for loading templates from external sources.
+ *
+ * @param canvasEditorRef - React ref object pointing to a CanvasEditor instance
+ * @param jsonData - The raw JSON template data to load
+ *
+ * @example
+ * ```typescript
+ * import { useRef } from 'react';
+ * import { CanvasEditor, CanvasEditorRef, loadTemplateFromJSON } from 'labellife-design-tool';
+ *
+ * function MyComponent() {
+ *   const canvasEditorRef = useRef<CanvasEditorRef>(null);
+ *
+ *   const loadTemplate = async (templateData: any) => {
+ *     try {
+ *       await loadTemplateFromJSON(canvasEditorRef, templateData);
+ *       console.log('Template loaded successfully!');
+ *     } catch (error) {
+ *       console.error('Failed to load template:', error);
+ *     }
+ *   };
+ *
+ *   return (
+ *     <CanvasEditor ref={canvasEditorRef} />
+ *   );
+ * }
+ * ```
+ */
+export declare const loadTemplateFromJSON: (canvasEditorRef: React.RefObject<CanvasEditorRef>, jsonData: any) => Promise<void>;
 export declare const importFromJSONData: (jsonData: any, onLoad: (design: CanvasDesign) => void, onError: (message: string) => void, onInputsRequired?: (inputs: UserInputItem[], onComplete: (values: Record<string, any>) => void) => void) => void;
 export declare const importFromJSON: (event: React.ChangeEvent<HTMLInputElement>, onLoad: (design: CanvasDesign) => void, onError: (message: string) => void, onInputsRequired?: (inputs: UserInputItem[], onComplete: (values: Record<string, any>) => void) => void) => void;
 //# sourceMappingURL=exportImportUtils.d.ts.map

package/dist/types/utils/exportImportUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"exportImportUtils.d.ts","sourceRoot":"","sources":["../../../src/utils/exportImportUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE1D,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAExD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;GAMG;AACH,wBAAgB,6BAA6B,CAAC,IAAI,EAAE,GAAG,GAAG,YAAY,CAuHrE;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,GAAG,aAAa,EAAE,CAsHxE;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAC7B,MAAM,EAAE,YAAY,EACpB,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GACrC,YAAY,CA6Nd;AAGD,eAAO,MAAM,WAAW,GAAI,OAAO,KAAK,CAAC,KAAK,EAAE,QAAQ,YAAY,SAanE,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,KAAK,CAAC,KAAK,EAAE,QAAQ,YAAY,SAiBnE,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,QAAQ,YAAY,SAWhD,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,GACrB,OAAO,KAAK,CAAC,KAAK,EAClB,SAAQ,KAAK,GAAG,KAAa,EAC7B,UAAU;IACN,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB,KACF,OAAO,CAAC,IAAI,CAsCd,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8FG;AACH,eAAO,MAAM,kBAAkB,GAC3B,UAAU,GAAG,EACb,QAAQ,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,EACtC,SAAS,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,EAClC,mBAAmB,CAAC,MAAM,EAAE,aAAa,EAAE,EAAE,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,KAAK,IAAI,SAuB1G,CAAC;AAEF,eAAO,MAAM,cAAc,GACvB,OAAO,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,EAC1C,QAAQ,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,EACtC,SAAS,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,EAClC,mBAAmB,CAAC,MAAM,EAAE,aAAa,EAAE,EAAE,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,KAAK,IAAI,SA0C1G,CAAC"}
+{"version":3,"file":"exportImportUtils.d.ts","sourceRoot":"","sources":["../../../src/utils/exportImportUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE1D,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAExD,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;GAMG;AACH,wBAAgB,6BAA6B,CAAC,IAAI,EAAE,GAAG,GAAG,YAAY,CAuHrE;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,YAAY,GAAG,aAAa,EAAE,CAsHxE;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAC7B,MAAM,EAAE,YAAY,EACpB,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GACrC,YAAY,CA6Nd;AAGD,eAAO,MAAM,WAAW,GAAI,OAAO,KAAK,CAAC,KAAK,EAAE,QAAQ,YAAY,SAanE,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,KAAK,CAAC,KAAK,EAAE,QAAQ,YAAY,SAiBnE,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,QAAQ,YAAY,KAAG,YAEzD,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,QAAQ,YAAY,SAWhD,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,GACxB,OAAO,KAAK,CAAC,KAAK,EAClB,SAAQ,KAAK,GAAG,KAAa,EAC7B,UAAU;IACN,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB,KACF,MAoBF,CAAC;AAEF,eAAO,MAAM,YAAY,GACrB,OAAO,KAAK,CAAC,KAAK,EAClB,SAAQ,KAAK,GAAG,KAAa,EAC7B,UAAU;IACN,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB,KACF,OAAO,CAAC,IAAI,CAsCd,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8FG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,oBAAoB,GAC/B,iBAAiB,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,EACjD,UAAU,GAAG,KACZ,OAAO,CAAC,IAAI,CAMd,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC3B,UAAU,GAAG,EACb,QAAQ,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,EACtC,SAAS,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,EAClC,mBAAmB,CAAC,MAAM,EAAE,aAAa,EAAE,EAAE,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,KAAK,IAAI,SAuB1G,CAAC;AAEF,eAAO,MAAM,cAAc,GACvB,OAAO,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,EAC1C,QAAQ,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,EACtC,SAAS,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,EAClC,mBAAmB,CAAC,MAAM,EAAE,aAAa,EAAE,EAAE,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,KAAK,IAAI,SA0C1G,CAAC"}

package/package.json

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