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 +161 -0
- package/dist/lib/lib/index.js +46 -14
- package/dist/lib/wordpress.js +46 -14
- package/dist/types/CanvasEditor.d.ts.map +1 -1
- package/dist/types/lib/index.d.ts +4 -1
- package/dist/types/lib/index.d.ts.map +1 -1
- package/dist/types/utils/exportImportUtils.d.ts +34 -0
- package/dist/types/utils/exportImportUtils.d.ts.map +1 -1
- package/package.json +1 -1
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:
|
package/dist/lib/lib/index.js
CHANGED
|
@@ -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,
|
package/dist/lib/wordpress.js
CHANGED
|
@@ -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;
|
|
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, //
|
|
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;
|
|
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"}
|