Проблема
Хотелось карманную схему московского метро, которая работает полностью офлайн, открывается мгновенно — и выглядит не как все.
Решение
Офлайн-PWA в стиле Hello Kitty: схема рисуется на Canvas по предрассчитанным координатам, маршрут считается прямо на клиенте в Web Worker. Ни одного сетевого запроса после установки.
Самое интересное — layout
Ориентир качества схемы — Яндекс.Метро: октолинейная геометрия (все линии под углами, кратными 45°), выпуклые кольца, радиалы-хорды, слитые пересадочные хабы. Для этого написан собственный решатель на Go: он берёт сырой граф станций и раскладывает его в красивую октолинейную схему. Качество меряется автоматически — quality_report.json с проверкой регрессий в CI.
Как устроено
- UI: React 19 + TypeScript, сборка Vite, рендер схемы — чистый Canvas 2D.
- Маршрутизация: собственный модуль, тяжёлые расчёты — в Web Worker.
- PWA: service worker с
registerType: 'prompt'— обновления под контролем пользователя. - Пайплайн данных: CSV + JSON-источники → Go-решатель →
fullGraph.json→ UI. Есть визуальный редактор схемы.
Стек
React 19, TypeScript, Vite 7, Canvas 2D, Go, Vitest, ESLint 9.