@mypixia/simplex-designer 1.0.16 → 1.0.18

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.
Files changed (6) hide show
  1. package/README.md +446 -166
  2. package/dist/index.cjs.js +11 -11
  3. package/dist/index.es.js +1778 -1721
  4. package/dist/index_external.css +1 -1
  5. package/package.json +1 -1
  6. package/dist/index.umd.js +0 -778
package/README.md CHANGED
@@ -25,143 +25,354 @@ npm install @mypixia/simplex-designer --save
25
25
 
26
26
 
27
27
  ### React
28
- ```jsx
29
- import React from 'react';
30
- import Mypixia from 'mypixia';
28
+ ```jsx showLineNumbers
29
+
30
+ import React from "react";
31
+ import Mypixia from "@mypixia/simplex-designer";
32
+
33
+
34
+
35
+ function App() {
36
+ const handleGetDesign = (design) => {
37
+ //default to DOM
38
+ const designObj = document.getElementById('my-canva')?.instance?.getDesignFormats();
39
+ if (designObj) {
40
+ designObj.getPNG().then(pngFiles=> {
41
+ console.log('PNG Data:', pngFiles);
42
+ // Handle File submission here
43
+ });
44
+
45
+ // designObj.getJPEG().then(jpegFiles => {
46
+ // console.log('JPEG Data:', jpegFiles);
47
+ // // Handle JPEG data here
48
+ // });
49
+ //
50
+ // designObj.getWEBP().then(webpFiles => {
51
+ // console.log('Webp Data:', webpFiles);
52
+ // // Handle webp files here
53
+ // });
54
+ //
55
+ // designObj.getSVG().then(svgFiles => {
56
+ // console.log('SVG Data:', svgFiles);
57
+ // // Handle svg files here
58
+ // });
59
+ } else {
60
+ console.error('Canvas instance not found or getDesignFormats method not available');
61
+ }
31
62
 
32
- function MyEditor() {
33
- return (
34
- <Mypixia
35
- canvasId="my-canvas"
36
- theme={{
37
- primaryColor: "#000000",
38
- primaryColorLight: "#cf7e52",
39
- secondaryColor: "#cf7e52",
40
- tertiaryColor: "#FFFFFF"
41
- }}
42
- apiKey = {"Your API key "} //optional
43
- apiEndpoint={'you will receive in email if you get api key'} //optional
44
- handleSaveClick={(design) => {
45
- // Get PNG format
46
- design.getPNG().then(returnProps => {
47
- console.log(returnProps);
48
- });
49
- }}
50
- enabledModules={['TXT', 'STICKERS', 'SHAPES', 'ICONS', 'IMAGE', 'QRCODE', 'BARCODE']}
51
- actionButtons={{
52
- share: false, // share Design
53
- download: false, // download button
54
- }}
55
- additionalActionButton={{
56
- btnLabel: "Your Custom Action Button",
57
- btnAction: (designProps) => {
58
- console.log("Handle button clicked with following props", designProps);
59
- },
60
- btnColor: '#008000', // defaults to primary theme color
61
- }}
62
- />
63
- );
63
+ }
64
+
65
+
66
+ return (
67
+ <div style={{marginLeft:'150px', marginRight:'150px'}}>
68
+
69
+ <button onClick={() => handleGetDesign()}>
70
+ Get design
71
+ </button>
72
+ <br/><br/>
73
+ <hr/>
74
+ <Mypixia
75
+ canvasId="my-canva"
76
+ theme={{
77
+ primaryColor: "#000000",
78
+ primaryColorLight: "#cf7e52",
79
+ secondaryColor: "#cf7e52",
80
+ tertiaryColor: "#FFFFFF"
81
+ }}
82
+ apiKey={'YOUR_API_KEY'}
83
+ apiEndpoint={'GET_FROM_EMAIL+OR_ACCOUNT_SETTINGS'}
84
+ isPlainColor = "Y"
85
+ product={
86
+ {
87
+ name: "Premium Crew Neck T-Shirt",
88
+ category: "Tshirts",
89
+ description: "Men's crew neck t-shirts",
90
+ plainColor: "Y",
91
+ mainImage : "https://static.mypixia.com/prod/products/96ca4acb-c426-4619-a2c4-7acd95b78451.png",
92
+ colorSettings: ["#FF0000", "#0000FF", "#008000", "#000000", "#FFFFFF", "#808080", "#FFFF00"],
93
+ sections: [
94
+ {
95
+ sectionName: "Sleeve-left",
96
+ sectionImage: "https://static.mypixia.com/prod/products/27b8c138-af4e-4ea0-833d-88b10fbd3cf7.png"
97
+ },
98
+ {
99
+ sectionName: "Back",
100
+ sectionImage: "https://static.mypixia.com/prod/products/d4c53776-7b7d-41c5-a6b5-2bf5876cd26e.png"
101
+ }
102
+ ]
103
+ }
104
+ }
105
+
106
+ enabledModules = {['STICKERS', 'SHAPES', 'ICONS', 'TXT', 'IMAGE', 'QRCODE', 'BARCODE']}
107
+ actionButtons={{
108
+ share: true, //share Design
109
+ download: false, // download button
110
+ }}
111
+
112
+ additionalActionButton={
113
+ {
114
+ btnLabel: "Your Custom Action Button",
115
+ btnAction: () => {
116
+ console.log("handle you custom Button clicked");
117
+
118
+ //Example, grab the image that is being edited
119
+ const designObj = document.getElementById('my-canva')?.instance?.getDesignFormats();
120
+ if (designObj) {
121
+ designObj.getPNG().then(pngFiles => {
122
+ console.log('PNG Data:', pngFiles);
123
+ });
124
+ }
125
+ },
126
+ btnColor: '#008000',//defaults to primary theme color
127
+ }
128
+
129
+ }
130
+ />
131
+
132
+ </div>
133
+ )
64
134
  }
65
135
 
66
- export default MyEditor;
136
+ export default App
137
+
138
+
67
139
 
68
140
  ```
69
141
 
70
142
  ### VUE.js
71
143
 
72
- ```vue
144
+ ```vue showLineNumbers
145
+
73
146
  <template>
74
- <div id="app">
75
- <div ref="mypixiaContainer"></div>
147
+ <div :style="{ marginLeft: '150px', marginRight: '150px' }">
148
+ <button @click="handleGetDesign">
149
+ Get design
150
+ </button>
151
+ <br /><br />
152
+ <hr />
153
+ <Mypixia
154
+ canvas-id="my-canva"
155
+ :theme="theme"
156
+ :api-key="apiKey"
157
+ :api-endpoint="apiEndpoint"
158
+ :is-plain-color="isPlainColor"
159
+ :product="product"
160
+ :enabled-modules="enabledModules"
161
+ :action-buttons="actionButtons"
162
+ :additional-action-button="additionalActionButton"
163
+ />
76
164
  </div>
77
165
  </template>
78
166
 
79
167
  <script>
80
- import Mypixia from 'mypixia';
81
-
82
- export default {
83
- name: 'App',
84
- mounted() {
85
- const config = {
86
- canvasId: "my-canvas",
87
- apiKey : "Your API key ", //optional
88
- apiEndpoint:'you will receive in email if you get api key', //optional
89
- theme: {
90
- primaryColor: "#000000",
91
- primaryColorLight: "#cf7e52",
92
- secondaryColor: "#cf7e52",
93
- tertiaryColor: "#FFFFFF"
94
- },
95
- handleSaveClick: (design) => {
96
- design.getPNG().then(returnProps => {
97
- console.log(returnProps);
98
- });
99
- },
100
- enabledModules: ['TXT', 'STICKERS', 'SHAPES', 'ICONS', 'IMAGE', 'QRCODE', 'BARCODE'],
101
- actionButtons: {
102
- share: false,
103
- download: false,
104
- },
105
- additionalActionButton: {
106
- btnLabel: "Your Custom Action Button",
107
- btnAction: (designProps) => {
108
- console.log("Handle button clicked with following props", designProps);
168
+ import Mypixia from '@mypixia/simplex-designer';
169
+
170
+ export default {
171
+ name: 'App',
172
+ components: {
173
+ Mypixia
174
+ },
175
+ data() {
176
+ return {
177
+ apiKey: 'YOUR_API_KEY',
178
+ apiEndpoint: 'GET_FROM_EMAIL+OR_ACCOUNT_SETTINGS',
179
+ isPlainColor: 'Y',
180
+ theme: {
181
+ primaryColor: "#000000",
182
+ primaryColorLight: "#cf7e52",
183
+ secondaryColor: "#cf7e52",
184
+ tertiaryColor: "#FFFFFF"
185
+ },
186
+ product: {
187
+ name: "Premium Crew Neck T-Shirt",
188
+ category: "Tshirts",
189
+ description: "Men's crew neck t-shirts",
190
+ plainColor: "Y",
191
+ mainImage: "https://static.mypixia.com/prod/products/96ca4acb-c426-4619-a2c4-7acd95b78451.png",
192
+ colorSettings: ["#FF0000", "#0000FF", "#008000", "#000000", "#FFFFFF", "#808080", "#FFFF00"],
193
+ sections: [
194
+ {
195
+ sectionName: "Sleeve-left",
196
+ sectionImage: "https://static.mypixia.com/prod/products/27b8c138-af4e-4ea0-833d-88b10fbd3cf7.png"
197
+ },
198
+ {
199
+ sectionName: "Back",
200
+ sectionImage: "https://static.mypixia.com/prod/products/d4c53776-7b7d-41c5-a6b5-2bf5876cd26e.png"
201
+ }
202
+ ]
109
203
  },
110
- btnColor: '#008000',
204
+ enabledModules: ['STICKERS', 'SHAPES', 'ICONS', 'TXT', 'IMAGE', 'QRCODE', 'BARCODE'],
205
+ actionButtons: {
206
+ share: true, // Share Design
207
+ download: false // Download button
208
+ }
209
+ };
210
+ },
211
+ computed: {
212
+ additionalActionButton() {
213
+ return {
214
+ btnLabel: "Your Custom Action Button",
215
+ btnAction: () => {
216
+ console.log("handle you custom Button clicked");
217
+
218
+ // Example, grab the image that is being edited
219
+ const designObj = document.getElementById('my-canva')?.instance?.getDesignFormats();
220
+ if (designObj) {
221
+ designObj.getPNG().then(pngFiles => {
222
+ console.log('PNG Data:', pngFiles);
223
+ });
224
+ }
225
+ },
226
+ btnColor: '#008000' // Defaults to primary theme color
227
+ };
111
228
  }
112
- };
113
-
114
- new Mypixia(this.$refs.mypixiaContainer, config);
115
- }
116
- }
229
+ },
230
+ methods: {
231
+ handleGetDesign() {
232
+ // Default to DOM
233
+ const designObj = document.getElementById('my-canva')?.instance?.getDesignFormats();
234
+ if (designObj) {
235
+ designObj.getPNG().then(pngFiles => {
236
+ console.log('PNG Data:', pngFiles);
237
+ // Handle File submission here
238
+ });
239
+
240
+ // designObj.getJPEG().then(jpegFiles => {
241
+ // console.log('JPEG Data:', jpegFiles);
242
+ // // Handle JPEG data here
243
+ // });
244
+ //
245
+ // designObj.getWEBP().then(webpFiles => {
246
+ // console.log('Webp Data:', webpFiles);
247
+ // // Handle webp files here
248
+ // });
249
+ //
250
+ // designObj.getSVG().then(svgFiles => {
251
+ // console.log('SVG Data:', svgFiles);
252
+ // // Handle svg files here
253
+ // });
254
+ } else {
255
+ console.error('Canvas instance not found or getDesignFormats method not available');
256
+ }
257
+ }
258
+ }
259
+ };
117
260
  </script>
118
-
119
261
  ```
120
262
 
121
263
  ### Angular
122
264
 
123
265
  ```javascript
124
- import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
125
- import Mypixia from 'mypixia';
266
+
267
+ // app.component.ts
268
+ import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
269
+ import * as Mypixia from '@mypixia/simplex-designer';
126
270
 
127
271
  @Component({
128
- selector: 'app-editor',
129
- template: '<div #mypixiaContainer></div>'
272
+ selector: 'app-root',
273
+ templateUrl: './app.component.html',
274
+ styleUrls: ['./app.component.css']
130
275
  })
131
- export class EditorComponent implements AfterViewInit {
132
- @ViewChild('mypixiaContainer') container: ElementRef;
276
+ export class AppComponent implements AfterViewInit {
277
+ @ViewChild('mypixiaContainer') mypixiaContainer: ElementRef;
133
278
 
134
- ngAfterViewInit() {
135
- const config = {
136
- canvasId: "my-canvas",
137
- theme: {
138
- primaryColor: "#000000",
139
- primaryColorLight: "#cf7e52",
140
- secondaryColor: "#cf7e52",
141
- tertiaryColor: "#FFFFFF"
279
+ // Define properties used for the Mypixia widget
280
+ theme = {
281
+ primaryColor: "#000000",
282
+ primaryColorLight: "#cf7e52",
283
+ secondaryColor: "#cf7e52",
284
+ tertiaryColor: "#FFFFFF"
285
+ };
286
+
287
+ product = {
288
+ name: "Premium Crew Neck T-Shirt",
289
+ category: "Tshirts",
290
+ description: "Men's crew neck t-shirts",
291
+ plainColor: "Y",
292
+ mainImage: "https://static.mypixia.com/prod/products/96ca4acb-c426-4619-a2c4-7acd95b78451.png",
293
+ colorSettings: ["#FF0000", "#0000FF", "#008000", "#000000", "#FFFFFF", "#808080", "#FFFF00"],
294
+ sections: [
295
+ {
296
+ sectionName: "Sleeve-left",
297
+ sectionImage: "https://static.mypixia.com/prod/products/27b8c138-af4e-4ea0-833d-88b10fbd3cf7.png"
142
298
  },
143
- apiKey : "Your API key ", //optional
144
- apiEndpoint:'you will receive in email if you get api key', //optional
145
- handleSaveClick: (design) => {
146
- design.getPNG().then(returnProps => {
147
- console.log(returnProps);
299
+ {
300
+ sectionName: "Back",
301
+ sectionImage: "https://static.mypixia.com/prod/products/d4c53776-7b7d-41c5-a6b5-2bf5876cd26e.png"
302
+ }
303
+ ]
304
+ };
305
+
306
+ enabledModules = ['STICKERS', 'SHAPES', 'ICONS', 'TXT', 'IMAGE', 'QRCODE', 'BARCODE'];
307
+
308
+ actionButtons = {
309
+ share: true, // Share Design
310
+ download: false // Download button
311
+ };
312
+
313
+ additionalActionButton = {
314
+ btnLabel: "Your Custom Action Button",
315
+ btnAction: () => {
316
+ console.log("handle you custom Button clicked");
317
+
318
+ // Example, grab the image that is being edited
319
+ const designObj = document.getElementById('my-canva')?.instance?.getDesignFormats();
320
+ if (designObj) {
321
+ designObj.getPNG().then(pngFiles => {
322
+ console.log('PNG Data:', pngFiles);
148
323
  });
149
- },
150
- enabledModules: ['TXT', 'STICKERS', 'SHAPES', 'ICONS', 'IMAGE', 'QRCODE', 'BARCODE'],
151
- actionButtons: {
152
- share: false,
153
- download: false,
154
- },
155
- additionalActionButton: {
156
- btnLabel: "Your Custom Action Button",
157
- btnAction: (designProps) => {
158
- console.log("Handle button clicked with following props", designProps);
159
- },
160
- btnColor: '#008000',
161
324
  }
162
- };
325
+ },
326
+ btnColor: '#008000' // Defaults to primary theme color
327
+ };
328
+
329
+ ngAfterViewInit() {
330
+ this.initMypixia();
331
+ }
163
332
 
164
- new Mypixia(this.container.nativeElement, config);
333
+ initMypixia() {
334
+ if (this.mypixiaContainer && this.mypixiaContainer.nativeElement) {
335
+ const mypixiaInstance = new Mypixia({
336
+ container: this.mypixiaContainer.nativeElement,
337
+ canvasId: "my-canva",
338
+ theme: this.theme,
339
+ apiKey: 'YOUR_API_KEY',
340
+ apiEndpoint: 'GET_FROM_EMAIL+OR_ACCOUNT_SETTINGS',
341
+ isPlainColor: "Y",
342
+ product: this.product,
343
+ enabledModules: this.enabledModules,
344
+ actionButtons: this.actionButtons,
345
+ additionalActionButton: this.additionalActionButton
346
+ });
347
+ }
348
+ }
349
+
350
+ handleGetDesign() {
351
+ // Default to DOM
352
+ const designObj = document.getElementById('my-canva')?.instance?.getDesignFormats();
353
+ if (designObj) {
354
+ designObj.getPNG().then(pngFiles => {
355
+ console.log('PNG Data:', pngFiles);
356
+ // Handle File submission here
357
+ });
358
+
359
+ // designObj.getJPEG().then(jpegFiles => {
360
+ // console.log('JPEG Data:', jpegFiles);
361
+ // // Handle JPEG data here
362
+ // });
363
+ //
364
+ // designObj.getWEBP().then(webpFiles => {
365
+ // console.log('Webp Data:', webpFiles);
366
+ // // Handle webp files here
367
+ // });
368
+ //
369
+ // designObj.getSVG().then(svgFiles => {
370
+ // console.log('SVG Data:', svgFiles);
371
+ // // Handle svg files here
372
+ // });
373
+ } else {
374
+ console.error('Canvas instance not found or getDesignFormats method not available');
375
+ }
165
376
  }
166
377
  }
167
378
 
@@ -170,73 +381,144 @@ export class EditorComponent implements AfterViewInit {
170
381
  ### Plain JavaScript
171
382
 
172
383
  ```html
173
- <!DOCTYPE html>
384
+ <!DOCTYPE html>
174
385
  <html lang="en">
175
386
  <head>
176
387
  <meta charset="UTF-8">
177
- <title>Title</title>
388
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
389
+ <title>My Designer</title>
390
+ <script src="https://cdn.mypixia.com/index.umd.js"></script>
391
+ <style>
392
+ .container {
393
+ margin-left: 150px;
394
+ margin-right: 150px;
395
+ }
396
+ button {
397
+ padding: 8px 16px;
398
+ cursor: pointer;
399
+ }
400
+ </style>
178
401
  </head>
179
402
  <body>
403
+ <div class="container">
404
+ <button id="getDesignBtn">Get design</button>
405
+ <br><br>
406
+ <hr>
407
+ <div id="mypixia-container"></div>
408
+ </div>
180
409
 
181
- <div id="mypixia-widget-container"></div>
182
- <script src="https://cdn.mypixia.com/index.umd.js"></script>
183
410
  <script>
184
- // Make sure the script has loaded by delaying initialization
185
411
  document.addEventListener('DOMContentLoaded', function() {
186
- // Check if Mypixia is available in the global scope
187
- if (typeof Mypixia === 'undefined') {
188
- console.error('Mypixia not loaded yet. Be sure to load the script before initializing the widget.');
189
- return;
412
+ // Initialize the Mypixia designer
413
+ initMypixia();
414
+
415
+ // Add event listener for the Get Design button
416
+ document.getElementById('getDesignBtn').addEventListener('click', handleGetDesign);
417
+
418
+ function initMypixia() {
419
+ const container = document.getElementById('mypixia-container');
420
+
421
+ if (typeof Mypixia !== 'undefined' && container) {
422
+ Mypixia.render(container, {
423
+ canvasId: "my-canva",
424
+ theme: {
425
+ primaryColor: "#000000",
426
+ primaryColorLight: "#cf7e52",
427
+ secondaryColor: "#cf7e52",
428
+ tertiaryColor: "#FFFFFF"
429
+ },
430
+ apiKey: 'YOUR_API_KEY',
431
+ apiEndpoint: 'GET_FROM_EMAIL+OR_ACCOUNT_SETTINGS',
432
+ isPlainColor: "Y",
433
+ product: {
434
+ name: "Premium Crew Neck T-Shirt",
435
+ category: "Tshirts",
436
+ description: "Men's crew neck t-shirts",
437
+ plainColor: "Y",
438
+ mainImage: "https://static.mypixia.com/prod/products/96ca4acb-c426-4619-a2c4-7acd95b78451.png",
439
+ colorSettings: ["#FF0000", "#0000FF", "#008000", "#000000", "#FFFFFF", "#808080", "#FFFF00"],
440
+ sections: [
441
+ {
442
+ sectionName: "Sleeve-left",
443
+ sectionImage: "https://static.mypixia.com/prod/products/27b8c138-af4e-4ea0-833d-88b10fbd3cf7.png"
444
+ },
445
+ {
446
+ sectionName: "Back",
447
+ sectionImage: "https://static.mypixia.com/prod/products/d4c53776-7b7d-41c5-a6b5-2bf5876cd26e.png"
448
+ }
449
+ ]
450
+ },
451
+ enabledModules: ['STICKERS', 'SHAPES', 'ICONS', 'TXT', 'IMAGE', 'QRCODE', 'BARCODE'],
452
+ actionButtons: {
453
+ share: true, // Share Design
454
+ download: false // Download button
455
+ },
456
+ additionalActionButton: {
457
+ btnLabel: "Your Custom Action Button",
458
+ btnAction: () => {
459
+ console.log("handle you custom Button clicked");
460
+
461
+ // Example, grab the image that is being edited
462
+ const designObj = document.getElementById('my-canva')?.instance?.getDesignFormats();
463
+ if (designObj) {
464
+ designObj.getPNG().then(pngFiles => {
465
+ console.log('PNG Data:', pngFiles);
466
+ });
467
+ }
468
+ },
469
+ btnColor: '#008000' // Defaults to primary theme color
470
+ }
471
+ });
472
+ } else {
473
+ console.error('Mypixia not loaded yet or container not found');
474
+ }
190
475
  }
191
476
 
192
- Mypixia.render(document.getElementById('mypixia-widget-container'), {
193
- canvasId: "my-canvas",
194
- theme: {
195
- primaryColor: "#000000",
196
- primaryColorLight: "#cf7e52",
197
- secondaryColor: "#cf7e52",
198
- tertiaryColor: "#FFFFFF"
199
- },
200
- apiKey:'your api key'
201
- apiEndpoint: 'available when you get API key',
202
- handleSaveClick: (design) => {
203
- //get png format
204
- design.getPNG().then(returnProps => {
205
- console.log(returnProps);
477
+ function handleGetDesign() {
478
+ // Default to DOM
479
+ const designObj = document.getElementById('my-canva')?.instance?.getDesignFormats();
480
+ if (designObj) {
481
+ designObj.getPNG().then(pngFiles => {
482
+ console.log('PNG Data:', pngFiles);
483
+ // Handle File submission here
206
484
  });
207
- },
208
- enabledModules: ['TXT','STICKERS', 'SHAPES', 'ICONS', 'IMAGE', 'QRCODE', 'BARCODE'],
209
- actionButtons: {
210
- share: false, //share Design
211
- download: false, // download button
212
- },
213
- additionalActionButton: {
214
- btnLabel: "Your Custom Action Button",
215
- btnAction: (designProps) => {
216
- console.log("handle Button clicked with following props", designProps);
217
- },
218
- btnColor: '#008000',//defaults to primary theme color
485
+
486
+ // Uncomment below to use other export formats as needed
487
+ // designObj.getJPEG().then(jpegFiles => {
488
+ // console.log('JPEG Data:', jpegFiles);
489
+ // // Handle JPEG data here
490
+ // });
491
+ //
492
+ // designObj.getWEBP().then(webpFiles => {
493
+ // console.log('Webp Data:', webpFiles);
494
+ // // Handle webp files here
495
+ // });
496
+ //
497
+ // designObj.getSVG().then(svgFiles => {
498
+ // console.log('SVG Data:', svgFiles);
499
+ // // Handle svg files here
500
+ // });
501
+ } else {
502
+ console.error('Canvas instance not found or getDesignFormats method not available');
219
503
  }
220
- });
504
+ }
221
505
  });
222
- </script>
223
-
224
- </body>
506
+ </script>
507
+ </body>
225
508
  </html>
226
-
227
509
  ```
228
510
  ## Configuration Options
229
511
 
230
- | Option | Type | Description |
231
- | --- | --- | --- |
232
- | `canvasId` | string | Unique identifier for the canvas element |
233
- | `theme` | object | Custom theme configuration (colors, etc.) |
234
- | `apiKey` | string | API key for accessing premium features |
235
- | `apiEndpoint` | string | Custom API endpoint URL |
236
- | `handleSaveClick` | function | Callback when the save button is clicked |
237
- | `enabledModules` | array | List of enabled feature modules |
238
- | `actionButtons` | object | Configure built-in action buttons |
239
- | `additionalActionButton` | object | Add a custom action button |
512
+ | Option | Type | Description |
513
+ | -- | --- |-------------------------------------------------------------------------------------------------------------------------------------|
514
+ | `canvasId` | string | Unique identifier for the canvas element |
515
+ | `theme` | object | Custom theme configuration (colors, etc.) |
516
+ | `apiKey` | string | API key for accessing premium features |
517
+ | `apiEndpoint` | string | Custom API endpoint URL |
518
+ | `instance.getDesignFormats()` | function | Callback to get current design. You will get a list of files, one print ready and the other is a full design of applicable product |
519
+ | `enabledModules` | array | List of enabled feature modules |
520
+ | `actionButtons` | object | Configure built-in action buttons |
521
+ | `additionalActionButton` | object | Add a custom action button |
240
522
 
241
523
 
242
524
  ## Theme Configuration
@@ -263,14 +545,12 @@ export class EditorComponent implements AfterViewInit {
263
545
  The design object passed to callbacks provides several methods for working with the design:
264
546
 
265
547
  ```javascript
266
- // Get PNG representation of the design
267
- design.getPNG().then(data => console.log(data));
268
-
269
- // Get design as JSON
270
- const designJSON = design.toJSON();
271
-
272
- // Load a design from JSON
273
- design.loadFromJSON(designJSON);
548
+ const designObj = document.getElementById('my-canva')?.instance?.getDesignFormats();
549
+ if (designObj) {
550
+ designObj.getPNG().then(pngFiles=> {
551
+ console.log('PNG Data:', pngFiles);
552
+ // Handle Files submission here
553
+ });
274
554
  ```
275
555
 
276
556
  ## Getting an API Key