Build a pixel-art editor as a static web app in this directory: index.html, style.css, …

antigravitygemini · 34 steps · 1m 04s · 6 filessession bc25c220-6a4@patrick-toulme
Build a pixel-art editor as a static web app in this directory: index.html, style.css, editor.js, palette.js. A 32x32 grid canvas with pencil/eraser/fill/eyedropper tools, color palette + custom picker, undo/redo, zoom, grid toggle, export as PNG (scaled 10x) and as JSON, import from JSON, keyboard shortcuts, dark theme, and tests.html + tests.js exercising the flood-fill and undo stack logic. Run the tests headless with node and fix what fails.
same matchclaude-code · 37 steps codex · 80 steps opencode · 31 steps pi · 29 steps antigravity · 34 steps
compare in arena
step 13 / 34
editor.jschange 1/1
/**
 * Core Editor Logic for Pixel Art Editor
 * Exported for Node.js testing and Browser execution.
 */
 
// --- 1. FLOOD FILL LOGIC ---
/**
 * Executes 4-way flood fill on a 1D grid array.
 * @param {Array<string|null>} grid - 1D array of size width * height
 * @param {number} width - Grid width (32)
 * @param {number} height - Grid height (32)
 * @param {number} startX - Target X coordinate
 * @param {number} startY - Target Y coordinate
 * @param {string|null} fillColor - Replacement color hex or null
 * @returns {Array<string|null>} updated grid array
 */
function floodFill(grid, width, height, startX, startY, fillColor) {
  if (!grid || startX < 0 || startX >= width || startY < 0 || startY >= height) {
    return grid;
  }
 
  const targetIdx = startY * width + startX;
  const targetColor = grid[targetIdx];
 
  // Standardize color representation for accurate comparison
  const normalize = (c) => (c ? c.toUpperCase() : null);
  const normTarget = normalize(targetColor);
  const normFill = normalize(fillColor);
 
  // If target color is already equal to fill color, return unchanged grid
  if (normTarget === normFill) {
    return grid;
  }
 
  const newGrid = [...grid];
  const queue = [[startX, startY]];
  const visited = new Uint8Array(width * height);
 
  visited[targetIdx] = 1;
 
  while (queue.length > 0) {
    const [x, y] = queue.shift();
    const idx = y * width + x;
    newGrid[idx] = fillColor ? fillColor.toUpperCase() : null;
 
    // Check 4 adjacent neighbors: Up, Down, Left, Right
    const neighbors = [
      [x + 1, y],
      [x - 1, y],
      [x, y + 1],
      [x, y - 1]
    ];
 
    for (let i = 0; i < neighbors.length; i++) {
      const [nx, ny] = neighbors[i];
      if (nx >= 0 && nx < width && ny >= 0 && ny < height) {
        const nIdx = ny * width + nx;
        if (!visited[nIdx]) {
          visited[nIdx] = 1;
          if (normalize(newGrid[nIdx]) === normTarget) {
            queue.push([nx, ny]);
          }
        }
      }
    }
  }
 
  return newGrid;
}
 
// --- 2. UNDO / REDO MANAGER ---
class UndoManager {
  constructor(maxSize = 50) {
    this.maxSize = maxSize;
    this.stack = [];
    this.currentIndex = -1;
  }
 
  /**
   * Push a state snapshot into history.
   * @param {Array} state - Snapshot of pixel grid
   */
  push(state) {
    if (!state) return;
    // Truncate any redo future states
    if (this.currentIndex < this.stack.length - 1) {
      this.stack = this.stack.slice(0, this.currentIndex + 1);
    }
    // Push copy of state
    this.stack.push([...state]);
    
    // Maintain maximum history depth limit
    if (this.stack.length > this.maxSize) {
      this.stack.shift();
    } else {
      this.currentIndex++;
    }
  }
 
  canUndo() {
    return this.currentIndex > 0;
  }
 
  canRedo() {
    return this.currentIndex < this.stack.length - 1;
  }
 
  undo() {
    if (!this.canUndo()) return null;
    this.currentIndex--;
    return [...this.stack[this.currentIndex]];
  }
 
  redo() {
    if (!this.canRedo()) return null;
    this.currentIndex++;
    return [...this.stack[this.currentIndex]];
  }
 
  getCurrentState() {
    if (this.currentIndex >= 0 && this.currentIndex < this.stack.length) {
      return [...this.stack[this.currentIndex]];
    }
    return null;
  }
 
  clear() {
    this.stack = [];
    this.currentIndex = -1;
  }
}
 
// --- 3. JSON IMPORT / EXPORT HELPER ---
function exportToJSON(grid, width = 32, height = 32) {
  return JSON.stringify({
    version: '1.0',
    width,
    height,
    createdAt: new Date().toISOString(),
    pixels: grid
  }, null, 2);
}
 
function importFromJSON(jsonString, expectedWidth = 32, expectedHeight = 32) {
  let parsed;
  try {
    parsed = typeof jsonString === 'string' ? JSON.parse(jsonString) : jsonString;
  } catch (err) {
    throw new Error('Invalid JSON format');
  }
 
  if (!parsed || typeof parsed !== 'object') {
    throw new Error('JSON data must be an object');
  }
 
  if (!Array.isArray(parsed.pixels)) {
    throw new Error('JSON data must contain a valid "pixels" array');
  }
 
  const expectedLength = expectedWidth * expectedHeight;
  if (parsed.pixels.length !== expectedLength) {
    throw new Error(`Invalid pixels count. Expected ${expectedLength}, got ${parsed.pixels.length}`);
  }
 
  return {
    width: parsed.width || expectedWidth,
    height: parsed.height || expectedHeight,
    pixels: parsed.pixels.map(p => (p ? String(p).toUpperCase() : null))
  };
}
 
// --- 4. PIXEL EDITOR DOM & CANVAS CONTROLLER ---
class PixelEditor {
  constructor(options = {}) {
    this.width = options.width || 32;
    this.height = options.height || 32;
    this.scale = options.scale || 16; // Display scale factor per pixel
    this.showGrid = options.showGrid !== undefined ? options.showGrid : true;
    this.currentTool = options.tool || 'pencil'; // 'pencil', 'eraser', 'fill', 'eyedropper'
 
    this.paletteManager = options.paletteManager || (typeof PaletteManager !== 'undefined' ? new PaletteManager() : null);
 
    // Initial grid state: 32x32 array filled with null (transparent)
    this.grid = new Array(this.width * this.height).fill(null);
 
    this.undoManager = new UndoManager(50);
    // Push initial empty canvas state
    this.undoManager.push(this.grid);
 
    this.isMouseDown = false;
    this.lastMousePos = null; // For line interpolation
    this.isStrokeActive = false; // Tracks if a multi-pixel stroke occurred
 
    // DOM Elements (assigned on init)
    this.canvas = options.canvas || null;
    this.ctx = null;
  }
 
  attachCanvas(canvasElement) {
    this.canvas = canvasElement;
    this.ctx = this.canvas.getContext('2d');
    this.resizeCanvas();
    this.setupEventListeners();
    this.render();
  }
 
  resizeCanvas() {
    if (!this.canvas) return;
    this.canvas.width = this.width * this.scale;
    this.canvas.height = this.height * this.scale;
  }
 
  setZoom(scale) {
    this.scale = Math.max(2, Math.min(40, scale));
    this.resizeCanvas();
    this.render();
  }
 
  toggleGrid() {
    this.showGrid = !this.showGrid;
    this.render();
    return this.showGrid;
  }
 
  setTool(tool) {
    const validTools = ['pencil', 'eraser', 'fill', 'eyedropper'];
    if (validTools.includes(tool)) {
      this.currentTool = tool;
    }
  }
 
  getPixel(x, y) {
    if (x < 0 || x >= this.width || y < 0 || y >= this.height) return null;
    return this.grid[y * this.width + x];
  }
 
  setPixelInternal(x, y, color) {
    if (x < 0 || x >= this.width || y < 0 || y >= this.height) return;
    this.grid[y * this.width + x] = color ? color.toUpperCase() : null;
  }
 
  // Bresenham's line algorithm for continuous mouse drawing
  drawLine(x0, y0, x1, y1, color) {
    const dx = Math.abs(x1 - x0);
    const dy = Math.abs(y1 - y0);
    const sx = x0 < x1 ? 1 : -1;
    const sy = y0 < y1 ? 1 : -1;
    let err = dx - dy;
 
    let x = x0;
    let y = y0;
 
    while (true) {
      this.setPixelInternal(x, y, color);
      if (x === x1 && y === y1) break;
      const e2 = 2 * err;
      if (e2 > -dy) {
        err -= dy;
        x += sx;
      }
      if (e2 < dx) {
        err += dx;
        y += sy;
      }
    }
  }
 
  handlePointerDown(x, y, isRightClick = false) {
    if (x < 0 || x >= this.width || y < 0 || y >= this.height) return;
 
    this.isMouseDown = true;
    this.lastMousePos = { x, y };
 
    const colorToUse = isRightClick
      ? (this.paletteManager ? this.paletteManager.getSecondaryColor() : '#FFFFFF')
      : (this.paletteManager ? this.paletteManager.getPrimaryColor() : '#000000');
 
    if (this.currentTool === 'eyedropper') {
      const pickedColor = this.getPixel(x, y);
      if (pickedColor && this.paletteManager) {
        if (isRightClick) {
          this.paletteManager.setSecondaryColor(pickedColor);
        } else {
          this.paletteManager.setPrimaryColor(pickedColor);
        }
      }
      return;
    }
 
    if (this.currentTool === 'fill') {
      const targetColor = this.getPixel(x, y);
      const fillC = isRightClick ? (this.paletteManager ? this.paletteManager.getSecondaryColor() : null) : colorToUse;
      
      this.grid = floodFill(this.grid, this.width, this.height, x, y, fillC);
      this.undoManager.push(this.grid);
      this.render();
      return;
    }
 
    // For pencil or eraser
    const color = (this.currentTool === 'eraser') ? null : colorToUse;
    this.setPixelInternal(x, y, color);
    this.render();
  }
 
  handlePointerMove(x, y, isRightClick = false) {
    if (!this.isMouseDown) return;
    if (x < 0 || x >= this.width || y < 0 || y >= this.height) return;
 
    if (this.currentTool === 'pencil' || this.currentTool === 'eraser') {
      const colorToUse = isRightClick
        ? (this.paletteManager ? this.paletteManager.getSecondaryColor() : '#FFFFFF')
        : (this.paletteManager ? this.paletteManager.getPrimaryColor() : '#000000');
 
      const color = (this.currentTool === 'eraser') ? null : colorToUse;
 
      if (this.lastMousePos) {
        this.drawLine(this.lastMousePos.x, this.lastMousePos.y, x, y, color);
      } else {
        this.setPixelInternal(x, y, color);
      }
 
      this.lastMousePos = { x, y };
      this.isStrokeActive = true;
      this.render();
    }
  }
 
  handlePointerUp() {
    if (this.isMouseDown) {
      if (this.currentTool === 'pencil' || this.currentTool === 'eraser') {
        // Save history state at the end of stroke
        this.undoManager.push(this.grid);
      }
    }
    this.isMouseDown = false;
    this.lastMousePos = null;
    this.isStrokeActive = false;
  }
 
  undo() {
    const prevState = this.undoManager.undo();
    if (prevState) {
      this.grid = prevState;
      this.render();
    }
    return prevState;
  }
 
  redo() {
    const nextState = this.undoManager.redo();
    if (nextState) {
      this.grid = nextState;
      this.render();
    }
    return nextState;
  }
 
  clearCanvas() {
    this.grid = new Array(this.width * this.height).fill(null);
    this.undoManager.push(this.grid);
    this.render();
  }
 
  exportPNG(scaleFactor = 10) {
    const offCanvas = document.createElement('canvas');
    offCanvas.width = this.width * scaleFactor; // e.g. 32 * 10 = 320
    offCanvas.height = this.height * scaleFactor;
    const offCtx = offCanvas.getContext('2d');
 
    offCtx.imageSmoothingEnabled = false;
 
    for (let y = 0; y < this.height; y++) {
      for (let x = 0; x < this.width; x++) {
        const color = this.grid[y * this.width + x];
        if (color) {
          offCtx.fillStyle = color;
          offCtx.fillRect(x * scaleFactor, y * scaleFactor, scaleFactor, scaleFactor);
        }
      }
    }
 
    return offCanvas.toDataURL('image/png');
  }
 
  downloadPNG(filename = 'pixel-art.png') {
    const dataUrl = this.exportPNG(10);
    const link = document.createElement('a');
    link.download = filename;
    link.href = dataUrl;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }
 
  exportJSON() {
    return exportToJSON(this.grid, this.width, this.height);
  }
 
  downloadJSON(filename = 'pixel-art.json') {
    const jsonStr = this.exportJSON();
    const blob = new Blob([jsonStr], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.download = filename;
    link.href = url;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
  }
 
  loadJSON(jsonString) {
    const imported = importFromJSON(jsonString, this.width, this.height);
    this.grid = imported.pixels;
    this.undoManager.push(this.grid);
    this.render();
  }
 
  setupEventListeners() {
    if (!this.canvas) return;
 
    const getCanvasCoords = (e) => {
      const rect = this.canvas.getBoundingClientRect();
      const scaleX = this.canvas.width / rect.width;
      const scaleY = this.canvas.height / rect.height;
 
      const clientX = e.touches ? e.touches[0].clientX : e.clientX;
      const clientY = e.touches ? e.touches[0].clientY : e.clientY;
 
      const canvasX = (clientX - rect.left) * scaleX;
      const canvasY = (clientY - rect.top) * scaleY;
 
      const x = Math.floor(canvasX / this.scale);
      const y = Math.floor(canvasY / this.scale);
 
      return { x, y };
    };
 
    this.canvas.addEventListener('mousedown', (e) => {
      e.preventDefault();
      const { x, y } = getCanvasCoords(e);
      const isRightClick = e.button === 2;
      this.handlePointerDown(x, y, isRightClick);
    });
 
    this.canvas.addEventListener('mousemove', (e) => {
      const { x, y } = getCanvasCoords(e);
      const isRightClick = e.buttons === 2;
      this.handlePointerMove(x, y, isRightClick);
 
      if (this.onHoverCallback) {
        this.onHoverCallback(x, y);
      }
    });
 
    window.addEventListener('mouseup', () => {
      this.handlePointerUp();
    });
 
    this.canvas.addEventListener('mouseleave', () => {
      if (this.onHoverCallback) {
        this.onHoverCallback(-1, -1);
      }
    });
 
    // Touch support
    this.canvas.addEventListener('touchstart', (e) => {
      e.preventDefault();
      const { x, y } = getCanvasCoords(e);
      this.handlePointerDown(x, y, false);
    });
 
    this.canvas.addEventListener('touchmove', (e) => {
      e.preventDefault();
      const { x, y } = getCanvasCoords(e);
      this.handlePointerMove(x, y, false);
    });
 
    this.canvas.addEventListener('touchend', (e) => {
      e.preventDefault();
      this.handlePointerUp();
    });
 
    // Prevent context menu on canvas for right click tool usage
    this.canvas.addEventListener('contextmenu', (e) => e.preventDefault());
  }
 
  render() {
    if (!this.ctx || !this.canvas) return;
 
    // Clear canvas
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
 
    // Draw checkerboard background for transparency
    const checkSize = Math.max(4, Math.floor(this.scale / 2));
    for (let y = 0; y < this.canvas.height; y += checkSize) {
      for (let x = 0; x < this.canvas.width; x += checkSize) {
        const isDark = ((x / checkSize) + (y / checkSize)) % 2 === 0;
        this.ctx.fillStyle = isDark ? '#1e293b' : '#334155';
        this.ctx.fillRect(x, y, checkSize, checkSize);
      }
    }
 
    // Draw pixels
    for (let y = 0; y < this.height; y++) {
      for (let x = 0; x < this.width; x++) {
        const color = this.grid[y * this.width + x];
        if (color) {
          this.ctx.fillStyle = color;
          this.ctx.fillRect(x * this.scale, y * this.scale, this.scale, this.scale);
        }
      }
    }
 
    // Draw Grid lines overlay
    if (this.showGrid && this.scale >= 4) {
      this.ctx.lineWidth = 1;
      this.ctx.strokeStyle = 'rgba(255, 255, 255, 0.12)';
 
      this.ctx.beginPath();
      // Vertical lines
      for (let x = 0; x <= this.width; x++) {
        this.ctx.moveTo(x * this.scale + 0.5, 0);
        this.ctx.lineTo(x * this.scale + 0.5, this.height * this.scale);
      }
      // Horizontal lines
      for (let y = 0; y <= this.height; y++) {
        this.ctx.moveTo(0, y * this.scale + 0.5);
        this.ctx.lineTo(this.width * this.scale, y * this.scale + 0.5);
      }
      this.ctx.stroke();
    }
  }
}
 
// Module Export for Node & Browser
if (typeof module !== 'undefined' && module.exports) {
  module.exports = {
    floodFill,
    UndoManager,
    exportToJSON,
    importFromJSON,
    PixelEditor
  };
} else if (typeof window !== 'undefined') {
  window.floodFill = floodFill;
  window.UndoManager = UndoManager;
  window.exportToJSON = exportToJSON;
  window.importFromJSON = importFromJSON;
  window.PixelEditor = PixelEditor;
}
 
553 linesjs
Writes …/tests.js
Files at this step
drag the rail to scrub
Discussion

No comments yet. Start the discussion. Recorded by @patrick-toulme.
#antigravity #css #gemini #graphics #html #javascript #quick #testing #ui
d5-agy
← all sessions