labellife-design-tool 1.0.7 → 1.0.9

package/README.md

@@ -116,6 +116,113 @@ The `CanvasEditorRef` interface provides the following properties and methods:
 - `exportToJPG()`: Export the canvas to a JPG file
 - `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)
+
+### Canvas Size Management
+
+The `setCanvasSize` method allows you to programmatically change the canvas dimensions. This is useful for responsive designs, template switching, or custom size inputs.
+
+```tsx
+import { useRef } from 'react';
+import { CanvasEditor, CanvasEditorRef } from 'labellife-design-tool';
+
+function CanvasSizeExample() {
+  const editorRef = useRef<CanvasEditorRef>(null);
+  
+  const handleSizeChange = (width: number, height: number) => {
+    if (editorRef.current) {
+      // Set canvas to custom dimensions
+      editorRef.current.setCanvasSize(width, height);
+    }
+  };
+  
+  const presetSizes = [
+    { name: 'Instagram Post', width: 1080, height: 1080 },
+    { name: 'Instagram Story', width: 1080, height: 1920 },
+    { name: 'Facebook Post', width: 1200, height: 630 },
+    { name: 'YouTube Thumbnail', width: 1280, height: 720 },
+  ];
+  
+  return (
+    <div>
+      <CanvasEditor
+        ref={editorRef}
+        name="Resizable Canvas"
+        config={{
+          export: { png: true, jpg: true, json: true },
+        }}
+      />
+      
+      <div className="size-controls">
+        <h3>Canvas Size Controls</h3>
+        
+        {/* Preset sizes */}
+        <div>
+          <h4>Preset Sizes:</h4>
+          {presetSizes.map((preset) => (
+            <button
+              key={preset.name}
+              onClick={() => handleSizeChange(preset.width, preset.height)}
+            >
+              {preset.name} ({preset.width}x{preset.height})
+            </button>
+          ))}
+        </div>
+        
+        {/* Custom size input */}
+        <div>
+          <h4>Custom Size:</h4>
+          <input
+            type="number"
+            placeholder="Width"
+            id="custom-width"
+            onChange={(e) => {
+              const width = parseInt(e.target.value);
+              const height = parseInt((document.getElementById('custom-height') as HTMLInputElement)?.value || '600');
+              if (width > 0) handleSizeChange(width, height);
+            }}
+          />
+          <input
+            type="number"
+            placeholder="Height"
+            id="custom-height"
+            onChange={(e) => {
+              const height = parseInt(e.target.value);
+              const width = parseInt((document.getElementById('custom-width') as HTMLInputElement)?.value || '800');
+              if (height > 0) handleSizeChange(width, height);
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+```
+
+#### Function Signature
+
+```typescript
+setCanvasSize(width: number, height: number): void
+```
+
+**Parameters:**
+- `width` (number): The desired canvas width in pixels. Minimum value is 1.
+- `height` (number): The desired canvas height in pixels. Minimum value is 1.
+
+**Behavior:**
+- Updates the canvas dimensions immediately
+- Ensures minimum dimensions of 1x1 pixel to prevent invalid canvas sizes
+- The change is persisted in the design state and included in exports
+- Elements on the canvas maintain their relative positions
+- The canvas is automatically re-rendered with the new dimensions
+
+**Use Cases:**
+- Template switching with different aspect ratios
+- Responsive design tools
+- Custom size input forms
+- Batch resizing operations
+- Integration with external size selection tools
 
 ### Advanced Usage with Types
 
@@ -260,6 +367,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

@@ -2589,6 +2589,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);
@@ -3059,20 +3065,14 @@ var CanvasEditor = forwardRef(({
   const [pendingInputs, setPendingInputs] = useState3([]);
   const [showJsonModal, setShowJsonModal] = useState3(false);
   const [jsonInputText, setJsonInputText] = useState3("");
+  const setCanvasSize = useCallback4((width, height) => {
+    setDesign((prev) => ({
+      ...prev,
+      width: Math.max(1, width),
+      height: Math.max(1, height)
+    }));
+  }, []);
   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
-  }), [design]);
   const fileInputRef = useRef5(null);
   const jsonInputRef = useRef5(null);
   const containerRef = useRef5(null);
@@ -3096,6 +3096,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(),
@@ -3500,6 +3533,7 @@ var CanvasEditor = forwardRef(({
     if (onComplete) {
       onComplete(values);
       delete window.__pendingImportComplete;
+      delete window.__pendingImportReject;
     }
     setPendingInputs([]);
   };
@@ -3507,6 +3541,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 = [
     {
@@ -3882,6 +3921,7 @@ initJsxCompat();
 export {
   setUnsplashAccessKey,
   replaceUserInputs,
+  loadTemplateFromJSON,
   importFromJSONData,
   importFromJSON,
   getUnsplashAccessKey,

package/dist/lib/wordpress.js

@@ -2589,6 +2589,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);
@@ -3059,20 +3065,14 @@ var CanvasEditor = forwardRef(({
   const [pendingInputs, setPendingInputs] = useState3([]);
   const [showJsonModal, setShowJsonModal] = useState3(false);
   const [jsonInputText, setJsonInputText] = useState3("");
+  const setCanvasSize = useCallback4((width, height) => {
+    setDesign((prev) => ({
+      ...prev,
+      width: Math.max(1, width),
+      height: Math.max(1, height)
+    }));
+  }, []);
   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
-  }), [design]);
   const fileInputRef = useRef5(null);
   const jsonInputRef = useRef5(null);
   const containerRef = useRef5(null);
@@ -3096,6 +3096,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(),
@@ -3500,6 +3533,7 @@ var CanvasEditor = forwardRef(({
     if (onComplete) {
       onComplete(values);
       delete window.__pendingImportComplete;
+      delete window.__pendingImportReject;
     }
     setPendingInputs([]);
   };
@@ -3507,6 +3541,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 = [
     {
@@ -3934,6 +3973,7 @@ function initWordPressCanvasEditor(containerId, props) {
 export {
   setUnsplashAccessKey,
   replaceUserInputs,
+  loadTemplateFromJSON,
   initWordPressCanvasEditor,
   importFromJSONData,
   importFromJSON,

package/dist/types/CanvasEditor.d.ts

@@ -8,6 +8,7 @@ export interface CanvasEditorRef {
     exportToJPG: () => void;
     exportToJSON: () => void;
     getDesign: () => CanvasDesign;
+    setCanvasSize: (width: number, height: number) => void;
 }
 declare const CanvasEditor: React.ForwardRefExoticComponent<{
     name: string;

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;CAC/B;AAED,QAAA,MAAM,YAAY;UAAuC,MAAM;aAAW,MAAM;yCA6nC9E,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,10 +10,13 @@ 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)
+export { exportToPNG, exportToJPG, exportToJSON, importFromJSON, importFromJSONData, // Import JSON data directly (no file needed)
+loadTemplateFromJSON, // Simplified template loading utility
 findRequiredInputs, replaceUserInputs, convertTemplateToCanvasDesign, canvasToBlob, } from '../utils/exportImportUtils';
 export * from '../elements';
 export { FONT_FAMILIES, DEFAULT_COLORS, CANVAS_PRESETS } from '../constants';

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,cAAc,EACd,kBAAkB,EAAE,6CAA6C;AACjE,oBAAoB,EAAE,sCAAsC;AAC5D,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"}

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
@@ -126,6 +127,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,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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.7",
+  "version": "1.0.9",
   "description": "Professional canvas editor built with React, TypeScript, and Konva",
   "main": "./dist/lib/index.js",
   "module": "./dist/lib/index.js",

package/dist/lib/CanvasEditor.d.ts

@@ -1,17 +0,0 @@
-import React from "react";
-import Konva from "konva";
-import { CanvasDesign } from "./types";
-import { Config } from "./types/Config";
-export interface CanvasEditorRef {
-    stage: Konva.Stage | null;
-    exportToPNG: () => void;
-    exportToJPG: () => void;
-    exportToJSON: () => void;
-    getDesign: () => CanvasDesign;
-}
-declare const CanvasEditor: React.ForwardRefExoticComponent<{
-    name: string;
-    config?: Config;
-} & React.RefAttributes<CanvasEditorRef>>;
-export default CanvasEditor;
-//# sourceMappingURL=CanvasEditor.d.ts.map

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

@@ -1 +0,0 @@
-{"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;AAyC1B,OAAO,EAEL,YAAY,EAKb,MAAM,SAAS,CAAC;AAgCjB,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;CAC/B;AAED,QAAA,MAAM,YAAY;UAAuC,MAAM;aAAW,MAAM;yCA29B9E,CAAC;AAEH,eAAe,YAAY,CAAC"}

package/dist/lib/components/Header.d.ts

@@ -1,19 +0,0 @@
-import React from 'react';
-import { ActivePanelId } from '../types';
-import { NavbarConfig } from '../types/Config';
-export interface HeaderProps {
-    name?: string;
-    zoom: number;
-    historyIndex: number;
-    historyLength: number;
-    onUndo: () => void;
-    onRedo: () => void;
-    onZoomIn: () => void;
-    onZoomOut: () => void;
-    onZoomReset: () => void;
-    onSetActivePanel: (panel: ActivePanelId | "export") => void;
-    navbarConfig?: NavbarConfig;
-}
-export declare const Header: React.FC<HeaderProps>;
-export default Header;
-//# sourceMappingURL=Header.d.ts.map

package/dist/lib/components/Header.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,EAAE,YAAY,EAAiB,MAAM,iBAAiB,CAAC;AAE9D,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,gBAAgB,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,QAAQ,KAAK,IAAI,CAAC;IAC5D,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAgKxC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/lib/components/LeftMenu.d.ts

@@ -1,13 +0,0 @@
-import React from "react";
-import { ToolType, ActivePanelId } from "../types";
-import { Config } from "../types/Config";
-export interface LeftMenuProps {
-    tool: ToolType;
-    activePanel: ActivePanelId;
-    onSetTool: (tool: ToolType) => void;
-    onSetActivePanel: (panel: ActivePanelId) => void;
-    config?: Config;
-}
-export declare const LeftMenu: React.FC<LeftMenuProps>;
-export default LeftMenu;
-//# sourceMappingURL=LeftMenu.d.ts.map

package/dist/lib/components/LeftMenu.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LeftMenu.d.ts","sourceRoot":"","sources":["../../../src/components/LeftMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAWzC,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,QAAQ,CAAC;IACf,WAAW,EAAE,aAAa,CAAC;IAC3B,SAAS,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACpC,gBAAgB,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAqH5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/lib/components/TemplateInputModal.d.ts

@@ -1,10 +0,0 @@
-import React from "react";
-import { UserInputItem } from "../types/UserInput";
-interface TemplateInputModalProps {
-    inputs: UserInputItem[];
-    onComplete: (values: Record<string, any>) => void;
-    onCancel: () => void;
-}
-declare const TemplateInputModal: React.FC<TemplateInputModalProps>;
-export default TemplateInputModal;
-//# sourceMappingURL=TemplateInputModal.d.ts.map