@mypixia/simplex-designer 1.0.6 → 1.0.8
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 +35 -24
- package/dist/index.cjs.js +10 -10
- package/dist/index.es.js +1195 -1161
- package/package.json +4 -4
- package/dist/index.umd.js +0 -35
package/README.md
CHANGED
|
@@ -12,9 +12,10 @@ Mypixia is a powerful, customizable JavaScript image editor that allows users to
|
|
|
12
12
|
|
|
13
13
|
|
|
14
14
|
## Usage
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
15
|
+
```shell
|
|
16
|
+
npm install @mypixia/simplex-designer --save
|
|
17
|
+
```
|
|
18
|
+
|
|
18
19
|
|
|
19
20
|
### React
|
|
20
21
|
```jsx
|
|
@@ -31,7 +32,8 @@ function MyEditor() {
|
|
|
31
32
|
secondaryColor: "#cf7e52",
|
|
32
33
|
tertiaryColor: "#FFFFFF"
|
|
33
34
|
}}
|
|
34
|
-
|
|
35
|
+
apiKey = {"Your API key "} //optional
|
|
36
|
+
apiEndpoint={'you will receive in email if you get api key'} //optional
|
|
35
37
|
handleSaveClick={(design) => {
|
|
36
38
|
// Get PNG format
|
|
37
39
|
design.getPNG().then(returnProps => {
|
|
@@ -75,13 +77,14 @@ export default {
|
|
|
75
77
|
mounted() {
|
|
76
78
|
const config = {
|
|
77
79
|
canvasId: "my-canvas",
|
|
80
|
+
apiKey : "Your API key ", //optional
|
|
81
|
+
apiEndpoint:'you will receive in email if you get api key', //optional
|
|
78
82
|
theme: {
|
|
79
83
|
primaryColor: "#000000",
|
|
80
84
|
primaryColorLight: "#cf7e52",
|
|
81
85
|
secondaryColor: "#cf7e52",
|
|
82
86
|
tertiaryColor: "#FFFFFF"
|
|
83
87
|
},
|
|
84
|
-
apiEndpoint: 'https://your-api-endpoint.com',
|
|
85
88
|
handleSaveClick: (design) => {
|
|
86
89
|
design.getPNG().then(returnProps => {
|
|
87
90
|
console.log(returnProps);
|
|
@@ -130,7 +133,8 @@ export class EditorComponent implements AfterViewInit {
|
|
|
130
133
|
secondaryColor: "#cf7e52",
|
|
131
134
|
tertiaryColor: "#FFFFFF"
|
|
132
135
|
},
|
|
133
|
-
|
|
136
|
+
apiKey : "Your API key ", //optional
|
|
137
|
+
apiEndpoint:'you will receive in email if you get api key', //optional
|
|
134
138
|
handleSaveClick: (design) => {
|
|
135
139
|
design.getPNG().then(returnProps => {
|
|
136
140
|
console.log(returnProps);
|
|
@@ -160,19 +164,25 @@ export class EditorComponent implements AfterViewInit {
|
|
|
160
164
|
|
|
161
165
|
```html
|
|
162
166
|
<!DOCTYPE html>
|
|
163
|
-
<html>
|
|
167
|
+
<html lang="en">
|
|
164
168
|
<head>
|
|
165
|
-
<
|
|
169
|
+
<meta charset="UTF-8">
|
|
170
|
+
<title>Title</title>
|
|
166
171
|
</head>
|
|
167
172
|
<body>
|
|
168
|
-
<div id="editor-container"></div>
|
|
169
173
|
|
|
170
|
-
<
|
|
174
|
+
<div id="mypixia-widget-container"></div>
|
|
175
|
+
<script src="https://cdn.mypixia.com/index.umd.js"></script>
|
|
171
176
|
<script>
|
|
177
|
+
// Make sure the script has loaded by delaying initialization
|
|
172
178
|
document.addEventListener('DOMContentLoaded', function() {
|
|
173
|
-
|
|
179
|
+
// Check if Mypixia is available in the global scope
|
|
180
|
+
if (typeof Mypixia === 'undefined') {
|
|
181
|
+
console.error('Mypixia not loaded yet. Be sure to load the script before initializing the widget.');
|
|
182
|
+
return;
|
|
183
|
+
}
|
|
174
184
|
|
|
175
|
-
|
|
185
|
+
Mypixia.render(document.getElementById('mypixia-widget-container'), {
|
|
176
186
|
canvasId: "my-canvas",
|
|
177
187
|
theme: {
|
|
178
188
|
primaryColor: "#000000",
|
|
@@ -180,29 +190,30 @@ export class EditorComponent implements AfterViewInit {
|
|
|
180
190
|
secondaryColor: "#cf7e52",
|
|
181
191
|
tertiaryColor: "#FFFFFF"
|
|
182
192
|
},
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
193
|
+
apiKey:'your api key'
|
|
194
|
+
apiEndpoint: 'available when you get API key',
|
|
195
|
+
handleSaveClick: (design) => {
|
|
196
|
+
//get png format
|
|
197
|
+
design.getPNG().then(returnProps => {
|
|
186
198
|
console.log(returnProps);
|
|
187
199
|
});
|
|
188
200
|
},
|
|
189
|
-
enabledModules: ['TXT',
|
|
201
|
+
enabledModules: ['TXT','STICKERS', 'SHAPES', 'ICONS', 'IMAGE', 'QRCODE', 'BARCODE'],
|
|
190
202
|
actionButtons: {
|
|
191
|
-
share: false,
|
|
192
|
-
download: false,
|
|
203
|
+
share: false, //share Design
|
|
204
|
+
download: false, // download button
|
|
193
205
|
},
|
|
194
206
|
additionalActionButton: {
|
|
195
207
|
btnLabel: "Your Custom Action Button",
|
|
196
|
-
btnAction:
|
|
197
|
-
console.log("
|
|
208
|
+
btnAction: (designProps) => {
|
|
209
|
+
console.log("handle Button clicked with following props", designProps);
|
|
198
210
|
},
|
|
199
|
-
btnColor: '#008000'
|
|
211
|
+
btnColor: '#008000',//defaults to primary theme color
|
|
200
212
|
}
|
|
201
|
-
};
|
|
202
|
-
|
|
203
|
-
new Mypixia(container, config);
|
|
213
|
+
});
|
|
204
214
|
});
|
|
205
215
|
</script>
|
|
216
|
+
|
|
206
217
|
</body>
|
|
207
218
|
</html>
|
|
208
219
|
|