Merge pull request #265 from ToolboxAid/PR_26179_CHARLIE_029-sprites-clear-reset-controls

PR_26179_CHARLIE_029-sprites-clear-reset-controls

Author: ToolboxAid

assets/toolbox/sprites/js/index.js

@@ -42,6 +42,7 @@ function normalizeColorKey(colorKey) {
 }
 
 function clearCellColor(cell) {
+  cell.classList.remove("is-painted");
   cell.classList.remove(...EDITOR_COLOR_KEYS.map((colorKey) => `sprite-canvas-cell--${colorKey}`));
   delete cell.dataset.spriteColorKey;
 }
@@ -99,7 +100,6 @@ function paintCell(cell) {
   const key = pixelKey(cell.dataset.spritePixelRow, cell.dataset.spritePixelColumn);
   if (editorState.activeTool === "eraser") {
     editorState.paintedPixels.delete(key);
-    cell.classList.remove("is-painted");
     clearCellColor(cell);
   } else {
     editorState.paintedPixels.set(key, editorState.activeColor);
@@ -122,6 +122,20 @@ function fillGrid() {
   updateDraftStatus();
 }
 
+function clearCanvas() {
+  const grid = document.querySelector("[data-sprites-pixel-grid]");
+  editorState.paintedPixels.clear();
+  if (grid) {
+    grid.querySelectorAll("[data-sprite-pixel-row]").forEach(clearCellColor);
+  }
+  updateDraftStatus();
+}
+
+function resetGridToDefault() {
+  setGridSize(DEFAULT_GRID_SIZE);
+  clearCanvas();
+}
+
 function editorColorValue(colorKey) {
   const variableName = EDITOR_COLOR_CSS_VARIABLES[normalizeColorKey(colorKey)];
   const value = getComputedStyle(document.documentElement).getPropertyValue(variableName).trim();
@@ -252,6 +266,18 @@ function wirePaletteButtons() {
   });
 }
 
+function wireCanvasActions() {
+  const clearButton = document.querySelector("[data-sprites-clear-canvas]");
+  if (clearButton) {
+    clearButton.addEventListener("click", clearCanvas);
+  }
+
+  const resetButton = document.querySelector("[data-sprites-reset-grid]");
+  if (resetButton) {
+    resetButton.addEventListener("click", resetGridToDefault);
+  }
+}
+
 function wireExportButton() {
   const button = document.querySelector("[data-sprites-export-png]");
   if (button) {
@@ -262,6 +288,7 @@ function wireExportButton() {
 wireGridControls();
 wireDrawingTools();
 wirePaletteButtons();
+wireCanvasActions();
 wireExportButton();
 setGridSize(DEFAULT_GRID_SIZE);
 setActiveTool(editorState.activeTool);

dev/tests/playwright/tools/SpritesToolShell.spec.mjs

@@ -262,6 +262,19 @@ test("Sprite Creator shell loads with visible tool, canvas, details, and status
     await expect(page.locator("[data-sprites-pixel-grid] .is-painted")).toHaveCount(1024);
     await expect(page.locator("[data-sprites-pixel-grid] .sprite-canvas-cell--blue")).toHaveCount(1024);
     await expect(page.locator("[data-sprites-draft-status]")).toContainText("1024 draft pixels painted");
+    await page.getByRole("button", { name: "Clear Canvas" }).click();
+    await expect(page.locator("[data-sprites-pixel-grid] .is-painted")).toHaveCount(0);
+    await expect(page.locator("[data-sprites-draft-status]")).toContainText("empty draft");
+    await page.getByRole("button", { name: "Fill tool" }).click();
+    await expect(page.locator("[data-sprites-pixel-grid] .is-painted")).toHaveCount(1024);
+    await page.getByRole("button", { name: "Reset to 16x16" }).click();
+    await expect(page.locator("[data-sprites-pixel-grid]")).toHaveAttribute("aria-label", "Sprite Creator 16 by 16 pixel canvas");
+    await expect(page.locator("[data-sprites-pixel-grid] [role='gridcell']")).toHaveCount(256);
+    await expect(page.locator("[data-sprites-pixel-grid] .is-painted")).toHaveCount(0);
+    await expect(page.locator("[data-sprites-draft-status]")).toContainText("empty draft");
+    await page.getByRole("button", { name: "Blue editor color" }).click();
+    await page.getByRole("button", { name: "Fill tool" }).click();
+    await expect(page.locator("[data-sprites-pixel-grid] .is-painted")).toHaveCount(256);
     await expect(page.locator("[data-sprites-preview-canvas]")).toBeVisible();
     const previewHasPaint = await page.locator("[data-sprites-preview-canvas]").evaluate((canvas) => {
       const context = canvas.getContext("2d");

docs_build/dev/reports/PR_26179_CHARLIE_029-sprites-clear-reset-controls.md

@@ -0,0 +1,71 @@
+# PR_26179_CHARLIE_029-sprites-clear-reset-controls
+
+Team: CHARLIE
+Workflow: stacked feature workflow
+Base branch: PR_26179_CHARLIE_028-sprites-editor-polish
+Canonical ZIP path for this batch: dev/workspace/zip/PR_26179_CHARLIE_029-sprites-clear-reset-controls_delta.zip
+
+## Summary
+
+Added Clear Canvas and Reset to 16x16 controls. Both operate only on unsaved page-session editor state and do not persist product data.
+
+## Product Owner Testable Outcome
+
+The Product Owner can fill or draw on the Sprite Creator canvas, clear the draft, and reset back to the 16x16 display mode.
+
+## Branch Validation
+
+PASS
+
+- Current branch: PR_26179_CHARLIE_029-sprites-clear-reset-controls
+- Based on: PR_26179_CHARLIE_028-sprites-editor-polish
+- No start_of_day files changed
+- No DB/API/schema files changed
+- No stale PR #219-#228 code copied
+
+## Requirement Checklist
+
+| Requirement | Status | Notes |
+| --- | --- | --- |
+| Add Clear Canvas | PASS | Clears painted draft pixels. |
+| Add Reset to 16x16 | PASS | Resets grid to default display and clears draft. |
+| State remains unsaved page-session editor state | PASS | Module memory only; no browser storage. |
+| No DB/API/schema changes | PASS | None changed. |
+
+## Validation Lane Report
+
+Commands:
+
+```text
+node --check assets/toolbox/sprites/js/index.js
+node --check dev/tests/playwright/tools/SpritesToolShell.spec.mjs
+git diff --check -- toolbox/sprites/index.html assets/toolbox/sprites/js/index.js dev/tests/playwright/tools/SpritesToolShell.spec.mjs
+rg --pcre2 -n -i "localStorage|sessionStorage|indexedDB|imageDataUrl|toDataURL|<style|style=|<script(?![^>]+src=)|on(click|change|submit|input|load|error)=|local-mem|fake-login|MEM DB" toolbox/sprites/index.html assets/toolbox/sprites/js/index.js dev/tests/playwright/tools/SpritesToolShell.spec.mjs
+npx playwright test dev/tests/playwright/tools/SpritesToolShell.spec.mjs --workers=1 --reporter=list --output=<temp>
+```
+
+Results:
+
+- Node syntax checks: PASS
+- `git diff --check`: PASS
+- Guard scan: PASS, no matches
+- Targeted Playwright: PASS, 1 test passed
+
+## Manual Validation Notes
+
+1. Open `/toolbox/sprites/index.html`.
+2. Use Fill, then click Clear Canvas and confirm the grid clears.
+3. Switch to 32x32, draw or fill, then click Reset to 16x16.
+4. Confirm the grid is 16x16 and the draft is empty.
+
+## Previous PR Dependency
+
+PR_26179_CHARLIE_028-sprites-editor-polish
+
+## Next PR Dependency
+
+PR_26179_CHARLIE_030-sprites-undo-redo
+
+## ZIP Path
+
+`dev/workspace/zip/PR_26179_CHARLIE_029-sprites-clear-reset-controls_delta.zip`

docs_build/dev/reports/codex_changed_files.txt

@@ -1,5 +1,6 @@
 toolbox/sprites/index.html
+assets/toolbox/sprites/js/index.js
 dev/tests/playwright/tools/SpritesToolShell.spec.mjs
-docs_build/dev/reports/PR_26179_CHARLIE_028-sprites-editor-polish.md
+docs_build/dev/reports/PR_26179_CHARLIE_029-sprites-clear-reset-controls.md
 docs_build/dev/reports/codex_changed_files.txt
 docs_build/dev/reports/codex_review.diff