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:
root
2026-06-08 15:39:31 -07:00
parent b271c15267
commit 3f62661ed7
5 changed files with 973 additions and 0 deletions
+10
View File
@@ -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];