docs: update README with Sprint 1 features (drag/drop, presets, shortcuts)

This commit is contained in:
2026-03-08 21:38:01 -05:00
parent 3e35978b73
commit 98f03c9b22

View File

@@ -1,6 +1,6 @@
# PNGer - Modern PNG Editor & Resizer # 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 ## ✨ 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) - **Fit Modes**: Inside (resize only) or Cover (crop to fill)
### 🚀 Performance & Usability ### 🚀 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 - **Direct Download**: No server-side storage, immediate download
- **Modern UI**: Sleek, responsive TypeScript/Svelte design - **Modern UI**: Sleek, responsive TypeScript/Svelte design
- **File Analysis**: Original size, transformed size, savings percentage - **File Analysis**: Original size, transformed size, savings percentage
- **Debounced Updates**: Smooth preview generation (300ms delay) - **Debounced Updates**: Smooth preview generation (300ms delay)
- **Visual Feedback**: Loading states, error messages, success indicators - **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 ## Tech Stack
- **Frontend**: Svelte 4 + Vite + TypeScript - **Frontend**: Svelte 4 + Vite + TypeScript
@@ -162,7 +181,7 @@ docker run -d \
``` ```
pnger/ pnger/
├── frontend/ # Svelte + TypeScript application ├── frontend/ # Svelte + TypeScript application
│ ├── src/ │ ├── src/
│ │ ├── App.svelte # Main UI component (with live preview) │ │ ├── App.svelte # Main UI component (with live preview)
│ │ ├── main.ts # Entry point │ │ ├── main.ts # Entry point
@@ -170,11 +189,12 @@ pnger/
│ │ └── lib/ │ │ └── lib/
│ │ ├── api.ts # API client │ │ ├── api.ts # API client
│ │ ├── preview.ts # Live preview logic │ │ ├── preview.ts # Live preview logic
│ │ ── theme.ts # Theme management store │ │ ── theme.ts # Theme management store
│ │ └── presets.ts # Smart presets configuration
│ ├── package.json │ ├── package.json
│ ├── tsconfig.json │ ├── tsconfig.json
│ └── vite.config.ts │ └── vite.config.ts
├── backend/ # Express + TypeScript API server ├── backend/ # Express + TypeScript API server
│ ├── src/ │ ├── src/
│ │ ├── index.ts # Express server │ │ ├── index.ts # Express server
│ │ ├── routes/ │ │ ├── routes/
@@ -183,20 +203,21 @@ pnger/
│ │ └── image.ts # TypeScript types │ │ └── image.ts # TypeScript types
│ ├── package.json │ ├── package.json
│ └── tsconfig.json │ └── tsconfig.json
├── Dockerfile # Multi-stage build (frontend + backend) ├── Dockerfile # Multi-stage build (frontend + backend)
├── docker-compose.yml # Unraid deployment config ├── docker-compose.yml # Unraid deployment config
├── ROADMAP.md # Feature roadmap ├── 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 ## 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 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) 4. Preview updates in real-time (debounced 300ms)
5. User sees file size comparison and savings 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 7. Frontend sends image + parameters to backend API
8. Backend processes using Sharp (resize, crop, compress, convert) 8. Backend processes using Sharp (resize, crop, compress, convert)
9. Processed image returned directly to browser 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 - **Instant Updates**: Debounced at 300ms for smooth performance
- **Canvas-Based**: No server load, runs in browser - **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 ### Image Analysis
- Original file size displayed - Original file size displayed
- Preview size estimation - Preview size estimation
- Savings/increase percentage - Savings/increase percentage
- Visual feedback with color coding - 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 ## Roadmap
See [ROADMAP.md](./ROADMAP.md) for planned features including: See [ROADMAP.md](./ROADMAP.md) for planned features including:
- Drag & drop upload
- Batch processing - Batch processing
- Smart presets - Advanced crop tool with visual selector
- Watermarking - Watermarking
- Advanced crop tool - Image filters and effects
- And more! - And more!
## License ## License
@@ -284,3 +333,9 @@ Sleek black interface with light gold accents, ideal for viewing light/transpare
### Live Preview ### Live Preview
Side-by-side comparison showing original and transformed image with file size analysis 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