docs: update README with Sprint 1 features (drag/drop, presets, shortcuts)
This commit is contained in:
81
README.md
81
README.md
@@ -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
|
||||||
Reference in New Issue
Block a user