BeadsViewer — Редактор бісерних схем

Сучасний веб-редактор для створення, редагування, підрахунку та фізичного відтворення схем вишивки й плетіння бісером по клітинках із каталогом Preciosa Traditional Czech Beads.

🌐 Демо

Спробувати без встановлення: foxalastor.github.io/BeadsViewer

Застосунок повністю клієнтський (без бекенду) — усі дані малюнка автозберігаються локально в браузері через IndexedDB.

Основні можливості

• Високопродуктивне Canvas 2D-полотно з viewport culling для великих схем.
• Реалістичний режим бісеру та квадратний режим сітки.
• Інструменти олівця, гумки, заливки, ліній, геометричних фігур, сердечка, піпетки, виділення та панорамування.
• Зум від 20% до 800%, undo/redo та зміна розміру полотна без втрати малюнка.
• Каталог Preciosa з пошуком, власними кольорами та імпортом JSON/CSV.
• Автозбереження в IndexedDB, ручне збереження .beadsproj, XML-імпорт/експорт.
• Підрахунок бісеру, список закупівлі та експорт CSV.
• Експорт схем у PNG/JPEG із сіткою, кодами кольорів і легендою.

Встановлення та запуск

Спочатку клонуй репозиторій і перейди в його теку — це потрібно незалежно від того, який варіант запуску оберете нижче:

git clone https://github.com/FoxAlastor/BeadsViewer.git
cd BeadsViewer

Варіант 1: Docker (рекомендовано)

Потрібні лише Docker і Docker Compose plugin (перевірити наявність: docker --version і docker compose version).

docker compose up --build

Після запуску відкрийте http://localhost:8080.

Зупинити контейнер:

docker compose down

Контейнер збирає production-версію через Node.js, а потім роздає статичні файли через Nginx. Налаштування SPA fallback уже додане, тому оновлення сторінки працює коректно.

Варіант 2: Node.js напряму

Потрібен Node.js 20+ та npm (перевірити наявність: node --version).

npm install
npm run dev

Dev-сервер буде доступний за адресою http://localhost:3000.

Production-збірка (генерує статичні файли в dist/, які потім можна роздавати будь-яким веб-сервером):

npm run build
npm run preview

Тести:

npm test

Якщо npm test запускається в середовищі без локального tsx, npm може запропонувати завантажити його через npx. Для звичайної розробки це не впливає на Docker-збірку.

Структура проєкту

src/                React-компоненти, canvas-рендерер, алгоритми та утиліти
data/               Каталог кольорів Preciosa
tools/              Офлайн-утиліти обробки PDF-каталогу
docker/nginx.conf   Nginx-конфіг для SPA
Dockerfile          Multi-stage production image
compose.yaml        Запуск застосунку через Docker Compose
test_suite.ts       Перевірка алгоритмів і серіалізації

Гарячі клавіші

Клавіша	Дія
B	Олівець
E	Гумка
G	Заливка
L	Лінія
I	Піпетка
M	Виділення прямокутником
D	Позначка «виконано»
H	Рука / панорамування
Space + ЛКМ	Панорамування полотна
Коліщатко миші	Зум із фокусом на курсор
Ctrl + Z	Undo
Ctrl + Y / Ctrl + Shift + Z	Redo
Ctrl + S	Зберегти проєкт
Ctrl + Plus / Minus / 0	Змінити / скинути масштаб
Escape	Зняти виділення або фокус