Add in-app pixel editor for sprites in admin UI
Build a dependency-free Canvas2D pixel editor integrated into the admin
Sprites tab. Each sprite card gains an EDIT button that opens a full-screen
editor for the sprite at its native 500x333 resolution.
Tools: pencil (1-8px brush, Bresenham interpolation), eraser, color picker
(palette + native input + pick-from-canvas), fill bucket (flood fill), pan.
Features: cursor-centered zoom, space-drag pan, undo/redo (snapshot per
stroke), pixel grid overlay, transparency checkerboard, load existing sprite,
and keyboard shortcuts (B/E/I/F, Space, +/-/0, Ctrl+Z/Y, G, Esc).
Export reuses the existing POST /api/admin/sprites/{type} upload endpoint via
srcCanvas.toBlob, so no server changes are required.
Closes #5
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -522,6 +522,7 @@
|
||||
<div class="sprite-categories">${sprite.categories || ''}</div>
|
||||
<div class="sprite-preview">${imgHtml}</div>
|
||||
<div class="sprite-btn-row">
|
||||
<button class="sprite-upload-label sprite-edit-btn" data-type="${sprite.type}">EDIT</button>
|
||||
<label class="sprite-upload-label">
|
||||
UPLOAD
|
||||
<input type="file" class="sprite-upload-input" accept=".png,image/png" data-type="${sprite.type}">
|
||||
@@ -530,6 +531,15 @@
|
||||
</div>
|
||||
`;
|
||||
|
||||
const editBtn = card.querySelector('.sprite-edit-btn');
|
||||
editBtn.addEventListener('click', () => {
|
||||
if (window.PixelEditor) {
|
||||
window.PixelEditor.open(sprite.type, { onSave: loadSprites });
|
||||
} else {
|
||||
toast('Pixel editor not loaded', true);
|
||||
}
|
||||
});
|
||||
|
||||
const fileInput = card.querySelector('.sprite-upload-input');
|
||||
fileInput.addEventListener('change', async (e) => {
|
||||
const file = e.target.files[0];
|
||||
|
||||
Reference in New Issue
Block a user