Piclet - Image Web Editor

Профессиональный веб-редактор изображений, построенный на современных технологиях с акцентом на производительность и чистую архитектуру.

Технологический стек

• Frontend: React 19 + TypeScript
• Сборка: Vite + плагины (Effector Babel, Tailwind CSS)
• State Management: Effector (архитектура FSD)
• Styling: Tailwind CSS 4
• Testing: Vitest + JSDOM
• Инструменты: ESLint, Prettier, Husky, lint-staged
• CI/CD: GitHub Actions + GitHub Pages

Основные возможности

• Viewport Control (Pro-Grade):
  • Масштабирование (Zoom): Плавный зум контента кнопками или колесиком мыши (Ctrl + Scroll).
  • Панорамирование (Pan): Перемещение изображения внутри фиксированного кадра для идеальной композиции.
  • Направляющие: Сетка 3x3 на подложке для кадрирования по правилу третей.
• Загрузка и рендеринг:
  • Быстрая загрузка локальных файлов.
  • Высокопроизводительный движок на базе HTML5 Canvas.
  • Прямая манипуляция DOM для плавного взаимодействия (60+ FPS).
• Набор фильтров:
  • Яркость, Контраст, Насыщенность.
  • Размытие (Blur), Сепия, Grayscale.
  • Изменение оттенка (Hue Rotate).
• Управление качеством:
  • Визуальный предпросмотр пикселизации прямо в редакторе.
  • Настройка компрессии при экспорте.
• Экспорт: Скачивание итогового изображения в формате JPEG с сохранением кадрирования и всех примененных фильтров.

Архитектура (FSD)

Проект строго следует методологии Feature-Sliced Design:

• app: Инициализация, Fork API Effector, глобальные стили.
• pages: Основная рабочая область (MainPage).
• widgets: Композиция фич и сущностей (Stage, Sidebar, Header).
• features: Независимые пользовательские сценарии:
  • viewport-control: Логика перемещения и зума (агностическая модель + чистая математика).
  • upload-image / download-image: Работа с файловой системой.
  • history-buttons: (Undo/Redo) управление историей изменений.
• entities: Бизнес-ядро (image):
  • CanvasEditor: Инкапсулированный движок отрисовки (без привязки к React/DOM событиям).
  • Определение типов (types.ts) и констант (constants.ts).
• shared:
  • config: Глобальные константы и метаданные версии.
  • ui: Атомарные компоненты (Button, Slider, Toggle).
  • lib: Хелперы (Version logging, Test setup).

Версионирование

В проекте используется гибридная система версионирования:

• Major.Minor.Patch (SemVer) в package.json.
• Git Hash: Автоматическая инъекция короткого хеша коммита при сборке.
• Build Date: Фиксация времени сборки.

Информацию о версии можно увидеть внизу боковой панели или в консоли браузера при запуске.

Развертывание и разработка

Установка зависимостей

npm install

Запуск в режиме разработки

npm run dev

Запуск тестов

npm run test

Сборка для продакшена

npm run build

CI/CD

Проект использует GitHub Actions для автоматизации проверок и деплоя:

Что выполняется автоматически

• При создании Pull Request в master или dev:

  • ✅ Линтинг кода (npm run lint)
  • ✅ Запуск тестов (npm run test)
  • ✅ Проверка сборки (npm run build)
  • 📦 Сохранение артефактов сборки (для проверки)

• При мердже в master:

  • ✅ Все проверки из PR
  • 🚀 Автоматический деплой на GitHub Pages

• При push в dev:

  • ✅ Все проверки (без деплоя)

Качество кода

• Тесты: Полное покрытие математической логики и бизнес-сторов Effector.
• Git Hooks: Husky запускает линтинг и тесты перед каждым коммитом, гарантируя стабильность веток.
• CI/CD: Автоматические проверки при каждом PR и деплой при мердже в master.