Design Document
----------------
1. Layout
- Two panes: left navigation (150px) and main canvas area.
- Canvas area holds multiple canvas divs, only one active at a time.
2. Canvas
- Each canvas is a full-size div with position:relative.
- Images are wrapped in .img-wrapper divs (absolute positioning).
- Wrapper maintains rotation, translation, and resize.
3. Image Wrapper
- Border: 1px solid black.
- Handles (resize, rotate) shown on hover.
- Handles positioned at bottom-right and top-center respectively.
4. Interactions
- Paste (Ctrl+V or mobile paste) captures image from clipboard.
- Mouse/Touch move updates image position.
- Dragging rotate handle updates rotation angle.
- Dragging resize handle scales while preserving aspect ratio.
- Double-click removes image.
- Selecting image brings to front (higher z-index).
- Background beige; bordered, retro feel.
5. Canvas Management
- Left pane lists canvases, each with delete button.
- Add Canvas button creates new canvas.
- Switch canvas by clicking its name.
6. Screenshot
- Save button uses html2canvas to capture active canvas and triggers download.
7. Touch Support
- Touch events mirror mouse events for dragging, rotating, resizing.