Stsezhka

Appearance

Use Case #07: Режим «Карандаш» ✏️ (Прямая линия по воздуху) ​

1. Жизненная ситуация (Боль пользователя) ​

Представь: Пользователь строит маршрут через глухой лес. Он дошел до реки. На схематичной карте моста нет, но юзер переключает слой на "Спутник" и своими глазами видит, что там лежит деревянный мостик (или колея от трактора).

В чем проблема на обычных сайтах: Юзер кликает мышкой на другой берег. Умный алгоритм сайта говорит: "Моста нет! В воду нельзя!" — и прокладывает маршрут в обход, делая огромный крюк в 40 км. Юзер пытается перетянуть синюю линию на свой брод — алгоритм сопротивляется. Юзер кричит в монитор: "Да пусти ты меня, я сам знаю, что там проход!". Но сайт не дает. Мечта юзера: Кнопка, которая временно отключает "умность" сайта и позволяет просто провести прямую линию по воздуху.

2. Как это ДОЛЖНО работать у тебя (UX-Магия) ​

Мы даем юзеру в руки "карандаш", чтобы он сам дорисовывал реальность.

Сценарий (Что видит юзер):

  1. В панели инструментов горит иконка 🧲 «Магнит» (Умная привязка включена).
  2. Юзер доходит до берега реки. Он нажимает на Магнит. Кнопка отключается, иконка меняется на ✏️ «Карандаш». Алгоритм выключен!
  3. Юзер делает клик на другом берегу — и сайт рисует АБСОЛЮТНО ПРЯМУЮ линию через реку. Без вопросов.
  4. Юзер "перешел" реку, снова нажимает 🧲 «Магнит» и продолжает строить маршрут по дорогам.

Визуальное чудо (Защита от плохой памяти): Этот кусок маршрута "по воздуху" ОБЯЗАН визуально отличаться! Например, он должен стать жирным синим или фиолетовым пунктиром. Зачем это нужно: Открыв трек перед выездом через 2 месяца, юзер посмотрит на карту, увидит пунктир и вспомнит: "Ага! Это же тот брод, который я нарисовал наугад по спутнику. Дороги там может не быть, это мой риск, беру запасные носки".

3. СЕКРЕТЫ ДЛЯ ПРОГРАММИСТА (Как спасти навигатор от зависания) ​

Нарисовать прямую линию в браузере просто. Но здесь кроются ДВЕ СТРАШНЫЕ ЛОВУШКИ. Из-за них навигаторы Garmin сходят с ума в лесу.

Ловушка №1: Проблема "Голой прямой" (Истерика навигатора) ​

Если юзер нарисует прямую линию через замерзшее озеро длиной 5 км, он поставит всего ДВЕ точки (Старт и Финиш). ❌ Если так и записать их в GPX, велокомпьютер в лесу запаникует: "Ой! Трек порвался! Расстояние до точки 5 км по воздуху, так нельзя!". И попытается САМ перепроложить маршрут по дорогам, уводя юзера в лес на крюк в 40 км прямо во время поездки.

✅ Как делать ПРАВИЛЬНО (Фейковое уплотнение): Мы должны ОБМАНУТЬ чужой навигатор. "Дружище, перед скачиванием мы должны программно «нашинковать» эту пустую прямую линию фейковыми точками каждые 20-30 метров! (В библиотеке Turf.js это делается одной строчкой turf.lineChunk()). В итоге в файл запишется густая цепочка из 250 координат по прямой. Навигатор увидит плотную цепочку, успокоится и покорно поведет юзера строго по этой прямой!"

Ловушка №2: Провал на графике гор ​

Когда алгоритм выключен, высота новых ручных точек равна нулю. На графике высот внизу экрана появится жуткий отвесный провал до уровня моря. ✅ Решение (Запрос рельефа): Наш сайт должен отправить эти новые "нашинкованные" точки к бесплатному API Рельефа (например, OpenTopoData). Сервер ответит реальными высотами, и профиль высот останется идеальным!

4. Высший пилотаж UX (Кисточка и Хоткей) ​

Опытные туристы ненавидят тянуться мышкой к кнопке "Карандаш". Сделай им два подарка:

  1. Горячая клавиша (Alt / Shift): Юзер просто зажимает и удерживает Alt на клавиатуре. Магнит временно отключается сам! Юзер делает два клика через реку по воздуху, отпускает Alt, и следующий клик уже автоматически строит умный путь по дорогам.
  2. Свободное рисование (Кисточка): Если при зажатом Alt юзер не просто кликает, а зажимает левую кнопку мыши и ведет курсор, сайт должен рисовать линию непрерывно (как кисточка в Paint). Это позволяет за 3 секунды идеально плавно "обвести" извилистый песчаный берег озера по спутнику!

Эпики и Задачи ​

Epic 1: Управление режимами (UI/UX) ​

  • Task 1.1: Создать состояние routingMode: 'auto' | 'manual' и переключатель (Магнит/Карандаш).
  • Task 1.2: Добавить глобальный слушатель клавиатуры (keydown / keyup) на клавишу Alt для временного переключения в manual.
  • Task 1.3: Реализовать режим freehand (Кисточка) при зажатом Alt и зажатой кнопке мыши (собирать массив координат по mousemove с троттлингом).

Epic 2: Рендер ручных сегментов ​

  • Task 2.1: Сохранять свойство mode: 'manual' внутри геометрии конкретных отрезков в сторе.
  • Task 2.2: Настроить line-dasharray в MapLibre для отображения ручных отрезков фиолетовым пунктиром (защита памяти юзера).

Epic 3: Подготовка GPX-экспорта (Обман навигатора) ​

  • Task 3.1: Разделить итоговую геометрию на auto и manual отрезки. Отрезки auto отправить на Децимацию (RDP), а отрезки manual — на Уплотнение (turf.lineChunk по 20м).
  • Task 3.2: Отправить уплотненные manual-координаты батч-запросом к Elevation API для восстановления Z-координаты (высоты), чтобы убрать провалы на профиле высот перед склейкой финального GPX.