@mypixia/simplex-designer 1.0.4 → 1.0.6
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 +271 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -0,0 +1,271 @@
|
|
|
1
|
+
Mypixia is a powerful, customizable JavaScript image editor that allows users to create, edit, and enhance images directly in the browser. With support for text, stickers, shapes, icons, images, QR codes, and barcodes, Mypixia provides a comprehensive toolkit for building interactive design experiences in your web applications.
|
|
2
|
+
## Features
|
|
3
|
+
- 🎨 Fully customizable themes
|
|
4
|
+
- 📱 Responsive design works on all devices
|
|
5
|
+
- 🧩 Modular architecture with configurable components
|
|
6
|
+
- 🖼️ Support for various design elements (text, stickers, shapes, icons, images)
|
|
7
|
+
- 📊 QR code and barcode generation
|
|
8
|
+
- 🔄 Extensive API for integration with your application
|
|
9
|
+
- 💾 Export designs in various formats (PNG, etc.)
|
|
10
|
+
- 🔌 Custom action buttons for extended functionality
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## Usage
|
|
15
|
+
<code>
|
|
16
|
+
npm install mypixia --save
|
|
17
|
+
</code>
|
|
18
|
+
|
|
19
|
+
### React
|
|
20
|
+
```jsx
|
|
21
|
+
import React from 'react';
|
|
22
|
+
import Mypixia from 'mypixia';
|
|
23
|
+
|
|
24
|
+
function MyEditor() {
|
|
25
|
+
return (
|
|
26
|
+
<Mypixia
|
|
27
|
+
canvasId="my-canvas"
|
|
28
|
+
theme={{
|
|
29
|
+
primaryColor: "#000000",
|
|
30
|
+
primaryColorLight: "#cf7e52",
|
|
31
|
+
secondaryColor: "#cf7e52",
|
|
32
|
+
tertiaryColor: "#FFFFFF"
|
|
33
|
+
}}
|
|
34
|
+
apiEndpoint={'https://your-api-endpoint.com'}
|
|
35
|
+
handleSaveClick={(design) => {
|
|
36
|
+
// Get PNG format
|
|
37
|
+
design.getPNG().then(returnProps => {
|
|
38
|
+
console.log(returnProps);
|
|
39
|
+
});
|
|
40
|
+
}}
|
|
41
|
+
enabledModules={['TXT', 'STICKERS', 'SHAPES', 'ICONS', 'IMAGE', 'QRCODE', 'BARCODE']}
|
|
42
|
+
actionButtons={{
|
|
43
|
+
share: false, // share Design
|
|
44
|
+
download: false, // download button
|
|
45
|
+
}}
|
|
46
|
+
additionalActionButton={{
|
|
47
|
+
btnLabel: "Your Custom Action Button",
|
|
48
|
+
btnAction: (designProps) => {
|
|
49
|
+
console.log("Handle button clicked with following props", designProps);
|
|
50
|
+
},
|
|
51
|
+
btnColor: '#008000', // defaults to primary theme color
|
|
52
|
+
}}
|
|
53
|
+
/>
|
|
54
|
+
);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
export default MyEditor;
|
|
58
|
+
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
### VUE.js
|
|
62
|
+
|
|
63
|
+
```vue
|
|
64
|
+
<template>
|
|
65
|
+
<div id="app">
|
|
66
|
+
<div ref="mypixiaContainer"></div>
|
|
67
|
+
</div>
|
|
68
|
+
</template>
|
|
69
|
+
|
|
70
|
+
<script>
|
|
71
|
+
import Mypixia from 'mypixia';
|
|
72
|
+
|
|
73
|
+
export default {
|
|
74
|
+
name: 'App',
|
|
75
|
+
mounted() {
|
|
76
|
+
const config = {
|
|
77
|
+
canvasId: "my-canvas",
|
|
78
|
+
theme: {
|
|
79
|
+
primaryColor: "#000000",
|
|
80
|
+
primaryColorLight: "#cf7e52",
|
|
81
|
+
secondaryColor: "#cf7e52",
|
|
82
|
+
tertiaryColor: "#FFFFFF"
|
|
83
|
+
},
|
|
84
|
+
apiEndpoint: 'https://your-api-endpoint.com',
|
|
85
|
+
handleSaveClick: (design) => {
|
|
86
|
+
design.getPNG().then(returnProps => {
|
|
87
|
+
console.log(returnProps);
|
|
88
|
+
});
|
|
89
|
+
},
|
|
90
|
+
enabledModules: ['TXT', 'STICKERS', 'SHAPES', 'ICONS', 'IMAGE', 'QRCODE', 'BARCODE'],
|
|
91
|
+
actionButtons: {
|
|
92
|
+
share: false,
|
|
93
|
+
download: false,
|
|
94
|
+
},
|
|
95
|
+
additionalActionButton: {
|
|
96
|
+
btnLabel: "Your Custom Action Button",
|
|
97
|
+
btnAction: (designProps) => {
|
|
98
|
+
console.log("Handle button clicked with following props", designProps);
|
|
99
|
+
},
|
|
100
|
+
btnColor: '#008000',
|
|
101
|
+
}
|
|
102
|
+
};
|
|
103
|
+
|
|
104
|
+
new Mypixia(this.$refs.mypixiaContainer, config);
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
</script>
|
|
108
|
+
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
### Angular
|
|
112
|
+
|
|
113
|
+
```javascript
|
|
114
|
+
import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
|
|
115
|
+
import Mypixia from 'mypixia';
|
|
116
|
+
|
|
117
|
+
@Component({
|
|
118
|
+
selector: 'app-editor',
|
|
119
|
+
template: '<div #mypixiaContainer></div>'
|
|
120
|
+
})
|
|
121
|
+
export class EditorComponent implements AfterViewInit {
|
|
122
|
+
@ViewChild('mypixiaContainer') container: ElementRef;
|
|
123
|
+
|
|
124
|
+
ngAfterViewInit() {
|
|
125
|
+
const config = {
|
|
126
|
+
canvasId: "my-canvas",
|
|
127
|
+
theme: {
|
|
128
|
+
primaryColor: "#000000",
|
|
129
|
+
primaryColorLight: "#cf7e52",
|
|
130
|
+
secondaryColor: "#cf7e52",
|
|
131
|
+
tertiaryColor: "#FFFFFF"
|
|
132
|
+
},
|
|
133
|
+
apiEndpoint: 'https://your-api-endpoint.com',
|
|
134
|
+
handleSaveClick: (design) => {
|
|
135
|
+
design.getPNG().then(returnProps => {
|
|
136
|
+
console.log(returnProps);
|
|
137
|
+
});
|
|
138
|
+
},
|
|
139
|
+
enabledModules: ['TXT', 'STICKERS', 'SHAPES', 'ICONS', 'IMAGE', 'QRCODE', 'BARCODE'],
|
|
140
|
+
actionButtons: {
|
|
141
|
+
share: false,
|
|
142
|
+
download: false,
|
|
143
|
+
},
|
|
144
|
+
additionalActionButton: {
|
|
145
|
+
btnLabel: "Your Custom Action Button",
|
|
146
|
+
btnAction: (designProps) => {
|
|
147
|
+
console.log("Handle button clicked with following props", designProps);
|
|
148
|
+
},
|
|
149
|
+
btnColor: '#008000',
|
|
150
|
+
}
|
|
151
|
+
};
|
|
152
|
+
|
|
153
|
+
new Mypixia(this.container.nativeElement, config);
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
### Plain JavaScript
|
|
160
|
+
|
|
161
|
+
```html
|
|
162
|
+
<!DOCTYPE html>
|
|
163
|
+
<html>
|
|
164
|
+
<head>
|
|
165
|
+
<title>Mypixia Editor</title>
|
|
166
|
+
</head>
|
|
167
|
+
<body>
|
|
168
|
+
<div id="editor-container"></div>
|
|
169
|
+
|
|
170
|
+
<script src="https://unpkg.com/mypixia/dist/index.umd.js"></script>
|
|
171
|
+
<script>
|
|
172
|
+
document.addEventListener('DOMContentLoaded', function() {
|
|
173
|
+
const container = document.getElementById('editor-container');
|
|
174
|
+
|
|
175
|
+
const config = {
|
|
176
|
+
canvasId: "my-canvas",
|
|
177
|
+
theme: {
|
|
178
|
+
primaryColor: "#000000",
|
|
179
|
+
primaryColorLight: "#cf7e52",
|
|
180
|
+
secondaryColor: "#cf7e52",
|
|
181
|
+
tertiaryColor: "#FFFFFF"
|
|
182
|
+
},
|
|
183
|
+
apiEndpoint: 'https://your-api-endpoint.com',
|
|
184
|
+
handleSaveClick: function(design) {
|
|
185
|
+
design.getPNG().then(function(returnProps) {
|
|
186
|
+
console.log(returnProps);
|
|
187
|
+
});
|
|
188
|
+
},
|
|
189
|
+
enabledModules: ['TXT', 'STICKERS', 'SHAPES', 'ICONS', 'IMAGE', 'QRCODE', 'BARCODE'],
|
|
190
|
+
actionButtons: {
|
|
191
|
+
share: false,
|
|
192
|
+
download: false,
|
|
193
|
+
},
|
|
194
|
+
additionalActionButton: {
|
|
195
|
+
btnLabel: "Your Custom Action Button",
|
|
196
|
+
btnAction: function(designProps) {
|
|
197
|
+
console.log("Handle button clicked with following props", designProps);
|
|
198
|
+
},
|
|
199
|
+
btnColor: '#008000',
|
|
200
|
+
}
|
|
201
|
+
};
|
|
202
|
+
|
|
203
|
+
new Mypixia(container, config);
|
|
204
|
+
});
|
|
205
|
+
</script>
|
|
206
|
+
</body>
|
|
207
|
+
</html>
|
|
208
|
+
|
|
209
|
+
```
|
|
210
|
+
## Configuration Options
|
|
211
|
+
|
|
212
|
+
| Option | Type | Description |
|
|
213
|
+
| --- | --- | --- |
|
|
214
|
+
| `canvasId` | string | Unique identifier for the canvas element |
|
|
215
|
+
| `theme` | object | Custom theme configuration (colors, etc.) |
|
|
216
|
+
| `apiKey` | string | API key for accessing premium features |
|
|
217
|
+
| `apiEndpoint` | string | Custom API endpoint URL |
|
|
218
|
+
| `handleSaveClick` | function | Callback when the save button is clicked |
|
|
219
|
+
| `enabledModules` | array | List of enabled feature modules |
|
|
220
|
+
| `actionButtons` | object | Configure built-in action buttons |
|
|
221
|
+
| `additionalActionButton` | object | Add a custom action button |
|
|
222
|
+
|
|
223
|
+
|
|
224
|
+
## Theme Configuration
|
|
225
|
+
|
|
226
|
+
```json
|
|
227
|
+
{
|
|
228
|
+
primaryColor: "#000000", // Main theme color
|
|
229
|
+
primaryColorLight: "#cf7e52", // Lighter version of primary color
|
|
230
|
+
secondaryColor: "#cf7e52", // Secondary color for accents
|
|
231
|
+
tertiaryColor: "#FFFFFF" // Tertiary color for contrast
|
|
232
|
+
}
|
|
233
|
+
```
|
|
234
|
+
|
|
235
|
+
### Available Modules
|
|
236
|
+
- `TXT` - Text editing capabilities
|
|
237
|
+
- `STICKERS` - Sticker library
|
|
238
|
+
- - Basic shapes (circle, rectangle, etc.) `SHAPES`
|
|
239
|
+
- `ICONS` - Icon library
|
|
240
|
+
- `IMAGE` - Image upload and manipulation
|
|
241
|
+
- `QRCODE` - QR code generation
|
|
242
|
+
- `BARCODE` - Barcode generation
|
|
243
|
+
|
|
244
|
+
## API Methods
|
|
245
|
+
The design object passed to callbacks provides several methods for working with the design:
|
|
246
|
+
|
|
247
|
+
```javascript
|
|
248
|
+
// Get PNG representation of the design
|
|
249
|
+
design.getPNG().then(data => console.log(data));
|
|
250
|
+
|
|
251
|
+
// Get design as JSON
|
|
252
|
+
const designJSON = design.toJSON();
|
|
253
|
+
|
|
254
|
+
// Load a design from JSON
|
|
255
|
+
design.loadFromJSON(designJSON);
|
|
256
|
+
```
|
|
257
|
+
|
|
258
|
+
## Getting an API Key
|
|
259
|
+
To access premium features and additional design assets, you will need an API key. Visit [our documentation site](https://mypixia.docs.example.com/api-key) for more information on obtaining an API key and pricing plans.
|
|
260
|
+
## Browser Support
|
|
261
|
+
Mypixia supports all modern browsers:
|
|
262
|
+
- Chrome (latest)
|
|
263
|
+
- Firefox (latest)
|
|
264
|
+
- Safari (latest)
|
|
265
|
+
- Edge (latest)
|
|
266
|
+
|
|
267
|
+
## License
|
|
268
|
+
This project has a mix licensed - see the LICENSE file for details.
|
|
269
|
+
|
|
270
|
+
## Support
|
|
271
|
+
For additional help and support, please visit our [documentation site](https://mypixia.docs.example.com) or [contact our support team](https://mypixia.docs.example.com/support).
|