📖 Анализ высот и интерактивная синхронизация (Hover Sync)

🧠 1. Анатомия инструмента и Логика движка (Tool Anatomy & Engine Logic)

• Что это такое? Функция Hover Sync (интерактивная синхронизация курсора и карты) решает главную проблему планирования рельефных поездок для велосипедиста: визуализацию точного географического местоположения тяжелых подъемов и спусков. Водя мышкой по графику высот под картой, пользователь видит точное положение соответствующей точки на реальной дороге.
• Активация: Функция активируется автоматически сразу после построения любого маршрута, содержащего как минимум две опорные точки. Панель графика высот разворачивается в нижней части экрана. Наведение курсора на SVG-диаграмму рельефа запускает синхронный трекинг.
• Физика интерфейса (Basic UI Physics):
  • Вертикальная тонкая линия-визир: Перемещается по графику высот вслед за курсором мыши, показывая точную координату расстояния.
  • Яркий жёлтый круговой маркер с белой обводкой: Синхронно перемещается по синей линии маршрута на карте, указывая географическое положение текущей точки курсора.
  • Интерактивный тултип: Отображает текущую высоту в метрах, накопленную дистанцию в километрах и уклон в процентах (например, 6.4 km, 154 m, уклон 8%).
  • Цветовой градиент графика: Зеленый цвет показывает плоские участки (уклон < 2%), желтый — умеренные подъемы (2% - 6%), оранжевый и красный — крутые градиенты (> 6%).
• 

Подробная инструкция для Арт-директора: Сделать снимок экрана с курсором мыши, наведенным на крутой пик нижнего графика высот, и жёлтым круглым маркером, отображающимся на соответствующем повороте лесной дороги на карте.

🎬 2. Матрица сценариев (Все комбинации взаимодействия)

Сценарий А: Сканирование крутых подъемов (Hill Analysis)

• Действие пользователя: Провести курсор мыши над крутым холмом (высоким пиком) на графике высот под картой.
• Реакция системы (Магия): Вертикальная линия встает на вершину холма. Тултип окрашивается в предупреждающий красный цвет, показывая уклон в 12%. На карте жёлтая точка встает прямо перед серпантином.
• Физика процесса («Почему»): Клиент рассчитывает относительное положение курсора по оси X относительно ширины графика, находит ближайшую географическую точку в массиве LineString ([lng, lat, ele]) по накопленной дистанции и мгновенно перемещает маркер на карте, обновляя состояние hoveredDistanceKm в usePlannerStore.
• 

Подробная инструкция: Наведение курсора на холм с индикацией крутого уклона на графике и точным отображением жёлтого маркера на карте.

Сценарий Б: Движение по плоскому участку (Flatlands)

• Действие пользователя: Навести курсор на плоский зеленый участок графика высот.
• Реакция системы (Магия): Вертикальный визир плавно скользит по ровной линии. Тултип горит зеленым цветом с уклоном в 0% или 1%. Жёлтый маркер скользит по прямому шоссе на карте.
• Физика процесса («Почему»): Система интерполирует высоту между соседними координатами и определяет отсутствие градиента наклона, транслируя позицию на плоский отрезок дороги.
• 

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

Сценарий В: Синхронизация покрытия (Surface Hover)

• Действие пользователя: Навести мышь на разноцветную горизонтальную шкалу типов покрытий (Surface Bar) под графиком высот.
• Реакция системы (Магия): Жёлтый маркер прыгает на начало сегмента дороги с выбранным типом покрытия (например, с асфальта на лесной грунт).
• Физика процесса («Почему»): Система сопоставляет сегменты с разметкой покрытия (asphalt, gravel, dirt) из JSON-ответа маршрутизатора и фокусирует карту на стартовом индексе этого типа покрытия.
• 

Подробная инструкция: Фокус на цветном баре покрытий внизу панели с соответствующим положением жёлтого маркера на карте.

🚨 3. Защита от дурака и Крайние случаи (QA Guide)

• Деструктивный сценарий: Быстрое хаотичное перемещение мыши по всей ширине графика из стороны в сторону (Throttling Stress Test) с целью сломать отрисовку жёлтого маркера.
• Реакция UI: Маркер перемещается плавно, без рывков, задержек и утечек памяти. Координаты курсора обрабатываются через оптимизированный обработчик событий с ограничением частоты кадров (debounced/throttled) в React-компоненте.
• Точный текст ошибки (Toast): В случае потери связи с высотным сервером во время загрузки трека выводится тост: "🛡️ Ошибка загрузки высотных данных. Повторите попытку позже."
• 

Подробная инструкция: Снимок экрана с индикатором ошибки высот или пустым полем графика при отключенном сервере.