Sebastian Krüger 54aac626a2 feat: add Import Image functionality to add images as new layers ...

Implements image import feature that adds images as new layers without clearing existing work:

**New Import Image Function** (`hooks/use-file-operations.ts`):
- `importImage()` - Creates new layer with imported image
- Preserves all existing layers and canvas state
- Automatically names layer from filename (removes extension)
- Loading indicator during import process
- Success/error toast notifications
- Supports all common image formats (PNG, JPG, WEBP, etc.)

**File Menu Integration** (`components/editor/file-menu.tsx`):
- Added "Import Image..." menu item with ImagePlus icon
- Positioned after "Open..." for logical flow
- Separate file input for import (only accepts images)
- Import handler with file input reset
- Keyboard accessible with proper ARIA roles

**Key Differences from Open:**
- **Open** - Replaces entire canvas (clears all layers, resets dimensions)
- **Import** - Adds image as new layer (preserves existing work)

**User Experience:**
- File > Import Image... opens native file picker
- Only image files accepted (image/*)
- Import creates layer with image dimensions
- Layer positioned at origin (0, 0)
- Can import multiple images as separate layers
- Works alongside existing drag & drop functionality

**Use Cases:**
- Adding reference images to canvas
- Building collages from multiple images
- Importing assets without losing current work
- Layer-based compositing workflows

All functionality tested and working with no build errors.

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

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

2025-11-21 18:31:28 +01:00

7.2 KiB

Raw Blame History

View Raw