labellife-design-tool 1.0.8 → 1.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -117,6 +117,7 @@ The `CanvasEditorRef` interface provides the following properties and methods:
117
117
  - `exportToJSON()`: Export the design to a JSON file
118
118
  - `getDesign()`: Get the current design object
119
119
  - `setCanvasSize(width, height)`: Set the canvas dimensions programmatically
120
+ - `loadDesign(jsonData)`: Load a design from JSON data (Promise-based)
120
121
 
121
122
  ### Canvas Size Management
122
123
 
@@ -366,6 +367,166 @@ importFromJSONData(
366
367
  | **Use Case** | User file uploads | API data, database, programmatic imports |
367
368
  | **Processing** | Identical | Identical |
368
369
 
370
+ ### Simplified Template Loading (Recommended)
371
+
372
+ 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.
373
+
374
+ #### Method 1: Using loadDesign with CanvasEditor Ref
375
+
376
+ This is the most straightforward approach - just pass the JSON data directly to the editor:
377
+
378
+ ```tsx
379
+ import { useRef } from 'react';
380
+ import { CanvasEditor, CanvasEditorRef } from 'labellife-design-tool';
381
+
382
+ function TemplateLoader() {
383
+ const canvasEditorRef = useRef<CanvasEditorRef>(null);
384
+
385
+ const loadTemplate = async (templateData: any) => {
386
+ try {
387
+ await canvasEditorRef.current?.loadDesign(templateData);
388
+ console.log('Template loaded successfully!');
389
+ } catch (error) {
390
+ console.error('Failed to load template:', error);
391
+ alert('Failed to load template: ' + error.message);
392
+ }
393
+ };
394
+
395
+ // Example: Load template from API
396
+ const loadTemplateFromAPI = async (templateId: string) => {
397
+ try {
398
+ const response = await fetch(`/api/templates/${templateId}`);
399
+ const templateData = await response.json();
400
+
401
+ await canvasEditorRef.current?.loadDesign(templateData);
402
+ console.log('Template loaded successfully!');
403
+ } catch (error) {
404
+ console.error('API error:', error);
405
+ alert('Failed to load template: ' + error.message);
406
+ }
407
+ };
408
+
409
+ return (
410
+ <div>
411
+ <CanvasEditor ref={canvasEditorRef} name="Template Editor" />
412
+ <button onClick={() => loadTemplateFromAPI('123')}>
413
+ Load Template
414
+ </button>
415
+ </div>
416
+ );
417
+ }
418
+ ```
419
+
420
+ #### Method 2: Using loadTemplateFromJSON Utility
421
+
422
+ This provides a convenient wrapper with additional error checking:
423
+
424
+ ```tsx
425
+ import { useRef } from 'react';
426
+ import { CanvasEditor, CanvasEditorRef, loadTemplateFromJSON } from 'labellife-design-tool';
427
+
428
+ function TemplateLoader() {
429
+ const canvasEditorRef = useRef<CanvasEditorRef>(null);
430
+
431
+ const loadTemplate = async (templateData: any) => {
432
+ try {
433
+ await loadTemplateFromJSON(canvasEditorRef, templateData);
434
+ console.log('Template loaded successfully!');
435
+ } catch (error) {
436
+ console.error('Failed to load template:', error);
437
+ }
438
+ };
439
+
440
+ return <CanvasEditor ref={canvasEditorRef} name="Template Editor" />;
441
+ }
442
+ ```
443
+
444
+ #### Your Colleague's Use Case
445
+
446
+ Here's how your colleague can now load templates with the simplified API:
447
+
448
+ ```javascript
449
+ const loadTemplate = async (id) => {
450
+ try {
451
+ const response = await fetch(`${window.wpDesignData.baseUrl}/api/polotno/get-template/${id}/`, {
452
+ headers: { 'Authorization': `Bearer ${window.wpDesignData.userToken}` }
453
+ });
454
+ const templateData = await response.json();
455
+
456
+ if (templateData) {
457
+ const detailFileJson = templateData.details_file;
458
+ const responseFile = await fetch(detailFileJson);
459
+ const templateDataJson = await responseFile.json();
460
+
461
+ // Simple one-line call - no callbacks needed!
462
+ await canvasEditorRef.current.loadDesign(templateDataJson);
463
+ console.log('Template loaded successfully');
464
+ }
465
+ } catch (error) {
466
+ console.error('Failed to load template:', error);
467
+ alert('Failed to load template: ' + error.message);
468
+ }
469
+ };
470
+ ```
471
+
472
+ **Key Benefits:**
473
+ - **No callbacks required** - uses promises for cleaner async handling
474
+ - **Automatic error handling** - throws descriptive errors
475
+ - **Internal state management** - handles `setDesign` automatically
476
+ - **History integration** - automatically saves to undo/redo history
477
+ - **Modal integration** - uses existing TemplateInputModal for user inputs
478
+ - **TypeScript support** - full type safety
479
+
480
+ #### What is canvasEditorRef?
481
+
482
+ `canvasEditorRef` is a React ref object that provides access to the CanvasEditor component's internal methods. Here's how to create and use it:
483
+
484
+ ```tsx
485
+ import { useRef } from 'react';
486
+ import { CanvasEditor, CanvasEditorRef } from 'labellife-design-tool';
487
+
488
+ function MyComponent() {
489
+ // 1. Create the ref with proper typing
490
+ const canvasEditorRef = useRef<CanvasEditorRef>(null);
491
+
492
+ // 2. Pass it to the CanvasEditor component
493
+ return (
494
+ <CanvasEditor
495
+ ref={canvasEditorRef}
496
+ name="My Editor"
497
+ config={{ /* your config */ }}
498
+ />
499
+ );
500
+ }
501
+ ```
502
+
503
+ **Important Notes:**
504
+ - The ref is `null` until the component mounts
505
+ - Always check `canvasEditorRef.current` before using it
506
+ - The ref provides access to methods like `loadDesign`, `exportToPNG`, etc.
507
+ - TypeScript provides full autocomplete and type checking
508
+
509
+ #### Function Signature
510
+
511
+ ```typescript
512
+ loadDesign(jsonData: any): Promise<void>
513
+ ```
514
+
515
+ **Parameters:**
516
+ - `jsonData` (any): The raw JSON template data to load
517
+
518
+ **Returns:**
519
+ - `Promise<void>`: Resolves when the design is loaded, rejects on error
520
+
521
+ **Behavior:**
522
+ - Converts template format to internal CanvasDesign format
523
+ - Shows the existing TemplateInputModal for required user inputs
524
+ - Automatically handles optional inputs with empty values
525
+ - Updates the editor state
526
+ - Saves to undo/redo history
527
+ - Throws descriptive errors for invalid data or user cancellation
528
+ - Supports both required and optional user input fields
529
+
369
530
  ### Canvas to Blob Export
370
531
 
371
532
  The library provides a flexible `canvasToBlob` function that allows converting the canvas to a Blob for various use cases:
@@ -2589,6 +2589,12 @@ var canvasToBlob = (stage, format = "png", options) => {
2589
2589
  resolve(new Blob([arrayBuffer], { type: mimeType }));
2590
2590
  });
2591
2591
  };
2592
+ var loadTemplateFromJSON = async (canvasEditorRef, jsonData) => {
2593
+ if (!canvasEditorRef.current) {
2594
+ throw new Error("Canvas editor reference is not available. Make sure the CanvasEditor component is mounted.");
2595
+ }
2596
+ return canvasEditorRef.current.loadDesign(jsonData);
2597
+ };
2592
2598
  var importFromJSONData = (jsonData, onLoad, onError, onInputsRequired) => {
2593
2599
  try {
2594
2600
  const convertedDesign = convertTemplateToCanvasDesign(jsonData);
@@ -3067,20 +3073,6 @@ var CanvasEditor = forwardRef(({
3067
3073
  }));
3068
3074
  }, []);
3069
3075
  const stageRef = useRef5(null);
3070
- useImperativeHandle(ref, () => ({
3071
- stage: stageRef.current,
3072
- exportToPNG: () => {
3073
- if (stageRef.current)
3074
- exportToPNG(stageRef.current, design);
3075
- },
3076
- exportToJPG: () => {
3077
- if (stageRef.current)
3078
- exportToJPG(stageRef.current, design);
3079
- },
3080
- exportToJSON: () => exportToJSON(design),
3081
- getDesign: () => design,
3082
- setCanvasSize
3083
- }), [design, setCanvasSize]);
3084
3076
  const fileInputRef = useRef5(null);
3085
3077
  const jsonInputRef = useRef5(null);
3086
3078
  const containerRef = useRef5(null);
@@ -3104,6 +3096,39 @@ var CanvasEditor = forwardRef(({
3104
3096
  setDesign(JSON.parse(JSON.stringify(history[historyIndex + 1])));
3105
3097
  }
3106
3098
  }, [history, historyIndex]);
3099
+ useImperativeHandle(ref, () => ({
3100
+ stage: stageRef.current,
3101
+ exportToPNG: () => {
3102
+ if (stageRef.current)
3103
+ exportToPNG(stageRef.current, design);
3104
+ },
3105
+ exportToJPG: () => {
3106
+ if (stageRef.current)
3107
+ exportToJPG(stageRef.current, design);
3108
+ },
3109
+ exportToJSON: () => exportToJSON(design),
3110
+ getDesign: () => design,
3111
+ setCanvasSize,
3112
+ loadDesign: async (jsonData) => {
3113
+ return new Promise((resolve, reject) => {
3114
+ importFromJSONData(jsonData, (loadedDesign) => {
3115
+ setDesign(loadedDesign);
3116
+ saveToHistory(loadedDesign);
3117
+ resolve();
3118
+ }, (error) => {
3119
+ reject(new Error(error));
3120
+ }, (inputs, onComplete) => {
3121
+ setPendingInputs(inputs);
3122
+ setShowInputModal(true);
3123
+ window.__pendingImportComplete = (values) => {
3124
+ onComplete(values);
3125
+ resolve();
3126
+ };
3127
+ window.__pendingImportReject = reject;
3128
+ });
3129
+ });
3130
+ }
3131
+ }), [design, setCanvasSize, setDesign, saveToHistory, setShowInputModal, setPendingInputs]);
3107
3132
  const addText = useCallback4(() => {
3108
3133
  const newElement = {
3109
3134
  id: Date.now().toString(),
@@ -3508,6 +3533,7 @@ var CanvasEditor = forwardRef(({
3508
3533
  if (onComplete) {
3509
3534
  onComplete(values);
3510
3535
  delete window.__pendingImportComplete;
3536
+ delete window.__pendingImportReject;
3511
3537
  }
3512
3538
  setPendingInputs([]);
3513
3539
  };
@@ -3515,6 +3541,11 @@ var CanvasEditor = forwardRef(({
3515
3541
  setShowInputModal(false);
3516
3542
  setPendingInputs([]);
3517
3543
  delete window.__pendingImportComplete;
3544
+ const onReject = window.__pendingImportReject;
3545
+ if (onReject) {
3546
+ onReject(new Error("User cancelled template import"));
3547
+ delete window.__pendingImportReject;
3548
+ }
3518
3549
  };
3519
3550
  const panelConfigs = [
3520
3551
  {
@@ -3890,6 +3921,7 @@ initJsxCompat();
3890
3921
  export {
3891
3922
  setUnsplashAccessKey,
3892
3923
  replaceUserInputs,
3924
+ loadTemplateFromJSON,
3893
3925
  importFromJSONData,
3894
3926
  importFromJSON,
3895
3927
  getUnsplashAccessKey,
@@ -2589,6 +2589,12 @@ var canvasToBlob = (stage, format = "png", options) => {
2589
2589
  resolve(new Blob([arrayBuffer], { type: mimeType }));
2590
2590
  });
2591
2591
  };
2592
+ var loadTemplateFromJSON = async (canvasEditorRef, jsonData) => {
2593
+ if (!canvasEditorRef.current) {
2594
+ throw new Error("Canvas editor reference is not available. Make sure the CanvasEditor component is mounted.");
2595
+ }
2596
+ return canvasEditorRef.current.loadDesign(jsonData);
2597
+ };
2592
2598
  var importFromJSONData = (jsonData, onLoad, onError, onInputsRequired) => {
2593
2599
  try {
2594
2600
  const convertedDesign = convertTemplateToCanvasDesign(jsonData);
@@ -3067,20 +3073,6 @@ var CanvasEditor = forwardRef(({
3067
3073
  }));
3068
3074
  }, []);
3069
3075
  const stageRef = useRef5(null);
3070
- useImperativeHandle(ref, () => ({
3071
- stage: stageRef.current,
3072
- exportToPNG: () => {
3073
- if (stageRef.current)
3074
- exportToPNG(stageRef.current, design);
3075
- },
3076
- exportToJPG: () => {
3077
- if (stageRef.current)
3078
- exportToJPG(stageRef.current, design);
3079
- },
3080
- exportToJSON: () => exportToJSON(design),
3081
- getDesign: () => design,
3082
- setCanvasSize
3083
- }), [design, setCanvasSize]);
3084
3076
  const fileInputRef = useRef5(null);
3085
3077
  const jsonInputRef = useRef5(null);
3086
3078
  const containerRef = useRef5(null);
@@ -3104,6 +3096,39 @@ var CanvasEditor = forwardRef(({
3104
3096
  setDesign(JSON.parse(JSON.stringify(history[historyIndex + 1])));
3105
3097
  }
3106
3098
  }, [history, historyIndex]);
3099
+ useImperativeHandle(ref, () => ({
3100
+ stage: stageRef.current,
3101
+ exportToPNG: () => {
3102
+ if (stageRef.current)
3103
+ exportToPNG(stageRef.current, design);
3104
+ },
3105
+ exportToJPG: () => {
3106
+ if (stageRef.current)
3107
+ exportToJPG(stageRef.current, design);
3108
+ },
3109
+ exportToJSON: () => exportToJSON(design),
3110
+ getDesign: () => design,
3111
+ setCanvasSize,
3112
+ loadDesign: async (jsonData) => {
3113
+ return new Promise((resolve, reject) => {
3114
+ importFromJSONData(jsonData, (loadedDesign) => {
3115
+ setDesign(loadedDesign);
3116
+ saveToHistory(loadedDesign);
3117
+ resolve();
3118
+ }, (error) => {
3119
+ reject(new Error(error));
3120
+ }, (inputs, onComplete) => {
3121
+ setPendingInputs(inputs);
3122
+ setShowInputModal(true);
3123
+ window.__pendingImportComplete = (values) => {
3124
+ onComplete(values);
3125
+ resolve();
3126
+ };
3127
+ window.__pendingImportReject = reject;
3128
+ });
3129
+ });
3130
+ }
3131
+ }), [design, setCanvasSize, setDesign, saveToHistory, setShowInputModal, setPendingInputs]);
3107
3132
  const addText = useCallback4(() => {
3108
3133
  const newElement = {
3109
3134
  id: Date.now().toString(),
@@ -3508,6 +3533,7 @@ var CanvasEditor = forwardRef(({
3508
3533
  if (onComplete) {
3509
3534
  onComplete(values);
3510
3535
  delete window.__pendingImportComplete;
3536
+ delete window.__pendingImportReject;
3511
3537
  }
3512
3538
  setPendingInputs([]);
3513
3539
  };
@@ -3515,6 +3541,11 @@ var CanvasEditor = forwardRef(({
3515
3541
  setShowInputModal(false);
3516
3542
  setPendingInputs([]);
3517
3543
  delete window.__pendingImportComplete;
3544
+ const onReject = window.__pendingImportReject;
3545
+ if (onReject) {
3546
+ onReject(new Error("User cancelled template import"));
3547
+ delete window.__pendingImportReject;
3548
+ }
3518
3549
  };
3519
3550
  const panelConfigs = [
3520
3551
  {
@@ -3942,6 +3973,7 @@ function initWordPressCanvasEditor(containerId, props) {
3942
3973
  export {
3943
3974
  setUnsplashAccessKey,
3944
3975
  replaceUserInputs,
3976
+ loadTemplateFromJSON,
3945
3977
  initWordPressCanvasEditor,
3946
3978
  importFromJSONData,
3947
3979
  importFromJSON,
@@ -1 +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"}
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;yCAwqC9E,CAAC;AAEH,eAAe,YAAY,CAAC"}
@@ -10,10 +10,13 @@ export interface CanvasEditorRef {
10
10
  exportToJPG: () => void;
11
11
  exportToJSON: () => void;
12
12
  getDesign: () => CanvasDesign;
13
+ setCanvasSize: (width: number, height: number) => void;
14
+ loadDesign: (jsonData: any) => Promise<void>;
13
15
  }
14
16
  export { default as CanvasEditor } from '../CanvasEditor';
15
17
  export * from '../types';
16
- export { exportToPNG, exportToJPG, exportToJSON, importFromJSON, importFromJSONData, // New: Import JSON data directly (no file needed)
18
+ export { exportToPNG, exportToJPG, exportToJSON, importFromJSON, importFromJSONData, // Import JSON data directly (no file needed)
19
+ loadTemplateFromJSON, // Simplified template loading utility
17
20
  findRequiredInputs, replaceUserInputs, convertTemplateToCanvasDesign, canvasToBlob, } from '../utils/exportImportUtils';
18
21
  export * from '../elements';
19
22
  export { FONT_FAMILIES, DEFAULT_COLORS, CANVAS_PRESETS } from '../constants';
@@ -1 +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"}
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;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"}
@@ -1,5 +1,6 @@
1
1
  import { type CanvasDesign } from "../types/CanvasDesign";
2
2
  import { type UserInputItem } from "../types/UserInput";
3
+ import { type CanvasEditorRef } from "../lib";
3
4
  import Konva from "konva";
4
5
  /**
5
6
  * Converts a template JSON format to CanvasDesign format
@@ -126,6 +127,39 @@ export declare const canvasToBlob: (stage: Konva.Stage, format?: "png" | "jpg",
126
127
  * @see findRequiredInputs - User input detection
127
128
  * @see replaceUserInputs - Input replacement logic
128
129
  */
130
+ /**
131
+ * Simplified function to load a template from JSON data using a CanvasEditor ref
132
+ *
133
+ * This is a convenience wrapper around the loadDesign method that provides
134
+ * a cleaner API for loading templates from external sources.
135
+ *
136
+ * @param canvasEditorRef - React ref object pointing to a CanvasEditor instance
137
+ * @param jsonData - The raw JSON template data to load
138
+ *
139
+ * @example
140
+ * ```typescript
141
+ * import { useRef } from 'react';
142
+ * import { CanvasEditor, CanvasEditorRef, loadTemplateFromJSON } from 'labellife-design-tool';
143
+ *
144
+ * function MyComponent() {
145
+ * const canvasEditorRef = useRef<CanvasEditorRef>(null);
146
+ *
147
+ * const loadTemplate = async (templateData: any) => {
148
+ * try {
149
+ * await loadTemplateFromJSON(canvasEditorRef, templateData);
150
+ * console.log('Template loaded successfully!');
151
+ * } catch (error) {
152
+ * console.error('Failed to load template:', error);
153
+ * }
154
+ * };
155
+ *
156
+ * return (
157
+ * <CanvasEditor ref={canvasEditorRef} />
158
+ * );
159
+ * }
160
+ * ```
161
+ */
162
+ export declare const loadTemplateFromJSON: (canvasEditorRef: React.RefObject<CanvasEditorRef>, jsonData: any) => Promise<void>;
129
163
  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;
130
164
  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;
131
165
  //# sourceMappingURL=exportImportUtils.d.ts.map
@@ -1 +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"}
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,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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "labellife-design-tool",
3
- "version": "1.0.8",
3
+ "version": "1.0.9",
4
4
  "description": "Professional canvas editor built with React, TypeScript, and Konva",
5
5
  "main": "./dist/lib/index.js",
6
6
  "module": "./dist/lib/index.js",