📸 Vue DarkRoom

Photo editor inspired by Adobe Lightroom.

✨ Features

🛠 Powerful Editing Tools

• Non-Destructive Editing: All changes (crop, colors) are applied virtually and only rendered upon export.
• Crop & Rotate:
  • Preset aspect ratios (1:1, 4:3, 16:9, etc.)
  • Free crop
  • Fine rotation (horizon straightening)
• Color Correction:
  • Brightness, Contrast, Saturation
  • Sepia, Grayscale, Invert
  • Blur effects

📦 Batch Processing & Export

• Batch Export: Process and download all edited photos at once as a ZIP archive.
• Compression Control: Adjust quality (0-100%) to balance file size and visual fidelity.
• Format Selection: Export as JPEG, PNG, or WebP.
• Resize: Option to resize images during export (Original, 1920px, 1280px, etc.).

---

🎹 Keyboard Shortcuts

Boost your productivity with these built-in hotkeys:

Key Combination	Action
Alt + ← / →	Navigate between photos
Backspace	Remove current photo
[ / ]	Rotate 90° Left / Right
' / \	Fine Rotate 1° Left / Right
C	Activate cropper
Enter	Apply cropper
Esc	Cancel cropper

---

🚀 Tech Stack

This project is built using the latest Vue ecosystem tools:

• Framework: Vue 3 (Composition API, <script setup>)
• Language: TypeScript for type safety
• State Management: Pinia
• UI Component Library: Vuetify 3
• Build Tool: Vite
• Image Processing:
  • Cropper.js for cropping logic
  • Compressor.js for client-side compression
  • JSZip for bundling files
  • FileSaver.js for downloading

---

🛠 Project Structure

src/
├── components/        # UI Components (Editor, Toolbar, SidePanel, etc.)
├── composables/       # Shared logic (Drag&Drop, Hotkeys, Editor logic)
├── layouts/           # App layouts (Default layout with global providers)
├── pages/             # Route views (Main index page)
├── stores/            # Pinia stores (PhotoStore, AppStore)
├── types/             # TypeScript interfaces and types
└── App.vue            # Root component

---

🏁 Getting Started

Prerequisites

• Node.js (v16+)
• Yarn

Installation

1. Clone the repository

   git clone https://github.com/a1lan1/vue-darkroom.git
   cd vue-darkroom

2. Install dependencies

   yarn install

3. Start development server

   yarn dev

4. Build for production

   yarn build

5. Run linters

   yarn lint
   yarn type-check

---

📄 License

This project is open source and available under the MIT License.