From 98f03c9b221e9e5b08d88fa7fd5b844f6f134e2b Mon Sep 17 00:00:00 2001 From: jason Date: Sun, 8 Mar 2026 21:38:01 -0500 Subject: [PATCH] docs: update README with Sprint 1 features (drag/drop, presets, shortcuts) --- README.md | 83 +++++++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 69 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 226cf38..af54e93 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # PNGer - Modern PNG Editor & Resizer -A sleek, modern PNG editor and resizer with **live preview**, **dark/light mode theming**, and direct upload/download features. Built with TypeScript and deployed as a single Docker container on Unraid. +A sleek, modern PNG editor and resizer with **live preview**, **drag & drop**, **smart presets**, **keyboard shortcuts**, and **dark/light mode theming**. Built with TypeScript and deployed as a single Docker container on Unraid. ## ✨ Features @@ -26,12 +26,31 @@ A sleek, modern PNG editor and resizer with **live preview**, **dark/light mode - **Fit Modes**: Inside (resize only) or Cover (crop to fill) ### 🚀 Performance & Usability +- **Drag & Drop**: Drag images directly into the app or use file browser +- **Clipboard Paste**: Paste images with Ctrl+V (Cmd+V on Mac) +- **Smart Presets**: Quick access to common configurations: + - 📷 Web Optimized (1920x1080, 80% quality, WebP) + - 📱 Social Media (1080x1080, 85% quality, JPEG) + - 👤 Profile Picture (400x400, 90% quality, PNG) + - 📧 Email Friendly (800x600, 75% quality, JPEG) + - ⭐ Tiny Icon (64x64, 100% quality, PNG) + - 🔍 Retina 2x (2x dimensions, 90% quality) + - 💎 Icon Small (256x256, 95% quality, PNG) + - 🔶 Icon Large (512x512, 95% quality, PNG) +- **Keyboard Shortcuts**: Fast workflow with keyboard controls (see below) - **Direct Download**: No server-side storage, immediate download - **Modern UI**: Sleek, responsive TypeScript/Svelte design - **File Analysis**: Original size, transformed size, savings percentage - **Debounced Updates**: Smooth preview generation (300ms delay) - **Visual Feedback**: Loading states, error messages, success indicators +### ⌨️ Keyboard Shortcuts +- **Ctrl+V** (Cmd+V): Paste image from clipboard +- **Enter**: Transform & Download (works when input not focused) +- **Ctrl+Enter** (Cmd+Enter): Transform & Download (works anywhere) +- **?**: Show/hide keyboard shortcuts help +- **Esc**: Close shortcuts dialog + ## Tech Stack - **Frontend**: Svelte 4 + Vite + TypeScript @@ -162,7 +181,7 @@ docker run -d \ ``` pnger/ -├── frontend/ # Svelte + TypeScript application +├── frontend/ # Svelte + TypeScript application │ ├── src/ │ │ ├── App.svelte # Main UI component (with live preview) │ │ ├── main.ts # Entry point @@ -170,11 +189,12 @@ pnger/ │ │ └── lib/ │ │ ├── api.ts # API client │ │ ├── preview.ts # Live preview logic -│ │ └── theme.ts # Theme management store +│ │ ├── theme.ts # Theme management store +│ │ └── presets.ts # Smart presets configuration │ ├── package.json │ ├── tsconfig.json │ └── vite.config.ts -├── backend/ # Express + TypeScript API server +├── backend/ # Express + TypeScript API server │ ├── src/ │ │ ├── index.ts # Express server │ │ ├── routes/ @@ -183,20 +203,21 @@ pnger/ │ │ └── image.ts # TypeScript types │ ├── package.json │ └── tsconfig.json -├── Dockerfile # Multi-stage build (frontend + backend) -├── docker-compose.yml # Unraid deployment config +├── Dockerfile # Multi-stage build (frontend + backend) +├── docker-compose.yml # Unraid deployment config ├── ROADMAP.md # Feature roadmap -└── UI_UPGRADE_NOTES.md # UI upgrade documentation +├── SPRINT1_CHANGES.md # Sprint 1 implementation details +└── UI_UPGRADE_NOTES.md # UI upgrade documentation ``` ## How It Works -1. User uploads an image via the web interface +1. User uploads an image via drag & drop, file browser, or clipboard paste 2. **Live preview** generates instantly using Canvas API -3. User adjusts parameters (width, height, quality, format, etc.) +3. User adjusts parameters (width, height, quality, format, etc.) or selects a preset 4. Preview updates in real-time (debounced 300ms) 5. User sees file size comparison and savings -6. When satisfied, user clicks "Transform & Download" +6. When satisfied, user clicks "Transform & Download" or presses Enter 7. Frontend sends image + parameters to backend API 8. Backend processes using Sharp (resize, crop, compress, convert) 9. Processed image returned directly to browser @@ -250,20 +271,48 @@ All configuration is handled via environment variables passed through Docker/Unr - **Instant Updates**: Debounced at 300ms for smooth performance - **Canvas-Based**: No server load, runs in browser +### Drag & Drop Upload +- **Drop Zone**: Large, responsive drop target with visual feedback +- **Multiple Methods**: Drag & drop, click to browse, or paste from clipboard +- **File Validation**: Instant validation with clear error messages +- **Visual States**: Hover and dragging states for better UX + +### Smart Presets +- **8 Pre-configured Options**: Common use cases ready to go +- **One-Click Apply**: Instantly sets all parameters +- **Visual Icons**: Easy identification of each preset +- **Responsive Grid**: Adapts to screen size + +### Keyboard Shortcuts +- **Productivity Focused**: Common operations accessible via keyboard +- **Help Dialog**: Press ? to see all shortcuts +- **Context Aware**: Enter works differently based on focus +- **Cross-Platform**: Supports both Ctrl and Cmd modifiers + ### Image Analysis - Original file size displayed - Preview size estimation - Savings/increase percentage - Visual feedback with color coding +## Recent Updates (Sprint 1) + +✅ **Drag & Drop Upload** - Drag images directly into the app +✅ **Clipboard Paste** - Paste images with Ctrl+V +✅ **Smart Presets** - 8 quick-access presets for common scenarios +✅ **Keyboard Shortcuts** - Fast workflow with keyboard controls +✅ **Enhanced UX** - Better visual feedback and error handling +✅ **Theme Contrast Fixes** - Improved text visibility in both themes + +See [SPRINT1_CHANGES.md](./SPRINT1_CHANGES.md) for detailed implementation notes. + ## Roadmap See [ROADMAP.md](./ROADMAP.md) for planned features including: -- Drag & drop upload - Batch processing -- Smart presets +- Advanced crop tool with visual selector - Watermarking -- Advanced crop tool +- Image filters and effects - And more! ## License @@ -283,4 +332,10 @@ Clean white interface with dark gold accents, perfect for inspecting dark images Sleek black interface with light gold accents, ideal for viewing light/transparent PNGs ### Live Preview -Side-by-side comparison showing original and transformed image with file size analysis \ No newline at end of file +Side-by-side comparison showing original and transformed image with file size analysis + +### Smart Presets +Quick-access buttons for common image optimization scenarios + +### Keyboard Shortcuts +Built-in help dialog showing all available shortcuts \ No newline at end of file