Sebastian Krüger c97ec454f7 feat: add comprehensive Filters & Adjustments dialog with live preview ...

Implements professional image filter system with real-time preview:

**Adjustments Dialog** (`components/modals/adjustments-dialog.tsx`):
- Live preview canvas (max 400x400px) with real-time filter updates
- Organized filter categories: Color Adjustments, Filters, Effects
- 10 filter types with adjustable parameters:
  - **Brightness**: -100 to +100 adjustment
  - **Contrast**: -100 to +100 adjustment
  - **Hue/Saturation**: Hue rotation (±180°), Saturation (±100%), Lightness (±100%)
  - **Blur**: Gaussian blur with radius 1-50px
  - **Sharpen**: Amount 0-100%
  - **Invert**: One-click color inversion
  - **Grayscale**: Convert to monochrome
  - **Sepia**: Vintage sepia tone effect
  - **Threshold**: Binary black/white with adjustable threshold
  - **Posterize**: Reduce colors to 2-256 levels
- Slider controls for all adjustable parameters
- Reset button to restore default values
- Apply/Cancel actions with undo support
- Uses FilterCommand for history integration

**Image Menu** (`components/editor/image-menu.tsx`):
- New "Image" menu in header bar next to "File"
- "Filters & Adjustments..." menu item opens dialog
- Organized location for image-related operations
- Extensible for future image operations

**Integration**:
- Added Image menu to editor layout header
- Positioned between title and controls
- Keyboard-accessible with proper ARIA labels

**Technical Features**:
- Async filter application using Web Workers for large images
- Non-destructive editing with undo/redo support
- Real-time preview updates as sliders adjust
- FilterCommand integration for history
- Canvas cloning for before/after states
- Optimized preview rendering (scaled to 400px max)

**User Experience**:
- Modal dialog with backdrop
- Sidebar filter list with hover states
- Large preview area showing filter results
- Smooth slider interactions
- Instant visual feedback
- Professional Photoshop-like interface

All filters tested and working with undo/redo support.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

2025-11-21 19:36:38 +01:00

7.2 KiB

Raw Blame History

View Raw