Poster Wall Designer

Ручной редактор композиции постеров на стене с возможностью сохранения в JSON.

Быстрый старт

1. Создайте палитру размеров

   • В правой панели "Poster Sizes" уже есть готовые размеры (A2, A3, квадратные)
   • Нажмите "+ Add Size" чтобы добавить свой размер
   • Настройте ширину, высоту, цвет для каждого размера

2. Разместите постеры на стене

   • Перетащите размер из палитры на холст (drag & drop)
   • Постеры автоматически привязываются к сетке
   • Перемещайте постеры по холсту перетаскиванием

3. Добавьте изображения

   • Дважды кликните на постер (double-click)
   • Или выберите постер и нажмите "Change Image"
   • Загрузите картинку

4. Сохраните проект

   • 💾 Save as JSON - сохраняет композицию со всеми изображениями
   • 📂 Load JSON - загружает сохранённый проект
   • 📥 Export PNG - экспортирует готовую композицию

Настройки стены

• Width/Height - размер холста
• Padding - отступы от краёв
• Gap - справочное значение расстояния между постерами
• Show Grid - сетка с привязкой
• Grid Step - шаг сетки для привязки
• Background - цвет фона

Горячие клавиши

• Single click - выделить постер
• Double click - загрузить изображение
• Drag - переместить постер
• Delete - удалить выбранный постер (через панель)

Формат JSON

{
  "settings": {
    "wallWidth": 1400,
    "wallHeight": 800,
    "padding": 40,
    "gap": 20,
    "background": "#f4f1ed",
    "showGrid": true,
    "gridStep": 20
  },
  "posters": [
    {
      "id": "poster-123",
      "sizeId": "s1",
      "x": 60,
      "y": 60,
      "width": 420,
      "height": 594,
      "label": "A2 Portrait",
      "imageSrc": "data:image/jpeg;base64,..."
    }
  ]
}

GitHub Pages

В репозитории уже лежит workflow .github/workflows/pages.yml:

• собирает проект на push в main (или по ручному запуску);
• задаёт VITE_BASE_PATH=/имя_репозитория/, чтобы ссылки работали из https://<user>.github.io/<repo>/;
• выгружает сборку из dist в GitHub Pages через actions/deploy-pages.

Локально сборка с тем же базовым путём:

VITE_BASE_PATH=/имя_репозитория/ pnpm run build

Технические детали

• React + TypeScript
• Konva для canvas рендеринга
• Изображения сохраняются в base64
• Snap to grid при перемещении
• Responsive UI