@geekybones/editor-kit 2.0.0
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 +104 -0
- package/dist/editor-kit.js +8382 -0
- package/dist/editor-kit.js.map +1 -0
- package/dist/index.d.ts +742 -0
- package/package.json +88 -0
package/README.md
ADDED
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
# @geekybones/editor-kit
|
|
2
|
+
|
|
3
|
+
A modular, extensible canvas editor built on [PixiJS v8](https://pixijs.com). Compose only the features you need — elements, history, camera, snap, serialization, and more — through a clean extension system.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
| Feature | Description |
|
|
8
|
+
|---|---|
|
|
9
|
+
| **Elements** | Rectangle, Circle, Star, Line, Text (raster + vector mesh effects), Image, SVG |
|
|
10
|
+
| **History** | Configurable undo/redo with per-operation kind tracking |
|
|
11
|
+
| **Interaction** | Selection, multi-select, drag, resize, rotate, copy/paste, keyboard shortcuts, custom handles |
|
|
12
|
+
| **Camera** | Pan, zoom (wheel, pinch, keyboard), world↔screen coordinate mapping |
|
|
13
|
+
| **Snap** | Grid, object-center, edge, and guide snapping with visual indicator lines |
|
|
14
|
+
| **Grid** | Tiled background grid that tracks the camera |
|
|
15
|
+
| **Alignment** | 6-mode alignment for single or multi-element selections |
|
|
16
|
+
| **Layering** | Z-index management — bring to front/back, step forward/backward, batch reorder |
|
|
17
|
+
| **Serialization** | Serialize the full scene to plain JSON, restore it, register custom type adapters |
|
|
18
|
+
| **Export** | Render to PNG `Blob` or base64 data URL at standard / HD / ultra resolution |
|
|
19
|
+
| **Fonts** | Load custom web fonts via the `FontFace` API |
|
|
20
|
+
| **Context menu** | Built-in right-click menu with a full custom handler override |
|
|
21
|
+
| **Performance** | Dirty-tracking per element and asset cache ref-counting |
|
|
22
|
+
|
|
23
|
+
## Installation
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
npm install @geekybones/editor-kit pixi.js
|
|
27
|
+
# or
|
|
28
|
+
pnpm add @geekybones/editor-kit pixi.js
|
|
29
|
+
# or
|
|
30
|
+
yarn add @geekybones/editor-kit pixi.js
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Quick start
|
|
34
|
+
|
|
35
|
+
```ts
|
|
36
|
+
import { EditorKit, Shape, Text } from '@geekybones/editor-kit';
|
|
37
|
+
|
|
38
|
+
const editor = new EditorKit(document.getElementById('canvas-container')!, {
|
|
39
|
+
width: 1200,
|
|
40
|
+
height: 800,
|
|
41
|
+
backgroundColor: '#f4f5f7',
|
|
42
|
+
extensions: {
|
|
43
|
+
history: true,
|
|
44
|
+
interaction: true,
|
|
45
|
+
layering: true,
|
|
46
|
+
serialization: true,
|
|
47
|
+
export: true,
|
|
48
|
+
},
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
await editor.ready;
|
|
52
|
+
|
|
53
|
+
await editor.add(Text.create({
|
|
54
|
+
id: 'headline',
|
|
55
|
+
type: 'text',
|
|
56
|
+
text: 'Hello EditorKit',
|
|
57
|
+
x: 160,
|
|
58
|
+
y: 120,
|
|
59
|
+
fontSize: 56,
|
|
60
|
+
fontWeight: '700',
|
|
61
|
+
fill: '#0f172a',
|
|
62
|
+
}));
|
|
63
|
+
|
|
64
|
+
await editor.add(Shape.create(Shape.Rectangle, {
|
|
65
|
+
id: 'card',
|
|
66
|
+
type: 'shape:rectangle',
|
|
67
|
+
x: 140,
|
|
68
|
+
y: 220,
|
|
69
|
+
width: 320,
|
|
70
|
+
height: 180,
|
|
71
|
+
fill: '#ffffff',
|
|
72
|
+
stroke: '#dbe4ff',
|
|
73
|
+
strokeWidth: 2,
|
|
74
|
+
borderRadius: 24,
|
|
75
|
+
}));
|
|
76
|
+
|
|
77
|
+
// Undo the last action
|
|
78
|
+
await editor.history.undo();
|
|
79
|
+
|
|
80
|
+
// Serialize and restore
|
|
81
|
+
const scene = editor.serializer.serialize();
|
|
82
|
+
await editor.serializer.replace(scene);
|
|
83
|
+
|
|
84
|
+
// Export
|
|
85
|
+
const png = await editor.export.render('png');
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
## Documentation
|
|
89
|
+
|
|
90
|
+
- [Getting started](https://github.com/geekybones/editor-kit/blob/main/docs/getting-started.md)
|
|
91
|
+
- [EditorKit API](https://github.com/geekybones/editor-kit/blob/main/docs/usage/editor-kit.md)
|
|
92
|
+
- [Elements](https://github.com/geekybones/editor-kit/blob/main/docs/usage/elements.md)
|
|
93
|
+
- [Serialization & Export](https://github.com/geekybones/editor-kit/blob/main/docs/usage/serialization-and-export.md)
|
|
94
|
+
- [Extensions](https://github.com/geekybones/editor-kit/blob/main/docs/extensions/README.md)
|
|
95
|
+
|
|
96
|
+
## Playground
|
|
97
|
+
|
|
98
|
+
The `playground/` directory is a full React app demonstrating every feature.
|
|
99
|
+
|
|
100
|
+
```bash
|
|
101
|
+
cd playground
|
|
102
|
+
npm install
|
|
103
|
+
npm run dev
|
|
104
|
+
```
|