@anu3ev/fabric-image-editor 0.4.4 → 0.4.5
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/dist/main.js +1973 -1115
- package/package.json +1 -1
- package/readme.md +43 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@anu3ev/fabric-image-editor",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.5",
|
|
4
4
|
"description": "JavaScript image editor built on FabricJS, allowing you to create instances with an integrated montage area and providing an API to modify and manage state.",
|
|
5
5
|
"module": "dist/main.js",
|
|
6
6
|
"files": [
|
package/readme.md
CHANGED
|
@@ -138,6 +138,31 @@ editor.textManager.updateText({
|
|
|
138
138
|
strokeWidth: 2
|
|
139
139
|
}
|
|
140
140
|
})
|
|
141
|
+
|
|
142
|
+
// Background styling with padding and rounded corners
|
|
143
|
+
const bgTextbox = editor.textManager.addText({
|
|
144
|
+
text: 'New text',
|
|
145
|
+
backgroundColor: '#ffffff',
|
|
146
|
+
backgroundOpacity: 0.85,
|
|
147
|
+
paddingTop: 24,
|
|
148
|
+
paddingRight: 32,
|
|
149
|
+
paddingBottom: 24,
|
|
150
|
+
paddingLeft: 32,
|
|
151
|
+
radiusTopLeft: 8,
|
|
152
|
+
radiusTopRight: 8,
|
|
153
|
+
radiusBottomRight: 8,
|
|
154
|
+
radiusBottomLeft: 8
|
|
155
|
+
})
|
|
156
|
+
|
|
157
|
+
editor.textManager.updateText({
|
|
158
|
+
target: bgTextbox,
|
|
159
|
+
style: {
|
|
160
|
+
paddingTop: 40,
|
|
161
|
+
paddingBottom: 40,
|
|
162
|
+
radiusTopLeft: 16,
|
|
163
|
+
radiusTopRight: 16
|
|
164
|
+
}
|
|
165
|
+
})
|
|
141
166
|
```
|
|
142
167
|
|
|
143
168
|
### Configuring Fonts
|
|
@@ -212,6 +237,7 @@ The editor follows a modular architecture with specialized managers:
|
|
|
212
237
|
- **`FontManager`** - Font loading via FontFace API or fallback @font-face injection
|
|
213
238
|
- **`ModuleLoader`** - Dynamic module loading (jsPDF, etc.)
|
|
214
239
|
- **`ErrorManager`** - Error handling and user notifications
|
|
240
|
+
- **`TemplateManager`** (`src/editor/template-manager/index.ts`) - Serializes and reapplies object/group templates with optional background preservation
|
|
215
241
|
|
|
216
242
|
### UI Components
|
|
217
243
|
- **`ToolbarManager`** - Dynamic toolbar with configurable actions
|
|
@@ -323,6 +349,23 @@ editor.historyManager.saveState()
|
|
|
323
349
|
editor.historyManager.loadStateFromFullState(jsonState)
|
|
324
350
|
```
|
|
325
351
|
|
|
352
|
+
### Template Management
|
|
353
|
+
|
|
354
|
+
```javascript
|
|
355
|
+
// Serialize current selection to JSON template
|
|
356
|
+
const templateJson = editor.templateManager.serializeSelection({
|
|
357
|
+
includeBackground: false
|
|
358
|
+
})
|
|
359
|
+
|
|
360
|
+
// Apply template to canvas
|
|
361
|
+
await editor.templateManager.applyTemplate({
|
|
362
|
+
templateJson,
|
|
363
|
+
clearCanvas: false
|
|
364
|
+
})
|
|
365
|
+
```
|
|
366
|
+
|
|
367
|
+
`TemplateManager` keeps layout fidelity by storing positions, styles, and (optionally) background data so you can rehydrate saved compositions.
|
|
368
|
+
|
|
326
369
|
## 🛠️ Development
|
|
327
370
|
|
|
328
371
|
### Building the Library
|