Technical Specification: Isometric Pixel Art Grid & Projection Utility

Overview

This single-file application is a specialized drawing tool designed for creating isometric pixel art. It allows users to generate custom grids, transform flat 2D pixel sprites into isometric projections, and perform pixel-perfect drawing operations within the browser. The application is strictly client-side, lightweight, and optimized for performance.

Core Features

• Dynamic Grid Engine: Toggle between standard orthographic (square) grids and isometric diamond grids. Users can adjust tile size, line thickness, and grid color.
• Projection Transformation: A math-based engine that takes a standard 2D image import and applies a shear-and-scale transformation (2:1 ratio) to simulate an isometric view.
• Pixel Drawing Tools: Standard suite of pixel-art tools: Pencil, Eraser, Fill (Bucket), Line (with angle snapping to 30°, 45°, 90°), and Marquee Select.
• Layer Management: Support for multiple layers (in-memory) to separate background grids, object line-art, and color fills.
• Export Utility: Capability to export the current canvas as a high-resolution PNG or vector-based SVG with or without the grid overlay.
• History Tracking: An in-memory undo/redo stack allowing up to 50 operations.

UI/UX Design

• Aesthetic: A vibrant, professional light-mode SaaS aesthetic. High contrast, clean typography (Inter or system sans-serif), and subtle soft-shadow containers.
• Layout:
  • Header: Contains utility buttons (Export, Clear, Grid Settings, Help).
  • Sidebar (Left): Tools palette with active state highlighting.
  • Main Area: The zoomable, pannable drawing canvas container.
  • Sidebar (Right): Properties panel (Current color, Layer visibility, Grid settings adjustment).
• Transitions: Smooth slide-in animations for modals; subtle scaling effects on tool buttons when clicked (micro-interactions).

Color Palette

• Background: #F8FAFC (Soft Cool Gray)
• Surface: #FFFFFF (White)
• Primary Accent: #2563EB (Vibrant Blue)
• Secondary Accent: #0F172A (Deep Slate)
• Border/Dividers: #E2E8F0 (Light Gray)

Technical Directives

1. Environment: Single HTML file containing all <style> and <script> tags. Use Tailwind CSS via CDN for rapid, consistent styling.
2. State Management: Use plain JavaScript Objects/Arrays stored in a top-level appState variable. DO NOT use localStorage or sessionStorage.
3. Canvas API: Perform all drawing and transformations using the HTML5 Canvas API. Use offscreenCanvas if performance requires it.
4. Iframe Compliance: Ensure no alert() or prompt() calls; use custom-built modal overlays for user feedback and input.
5. Responsive: Use Flexbox and CSS Grid to ensure the sidebar collapses into a bottom toolbar on mobile devices.
6. No Dependencies: Avoid heavy frameworks. If needed, include lightweight vanilla libraries via CDN (e.g., fabric.js for canvas handling if manual management is too complex).