From c1e6c6cfb80754fc6c494e5dcedf4d5c608cb437 Mon Sep 17 00:00:00 2001
From: Ivan <ppechenkoo@unprism.ru>
Date: Sat, 5 Jul 2025 15:32:00 +0300
Subject: [PATCH] trying new map

---
 src/components/main.vue | 1122 +++++++++++++++++----------------------
 1 file changed, 497 insertions(+), 625 deletions(-)

diff --git a/src/components/main.vue b/src/components/main.vue
index 370c5f2..eabf6db 100644
--- a/src/components/main.vue
+++ b/src/components/main.vue
@@ -1,6 +1,9 @@
 <template>
   <!-- map container -->
-  <div id="map" style="height: 100vh; background-color: transparent"></div>
+  <div
+    id="map"
+    style="height: 100vh; background-color: transparent; position: relative"
+  ></div>
 
   <!-- fullscreen video shown after 10 s of inactivity -->
   <div
@@ -20,684 +23,553 @@
 </template>
 
 <script>
-import L from "leaflet";
-import "leaflet/dist/leaflet.css";
-import "../assets/style/main.css";
-import tramRight from "../icons/tram-right.svg";
-import tramLeft from "../icons/tram-left.svg";
-import tramTopRight from "../icons/tram-top-right.svg";
-import tramBottomRight from "../icons/tram-bottom-right.svg";
-import tramTopLeft from "../icons/tram-top-left.svg";
-import tramBottomLeft from "../icons/tram-bottom-left.svg";
-
+import * as PIXI from "pixi.js";
+import { Viewport } from "pixi-viewport";
+import { Text, TextStyle, FillGradient } from "pixi.js";
 import { API_URL, GEO_URL } from "../config";
 
-const arrowTransforms = {
-  right: "",
-  left: "",
-  "top-right": "translate(-25%, -50%)",
-  "bottom-right": "translate(-25%, 50%)",
-  "top-left": "translate(-100%, -50%)",
-  "bottom-left": "translate(-100%, 50%)",
-};
-
 export default {
   name: "MainMap",
   data() {
     return {
-      map: null,
-      routeRenderer: null,
-      routeLatlngs: [],
-      stationMarkers: [],
-      sightMarkers: [],
-      tramMarker: null,
-      fullPolyline: null,
-      passedPolyline: null,
-      tramDirection: "right",
       routeId: null,
-      segmentLengths: [],
-      cumulativeDistances: [],
-      totalLength: 0,
-      sightPollTimer: null,
-      sightsData: [],
-      nearestSightId: null,
-      lastActivityTime: Date.now(),
+      pixiApp: null,
+      viewport: null,
+      routeGraphics: null,
       videoOverlayVisible: false,
-      currentVideoSrc: null,
-      lastVideoPreviewId: null,
-      inactivityInterval: null,
+      stationContainer: null,
+      toCanvasPoint: null,
+      routePollTimer: null,
+      attemptCount: 0,
+      routeGroup: null,
+      routeRotate: 0,
+      routeCentered: false,
+      viewportAdjusted: false, // авто‑фит сделан?
+      clampApplied: false, // границы перемещения выставлены?
+      stationZoomed: false, // приблизили ли к станции?
+      centerLatitude: null,
+      centerLongitude: null,
     };
   },
   async mounted() {
-    this.initializeMap();
-    await this.fetchContext(); // obtain current routeId
-    this.startTracking();
-    this.setupActivityListeners();
-    this.startInactivityCheck();
+    await this.createPixiApp();
+    await this.fetchContext();
+    this.startRoutePolling();
   },
+
   methods: {
-    async fetchSights() {
-      if (!this.routeId) return;
-      try {
-        const response = await fetch(`${API_URL}/route/${this.routeId}/sight`);
-        const data = await response.json();
-        console.log("Данные достопримечательностей:", data);
+    async createPixiApp() {
+      const container = document.getElementById("map");
+      if (!container || this.pixiApp) return;
 
-        if (Array.isArray(data)) {
-          this.sightsData = data;
-          const grouped = {};
+      // PixiJS v8: create then init
+      this.pixiApp = new PIXI.Application();
+      await this.pixiApp.init({
+        resizeTo: container,
+        antialias: true,
+        backgroundAlpha: 0,
+      });
 
-          data.forEach((sight) => {
-            const lat = sight.latitude.toFixed(2);
-            const lng = sight.longitude.toFixed(2);
-            const key = `${lat},${lng}`;
-            if (!grouped[key]) grouped[key] = [];
-            grouped[key].push(sight);
+      // add canvas to DOM (missing after last refactor)
+      container.appendChild(this.pixiApp.canvas);
+
+      // гарантируем, что канвас всегда принимает pointer‑/touch‑события
+      this.pixiApp.canvas.style.pointerEvents = "auto";
+      this.pixiApp.canvas.style.touchAction = "none";
+      this.pixiApp.canvas.style.zIndex = "1";
+
+      // убедимся, что video‑overlay действительно выше канваса
+      const overlay = document.getElementById("video-overlay");
+      if (overlay) overlay.style.zIndex = "10000";
+
+      // create interactive viewport (pixi v8: use "events")
+      this.viewport = new Viewport({
+        screenWidth: container.clientWidth,
+        screenHeight: container.clientHeight,
+        events: this.pixiApp.renderer.events, // EventSystem
+      });
+
+      this.routeGroup = new PIXI.Container();
+      // this.routeGroup.scale.set(2);
+      this.viewport.addChild(this.routeGroup);
+
+      // enable typical interactions (restored .decelerate())
+      this.viewport.drag().pinch().wheel().decelerate();
+      // если к этому моменту уже известны ограничения – сразу применим
+      this.updateViewportClampZoom();
+
+      // add viewport to stage
+      this.pixiApp.stage.addChild(this.viewport);
+
+      this.routeGraphics = new PIXI.Graphics();
+      this.routeGroup.addChild(this.routeGraphics);
+
+      this.stationContainer = new PIXI.Container();
+      this.routeGroup.addChild(this.stationContainer);
+    },
+    // Применяем ограничения масштабирования к viewport
+    updateViewportClampZoom() {
+      if (
+        this.viewport &&
+        this.routeScaleMin !== null &&
+        this.routeScaleMax !== null
+      ) {
+        const minScale = this.routeScaleMin / 20;
+        const maxScale = this.routeScaleMax / 20;
+        // убедимся, что min < max
+        if (minScale < maxScale) {
+          this.viewport.clampZoom({ minScale, maxScale });
+          console.log(
+            `%cViewport clampZoom → min=${minScale}, max=${maxScale}`,
+            "color: violet;"
+          );
+        }
+      }
+    },
+
+    // Рендерим линию маршрута по массиву координат [lat, lng]
+    drawRoute(latlngs) {
+      if (!Array.isArray(latlngs) || latlngs.length < 2) return;
+      // если graphics ещё не готов – запомним и перерисуем, когда он появится
+      if (!this.routeGraphics) {
+        // пробуем снова через animation frame
+        requestAnimationFrame(() => this.drawRoute(latlngs));
+        return;
+      }
+
+      // очищаем графику и задаём стиль обводки
+      this.routeGraphics.clear();
+      this.routeGraphics.setStrokeStyle({
+        width: 10,
+        color: "#ED1C24",
+        alpha: 1,
+      });
+      this.routeGraphics.beginPath();
+
+      // Bounding box для нормализации
+      const lats = latlngs.map((p) => p[0]);
+      const lngs = latlngs.map((p) => p[1]);
+      const minLat = Math.min(...lats);
+      const maxLat = Math.max(...lats);
+      const minLng = Math.min(...lngs);
+      const maxLng = Math.max(...lngs);
+
+      const canvas = this.pixiApp.canvas;
+      const width = canvas.width;
+      const height = canvas.height;
+      const padding = 40;
+
+      const scaleX = (width - padding * 2) / (maxLng - minLng || 1);
+      const scaleY = (height - padding * 2) / (maxLat - minLat || 1);
+      let scale = 30000;
+      console.log(scaleX, scaleY, scale);
+
+      const toPoint = ([lat, lng]) => {
+        const x = (lng - minLng) * scale + padding;
+        const y = (maxLat - lat) * scale + padding;
+        return { x, y };
+      };
+
+      // сохраняем функцию трансформации для станций
+      this.toCanvasPoint = toPoint;
+
+      const first = toPoint(latlngs[0]);
+      this.routeGraphics.moveTo(first.x, first.y);
+      for (let i = 1; i < latlngs.length; i++) {
+        const p = toPoint(latlngs[i]);
+        this.routeGraphics.lineTo(p.x, p.y);
+      }
+      this.routeGraphics.stroke();
+    },
+
+    // Отрисовываем станции: PIXI-кружок + подпись (RU+EN)
+    drawStations(stationsRu, stationsEn) {
+      console.groupCollapsed(
+        "%cdrawStations()",
+        "color: dodgerblue; font-weight: bold;"
+      );
+
+      // Базовые проверки
+      if (!Array.isArray(stationsRu) || !stationsRu.length) {
+        console.warn("stationsRu пуст или не массив → ничего не рисуем");
+        console.groupEnd();
+        return;
+      }
+      if (!this.toCanvasPoint) {
+        console.warn("toCanvasPoint ещё не готов → ждём drawRoute()");
+        console.groupEnd();
+        return;
+      }
+
+      // RU->EN словарь
+      const enById = {};
+      if (Array.isArray(stationsEn)) {
+        stationsEn.forEach((st) => (enById[st.id] = st.name));
+      } else {
+        console.warn("stationsEn не массив → EN названия пропущены");
+      }
+
+      // Очищаем слой
+      if (this.stationContainer) this.stationContainer.removeChildren();
+      else {
+        console.warn("stationContainer ещё не создан");
+        console.groupEnd();
+        return;
+      }
+
+      let drawn = 0;
+      stationsRu.forEach((st, idx) => {
+        // Проверяем координаты
+        if (
+          typeof st.latitude !== "number" ||
+          typeof st.longitude !== "number"
+        ) {
+          console.warn(`station[${idx}] (${st.id}) без координат → пропущен`);
+          return;
+        }
+
+        const { x, y } = this.toCanvasPoint([st.latitude, st.longitude]);
+        const ox = (st.offset_x || 0) / 1.25; // смещение по X (½)
+        const oy = (st.offset_y || 0) * 1; // смещение по Y (½)
+        if (isNaN(x) || isNaN(y)) {
+          console.warn(`station[${idx}] (${st.id}) координаты NaN → пропущен`);
+          return;
+        }
+
+        /* 1. Кружок PIXI */
+        const node = new PIXI.Container();
+        node.x = x;
+        node.y = y;
+        this.stationContainer.addChild(node);
+
+        const g = new PIXI.Graphics();
+        g.fill("#ED1C24")
+          .stroke({ width: 5, color: 0x000000 })
+          .circle(0, 0, 11)
+          .fill()
+          .stroke();
+        node.addChild(g);
+
+        // const g = new PIXI.Graphics();
+        // g.fill(0xffffff).stroke({ width: 2, color: 0x000000 });
+        // g.circle(0, 0, 60);
+        // node.addChild(g);
+
+        /* 2. Двухстрочная подпись (RU + EN) */
+        const solidWhite = new FillGradient({
+          type: "linear",
+          colorStops: [
+            { offset: 0, color: 0xffffff },
+            { offset: 1, color: 0xffffff },
+          ],
+        });
+
+        const labelGroup = new PIXI.Container();
+        labelGroup.x = ox;
+        labelGroup.y = oy;
+        // сохраняем исходные оффсеты, чтобы пересчитывать при повороте
+        labelGroup._ox = ox;
+        labelGroup._oy = oy;
+        node.addChild(labelGroup);
+
+        // RU
+        const ruStyle = new TextStyle({
+          fill: solidWhite,
+          fontSize: 20,
+          fontFamily: "Arial",
+          align: "right",
+          fontWeight: "bold",
+        });
+        const ruText = new Text({ text: st.name, style: ruStyle });
+        ruText.anchor.set(1, 0.5); // bottom-right
+        ruText.x = 24;
+        ruText.y = -20;
+        labelGroup.addChild(ruText);
+
+        // EN
+        const enName = enById[st.id];
+        if (enName) {
+          const enStyle = new TextStyle({
+            fill: solidWhite,
+            fontSize: 16,
+            fontFamily: "Arial",
+            align: "right",
+            fontWeight: "bold",
+          });
+          const enText = new Text({ text: enName, style: enStyle });
+          enText.anchor.set(1, -1); // top-right
+          enText.x = 24;
+          enText.y = ruText.y + 2;
+          labelGroup.addChild(enText);
+        }
+
+        drawn++;
+      });
+
+      console.log(`✅ Отрисовано станций: ${drawn}/${stationsRu.length}`);
+      console.groupEnd();
+
+      // гарантируем, что подписи горизонтальны
+      this.updateLabelOrientation();
+
+      /* ─── Center the view on the first station (once, keep current zoom) ─── */
+      if (!this.stationZoomed && this.stationContainer.children.length) {
+        const firstNode = this.stationContainer.children[0];
+        if (firstNode) {
+          // мировые координаты станции (учитывают поворот/масштаб routeGroup)
+          const b = firstNode.getBounds();
+          const worldPos = { x: b.x + b.width / 2, y: b.y + b.height / 2 };
+
+          // плавно перемещаем камеру к станции, масштаб НЕ меняем
+          this.viewport.animate({
+            time: 600,
+            position: { x: worldPos.x, y: worldPos.y },
+            easing: "easeInOutSine",
           });
 
-          Object.entries(grouped).forEach(([key, sights]) => {
-            const [lat, lng] = key.split(",").map(Number);
-            const count = sights.length;
-
-            const sightIcon = L.divIcon({
-              className: "sight-icon",
-              html: `
-            <div style="position: relative; width: 53px; height: 49px;">
-<svg xmlns="http://www.w3.org/2000/svg" width="53" height="49" fill="none" viewBox="0 0 53 49">
-  <path fill="#A6A6A6" fill-rule="evenodd" d="M0 20.571h52.717v-3.933L26.367.642 0 16.638v3.933ZM26.366 4.4 4.753 17.503h43.21L26.367 4.4Z" clip-rule="evenodd"/>
-  <path fill="#A6A6A6" d="M52.717 46.049H0V49h52.717v-2.95Zm-2.643-3.932H2.644v2.952h47.43v-2.952ZM9.463 22.245H5.498v17.421h3.965v-17.42Zm1.982 17.828h-7.93v1.151h7.93v-1.15Z"/>
-  <path fill="#A6A6A6" d="M4.401 21.3c-.3 0-.54.237-.54.532 0 .295.24.531.54.531.3 0 .54-.236.54-.531h5.077c0 .295.24.531.54.531a.534.534 0 0 0 .542-.531.534.534 0 0 0-.541-.531H4.4Zm17.696.945h-3.965v17.421h3.965v-17.42Zm1.984 17.828h-7.93v1.151h7.93v-1.15Z"/>
-  <path fill="#A6A6A6" d="M17.036 21.3c-.3 0-.54.237-.54.532 0 .295.24.531.54.531.3 0 .54-.236.54-.531h5.077c0 .295.24.531.54.531a.534.534 0 0 0 .541-.531.534.534 0 0 0-.54-.531h-6.158Zm17.705.945h-3.965v17.421h3.965v-17.42Zm1.983 17.828h-7.93v1.151h7.93v-1.15Z"/>
-  <path fill="#A6A6A6" d="M29.68 21.3a.534.534 0 0 0-.541.532c0 .295.24.531.54.531.3 0 .541-.236.541-.531h5.077c0 .295.24.531.54.531.3 0 .54-.236.54-.531a.534.534 0 0 0-.54-.531H29.68Zm17.695.946H43.41v17.421h3.965v-17.42Zm1.985 17.827h-7.93v1.151h7.93v-1.15Z"/>
-  <path fill="#A6A6A6" d="M42.313 21.3c-.3 0-.54.237-.54.532 0 .295.24.531.54.531.3 0 .54-.236.54-.531h5.077c0 .295.24.531.541.531.3 0 .54-.236.54-.531a.534.534 0 0 0-.54-.531h-6.158ZM26.848 10.065c0-.236-.233-.428-.518-.428-.286 0-.518.192-.518.428v.34c0 .28.232.508.518.508a.515.515 0 0 0 .518-.509v-.34Zm-7.338 2.228c-.24 0-.435.229-.435.517 0 .28.195.516.435.516h.901a.523.523 0 0 0 .526-.517.523.523 0 0 0-.526-.516h-.9Zm12.692 0c-.24 0-.436.229-.436.517 0 .28.195.516.436.516h.9a.523.523 0 0 0 .527-.517.523.523 0 0 0-.526-.516h-.901Zm-4.583-.487-.646-.406s-.075-.037-.12-.037H25.8a.23.23 0 0 0-.12.037l-.646.406a.219.219 0 0 0-.105.185v.472c0 .044.015.088.038.125l.563.82c.045.066.053.14.023.213l-.609 1.358s-.022.059-.022.088v1.35a.22.22 0 0 0 .225.222h2.343a.22.22 0 0 0 .225-.221v-1.35s0-.06-.022-.09l-.608-1.357a.22.22 0 0 1 .022-.214l.563-.819s.038-.081.038-.125v-.472a.21.21 0 0 0-.105-.185h.015Z"/>
-</svg>
-              ${
-                count > 1
-                  ? `<div style="position: absolute; top: -10px; right: -10px; background: #896F58; color: white; font-weight: bold; font-size: 16px; padding: 2px 10px; border-radius: 50%;">${count}</div>`
-                  : ""
-              }
-            </div>
-          `,
-              iconSize: [53, 49],
-              iconAnchor: [26, 24],
-            });
-
-            const marker = L.marker([lat, lng], {
-              icon: sightIcon,
-              pane: "markerPane",
-            }).addTo(this.map);
-
-            this.sightMarkers.push(marker);
+          this.viewport.once("moved-end", () => {
+            this.applyPanClamp();
           });
+          this.stationZoomed = true;
+          console.log(
+            `%c[centerToStation] world=(${worldPos.x.toFixed(
+              1
+            )},${worldPos.y.toFixed(1)})`,
+            "color: plum"
+          );
         }
-      } catch (error) {
-        console.error("Ошибка при получении достопримечательностей:", error);
-      }
-      // Stop polling once at least one sight marker exists
-      if (this.sightMarkers.length > 0 && this.sightPollTimer) {
-        clearInterval(this.sightPollTimer);
-        this.sightPollTimer = null;
       }
     },
 
-    // ── Poll fetchSights every 3 s until at least one sight is on the map ──
-    startSightPolling() {
-      if (this.sightPollTimer) return; // already polling
-      this.sightPollTimer = setInterval(() => {
-        this.fetchSights();
-        if (this.sightMarkers.length > 0) {
-          clearInterval(this.sightPollTimer);
-          this.sightPollTimer = null;
-        }
-      }, 3000);
+    // Поддерживаем горизонтальную ориентацию подписей
+    updateLabelOrientation() {
+      if (!this.stationContainer || !this.routeGroup) return;
+
+      // угол для компенсации
+      const angle = -this.routeGroup.rotation;
+
+      this.stationContainer.children.forEach((node) => {
+        node.children.forEach((child) => {
+          // Graphics‑объект (кружок) оставляем без изменений
+          if (child instanceof PIXI.Text) {
+            // просто выравниваем текст
+            child.rotation = angle;
+          } else if (child instanceof PIXI.Container) {
+            child.rotation = angle;
+
+            if (child._ox !== undefined && child._oy !== undefined) {
+              const cosA = Math.cos(angle);
+              const sinA = Math.sin(angle);
+              child.x = child._ox * cosA + child._oy * sinA;
+              child.y = -child._ox * sinA + child._oy * cosA;
+            }
+          }
+        });
+      });
     },
 
-    stopSightPolling() {
-      if (this.sightPollTimer) {
-        clearInterval(this.sightPollTimer);
-        this.sightPollTimer = null;
-      }
-    },
+    autoFitViewport() {
+      if (this.viewportAdjusted || !this.viewport || !this.routeGroup) return;
 
-    // ───────────────── user‑inactivity & video overlay helpers ──────────────────
-    setupActivityListeners() {
-      ["mousemove", "mousedown", "keydown", "touchstart", "scroll"].forEach(
-        (evt) => window.addEventListener(evt, this.resetInactivity)
+      // Глобальные габариты с учётом поворота/скейла
+      const b = this.routeGroup.getBounds();
+
+      const sw = this.viewport.screenWidth;
+      const sh = this.viewport.screenHeight;
+
+      // Подбираем масштаб так, чтобы занять ~90% экрана
+      const fill = 0.9;
+      let scale = Math.min(sw / b.width, sh / b.height) * fill;
+
+      // Учитываем scale_min / scale_max, если есть
+      if (this.routeScaleMin !== null)
+        scale = Math.max(scale, this.routeScaleMin / 10);
+      if (this.routeScaleMax !== null)
+        scale = Math.min(scale, this.routeScaleMax / 10);
+
+      const cx = b.x + b.width / 2;
+      const cy = b.y + b.height / 2;
+
+      // setZoom(scale, worldX, worldY) — Pixi‑Viewport v4/v8 API
+      this.viewport.setZoom(scale, cx, cy);
+      this.viewportAdjusted = true;
+
+      // выставляем границы пэннинга
+      this.applyPanClamp();
+
+      console.log(
+        `%c[autoFitViewport] scale=${scale.toFixed(2)}, center=(${cx.toFixed(
+          1
+        )},${cy.toFixed(1)})`,
+        "color: mediumspringgreen"
       );
     },
-    resetInactivity() {
-      this.lastActivityTime = Date.now();
-      if (this.videoOverlayVisible) this.hideVideoOverlay();
+    // Ограничиваем панорамирование так, чтобы пользователь
+    // не мог «уехать» далеко от маршрута, динамически распределяя «воздух»
+    // в зависимости от угла поворота (чтобы слева/сверху не оставалось пустоты).
+    applyPanClamp() {
+      if (!this.viewport || !this.routeGroup) return;
+
+      // Bounding‑box маршрута (учитывает rotation/scale)
+      const b = this.routeGroup.getBounds();
+
+      // Базовый «воздух» 10% от большей стороны
+      const pad = Math.max(b.width, b.height) * 0.1;
+
+      // Направление маршрута (радианы) — используем, чтобы перераспределить паддинги
+      const ang = this.routeGroup.rotation; // радианы
+      const cos = Math.cos(ang);
+      const sin = Math.sin(ang);
+
+      // Распределяем паддинги: если cos > 0 → маршрут «смотрит» вправо,
+      // поэтому больше воздуха добавляем справа, меньше слева и т.д.
+      const padLeft = (pad * (1 - cos)) / 2;
+      const padRight = (pad * (1 + cos)) / 2;
+      const padTop = (pad * (1 - sin)) / 2;
+      const padBottom = (pad * (1 + sin)) / 2;
+
+      this.viewport.clamp({
+        left: b.x - padLeft,
+        right: b.x + b.width + padRight,
+        top: b.y - padTop,
+        bottom: b.y + b.height + padBottom,
+        underflow: "center",
+      });
+
+      console.log(
+        `%c[applyPanClamp] angle=${((ang * 180) / Math.PI).toFixed(
+          1
+        )}°, pads L${padLeft.toFixed(1)} R${padRight.toFixed(
+          1
+        )} T${padTop.toFixed(1)} B${padBottom.toFixed(1)}`,
+        "color: orange"
+      );
     },
-    startInactivityCheck() {
-      if (this.inactivityInterval) return;
-      this.inactivityInterval = setInterval(() => {
-        if (Date.now() - this.lastActivityTime >= 300_000) {
-          this.showNearestSightVideo();
+    // ───────────────────────── polling helpers ─────────────────────────
+    startRoutePolling() {
+      if (this.routePollTimer) return; // already polling
+      this.routePollTimer = setInterval(() => {
+        console.debug("route poll → fetchContext() + fetchRoute()");
+        this.fetchContext().finally(() => this.fetchRoute());
+      }, 3000);
+    },
+    stopRoutePolling() {
+      if (this.routePollTimer) {
+        clearInterval(this.routePollTimer);
+        this.routePollTimer = null;
+      }
+    },
+
+    // Получаем контекст геолокации, чтобы определить актуальный routeId
+    async fetchContext() {
+      try {
+        const res = await fetch(`${GEO_URL}/v1/geolocation/context`);
+        const data = await res.json();
+
+        const ctxRouteId =
+          data?.routeId ?? data?.routeProgress?.routeId ?? null;
+
+        if (ctxRouteId) {
+          // если routeId изменился – обновим, иначе оставим прежний
+          const changed = ctxRouteId !== this.routeId;
+          this.routeId = ctxRouteId;
+
+          if (changed) {
+            this.fetchRoute();
+          } else if (!changed && !this.routeGraphics) {
+            // если маршрут ещё не нарисован (первый рендер), всё равно подтянем данные
+            this.fetchRoute();
+          }
+        } else {
+          console.warn("fetchContext: routeId не получен из контекста");
         }
-      }, 1000);
-    },
-    stopInactivityCheck() {
-      if (this.inactivityInterval) {
-        clearInterval(this.inactivityInterval);
-        this.inactivityInterval = null;
+      } catch (err) {
+        console.error("Ошибка при получении контекста геолокации:", err);
       }
     },
-    async showNearestSightVideo() {
-      if (!this.sightsData.length) return;
-
-      // choose closest sight that has a preview
-      let sight = this.sightsData.find((s) => s.id === this.nearestSightId);
-      if (!sight || !sight.video_preview) {
-        sight = this.sightsData.find((s) => s.video_preview);
-      }
-      if (!sight || !sight.video_preview) return;
-
-      if (this.lastVideoPreviewId === sight.video_preview) {
-        this.videoOverlayVisible = true;
-        return; // already showing it
-      }
-
-      const src = `${API_URL}/media/${sight.video_preview}/download`;
-      this.replaceVideo(src, sight.video_preview);
-    },
-    replaceVideo(src, previewId) {
-      const overlay = document.getElementById("video-overlay");
-      if (!overlay) return;
-
-      const vid = document.createElement("video");
-      vid.src = src;
-      vid.autoplay = true;
-      vid.muted = true;
-      vid.loop = true;
-      vid.playsInline = true;
-      vid.style.cssText = "width:100%;height:100%;object-fit:cover;";
-
-      vid.addEventListener("canplay", () => {
-        [...overlay.children].forEach((child) => {
-          if (child !== vid) overlay.removeChild(child);
-        });
-        this.videoOverlayVisible = true;
-        this.lastVideoPreviewId = previewId;
-      });
-
-      overlay.appendChild(vid);
-    },
-    hideVideoOverlay() {
-      this.videoOverlayVisible = false;
-      const overlay = document.getElementById("video-overlay");
-      if (overlay) overlay.innerHTML = "";
-      this.lastVideoPreviewId = null;
-    },
-    // ─────────────────────────────────────────────────────────────────────────────
-
-    initializeMap() {
-      this.routeRenderer = L.canvas({ padding: 0.5 });
-
-      this.map = L.map("map", {
-        zoomControl: false,
-        attributionControl: false,
-        zoomAnimation: false,
-        inertia: false,
-        preferCanvas: true,
-        renderer: this.routeRenderer,
-        maxZoom: 18,
-        minZoom: 10,
-        zoomSnap: 0,
-        zoomDelta: 0.1,
-        wheelPxPerZoomLevel: 50,
-      });
-      this.map.whenReady(() => {
-        const mapPane = this.map.getPane("mapPane") || this.map.getContainer();
-        mapPane.style.transition = "none";
-      });
-      this.map.createPane("routePane");
-      this.map.getPane("routePane").style.zIndex = 400;
-      this.map.setView([59.91776, 30.279188], 13);
-      this.map.createPane("tramPane");
-      this.map.getPane("tramPane").style.zIndex = 600;
-    },
 
+    // Получаем все данные маршрута и выводим их в консоль
     async fetchRoute() {
       if (!this.routeId) return;
-      fetch(`${API_URL}/route/${this.routeId}`)
-        .then((response) => response.json())
-        .then((data) => {
-          if (data.path && Array.isArray(data.path)) {
-            this.routeLatlngs = data.path.map((coord) => [coord[0], coord[1]]);
-            // ── Pre-compute cumulative distances for distance-based progress ──
-            this.segmentLengths = [];
-            this.cumulativeDistances = [0];
-            for (let i = 1; i < this.routeLatlngs.length; i++) {
-              const prev = L.latLng(this.routeLatlngs[i - 1]);
-              const curr = L.latLng(this.routeLatlngs[i]);
-              const segLen = prev.distanceTo(curr); // metres
-              this.segmentLengths.push(segLen);
-              this.cumulativeDistances.push(
-                this.cumulativeDistances[i - 1] + segLen
-              );
-            }
-            this.totalLength =
-              this.cumulativeDistances[this.cumulativeDistances.length - 1] ||
-              0;
-            if (
-              typeof data.scale_min === "number" &&
-              typeof data.scale_max === "number"
-            ) {
-              this.map.setMinZoom(data.scale_min);
-              this.map.setMaxZoom(data.scale_max);
-              console.log("Установлены масштабы:", {
-                minZoom: this.map.getMinZoom(),
-                maxZoom: this.map.getMaxZoom(),
-              });
-            }
-            if (data.center_latitude && data.center_longitude) {
-              console.log("Установка центра карты:", {
-                latitude: data.center_latitude,
-                longitude: data.center_longitude,
-              });
-              this.map.setView(
-                [data.center_latitude, data.center_longitude],
-                this.map.getMaxZoom()
-              );
-              console.log(
-                "Координаты центра установлены:",
-                this.map.getCenter()
-              );
-              if (typeof data.rotate === "number") {
-                if (!this.map.rotation) {
-                  this.map.rotation = { angle: 0 };
-                }
-                this.map.rotation.angle = data.rotate;
-                console.warn(
-                  "Leaflet не поддерживает поворот карты по умолчанию. Для этого нужна сторонняя библиотека, например Leaflet-RotatedMarker или Leaflet-bearing."
-                );
-              }
-            }
-
-            const routeBounds = L.latLngBounds(this.routeLatlngs);
-            if (data.center_latitude && data.center_longitude) {
-              console.log("Установка центра карты:", {
-                latitude: data.center_latitude,
-                longitude: data.center_longitude,
-              });
-              this.map.setView(
-                [data.center_latitude, data.center_longitude],
-                14
-              );
-              console.log(
-                "Координаты центра установлены:",
-                this.map.getCenter()
-              );
-            } else {
-              this.map.fitBounds(routeBounds);
-            }
-            this.fetchStations();
-          }
-        })
-        .catch((error) => {
-          console.error("Ошибка при получении маршрута:", error);
-        });
-    },
-
-    async fetchStations() {
-      if (!this.routeId) return;
-      this.stationMarkers.forEach(({ marker }) => {
-        if (this.map.hasLayer(marker)) {
-          this.map.removeLayer(marker);
-        }
-      });
-      this.stationMarkers = [];
+      if (this.routePollTimer) this.attemptCount += 1;
+      else this.attemptCount = 0;
+      this.attemptCount += 1;
+      console.log(
+        `%cFetchRoute attempt #${this.attemptCount} (routeId=${this.routeId})`,
+        "color: lightgreen;font-weight:bold;"
+      );
+      if (!this.routeId) {
+        console.warn("fetchRoute: routeId ещё не известен. Ждём контекст…");
+        return;
+      }
 
       try {
-        const [ruStations, enStations] = await Promise.all([
+        let gotPath = false;
+        const [route, stationsRu, stationsEn, sights] = await Promise.all([
+          fetch(`${API_URL}/route/${this.routeId}`).then((r) => r.json()),
           fetch(`${API_URL}/route/${this.routeId}/station`).then((r) =>
             r.json()
           ),
           fetch(`${API_URL}/route/${this.routeId}/station?lang=en`).then((r) =>
             r.json()
           ),
+          fetch(`${API_URL}/route/${this.routeId}/sight`).then((r) => r.json()),
         ]);
 
-        const enById = {};
-        if (Array.isArray(enStations)) {
-          enStations.forEach((st) => {
-            enById[st.id] = st.name;
-          });
-        }
+        console.log(
+          `%cFetchRoute attempt #${this.attemptCount}`,
+          "color: lightgreen; font-weight: bold;"
+        );
+        console.log("  Route →", route);
+        console.log("  Stations (ru) →", stationsRu.length);
+        console.log("  Stations (en) →", stationsEn.length);
+        console.log("  Sights →", sights.length);
+        if (typeof route.scale_min === "number")
+          this.routeScaleMin = route.scale_min;
+        if (typeof route.scale_max === "number")
+          this.routeScaleMax = route.scale_max;
+        if (typeof route.center_latitude === "number")
+          this.centerLatitude = route.center_latitude;
+        if (typeof route.center_longitude === "number")
+          this.centerLongitude = route.center_longitude;
+        // обновим ограничения масштабирования в viewport
+        this.updateViewportClampZoom();
 
-        if (Array.isArray(ruStations)) {
-          ruStations.forEach((station, index) => {
-            const circleMarker = L.circleMarker(
-              [station.latitude, station.longitude],
-              {
-                radius: 7,
-                color: "black",
-                fillColor: "red",
-                fillOpacity: 1,
-                weight: 2,
-                opacity: 1,
-                fill: true,
-                pane: "markerPane",
-              }
-            );
-
-            const enName = enById[station.id] || "";
-
-            circleMarker
-              .bindTooltip(
-                `<div class="station-label-wrapper">
-                   <div class="station-name-ru">${station.name}</div>
-                   <div class="station-name-en">${enName}</div>
-                 </div>`,
-                {
-                  permanent: true,
-                  direction: "center",
-                  offset: [station.offset_x || 0, station.offset_y || 0],
-                  className: "station-label-no-bg",
-                }
-              )
-              .openTooltip();
-
-            circleMarker.addTo(this.map);
-
-            this.stationMarkers.push({
-              marker: circleMarker,
-              station: {
-                ...station,
-                index,
-                latitude: station.latitude,
-                longitude: station.longitude,
-                offset_x: station.offset_x || 0,
-                offset_y: station.offset_y || 0,
-              },
-            });
-          });
-        }
-      } catch (error) {
-        console.error("Ошибка при получении станций маршрута:", error);
-      }
-    },
-
-    chooseTramDirection(latlng) {
-      if (!this.map) return "right";
-
-      const tramPt = this.map.latLngToLayerPoint(latlng);
-
-      const candidates = {
-        right: [1, 0],
-        left: [-1, 0],
-        "top-right": [1, -1],
-        "bottom-right": [1, 1],
-        "top-left": [-1, -1],
-        "bottom-left": [-1, 1],
-      };
-
-      const toPt = (ll) => this.map.latLngToLayerPoint(ll);
-
-      const routePts = this.routeLatlngs.map(toPt);
-
-      let bestDir = "right";
-      let bestScore = Number.POSITIVE_INFINITY;
-
-      Object.entries(candidates).forEach(([dir, vec]) => {
-        const len = Math.hypot(vec[0], vec[1]);
-        const unit = [vec[0] / len, vec[1] / len];
-
-        let score = 0;
-
-        [30, 60, 90].forEach((d) => {
-          const probe = L.point(tramPt.x + unit[0] * d, tramPt.y + unit[1] * d);
-
-          this.stationMarkers.forEach(({ marker }) => {
-            if (
-              probe.distanceTo(toPt(marker.getLatLng())) < 25 /* px threshold */
-            )
-              score += 3;
-          });
-          this.sightMarkers.forEach((m) => {
-            if (probe.distanceTo(toPt(m.getLatLng())) < 25) score += 3;
-          });
-
-          routePts.forEach((rpt) => {
-            if (probe.distanceTo(rpt) < 20) score += 1;
-          });
-        });
-
-        if (score < bestScore) {
-          bestScore = score;
-          bestDir = dir;
-        }
-      });
-
-      return bestDir;
-    },
-
-    createTramIcon(direction = "right") {
-      const svgMap = {
-        right: tramRight,
-        left: tramLeft,
-        "top-right": tramTopRight,
-        "bottom-right": tramBottomRight,
-        "top-left": tramTopLeft,
-        "bottom-left": tramBottomLeft,
-      };
-
-      const svgSrc = svgMap[direction] || tramRight;
-
-      const arrowTransform = arrowTransforms[direction] || "";
-
-      const circleOnRight = direction.startsWith("left");
-      const circleStyleSide = circleOnRight ? "right: 0;" : "left: 0;";
-      const anchorX = circleOnRight ? 121 : 19;
-
-      console.log(arrowTransform, direction, svgSrc);
-
-      return L.divIcon({
-        className: "tram-icon",
-        html: `
-          <div style="position: relative; width: 140px; height: 140px;">
-            <!-- arrow SVG -->
-            <img src="${svgSrc}"
-                 style="position:absolute; top:50%; ${
-                   circleOnRight ? "left:0;" : "right:0;"
-                 } transform:translateY(-50%) ${arrowTransform}; width:112px; height:82px;" />
-            <!-- tram location circle -->
-            <div style="
-              position: absolute;
-              top: 50%;
-              ${circleStyleSide}
-              width: 28px;
-              height: 28px;
-              background: yellow;
-              border: 5px solid black;
-              border-radius: 50%;
-              transform: translate(5px, -50%);
-              z-index: 2;"></div>
-          </div>
-        `,
-        iconSize: [140, 140],
-        iconAnchor: [anchorX, 70],
-      });
-    },
-
-    startTracking() {
-      setInterval(this.updateTramPosition, 500);
-    },
-
-    async fetchContext() {
-      try {
-        const response = await fetch(`${GEO_URL}/v1/geolocation/context`);
-        const data = await response.json();
-        const ctxRouteId =
-          (data && data.routeId) ||
-          (data.routeProgress && data.routeProgress.routeId) ||
-          null;
-
-        if (ctxRouteId && ctxRouteId !== this.routeId) {
-          this.routeId = ctxRouteId;
-        }
-
-        const ctxNearest =
-          data.nearestSightId ||
-          (data.routeProgress && data.routeProgress.nearestSightId);
-        if (ctxNearest) this.nearestSightId = ctxNearest;
-      } catch (error) {
-        console.error("Ошибка при получении контекста геолокации:", error);
-      }
-    },
-
-    async updateTramPosition() {
-      try {
-        const response = await fetch(`${GEO_URL}/v1/geolocation/context`);
-        const data = await response.json();
         if (
-          data.routeId &&
-          data.routeId !== 0 &&
-          data.routeId !== this.routeId
+          route?.path &&
+          Array.isArray(route.path) &&
+          route.path.length >= 2
         ) {
-          this.routeId = data.routeId;
-        }
-        // console.log("Текущие координаты трамвая:", data.currentCoordinates);
-
-        const ctxNearest =
-          data.nearestSightId ||
-          (data.routeProgress && data.routeProgress.nearestSightId);
-        if (ctxNearest) this.nearestSightId = ctxNearest;
-
-        const { percentageCompleted } = data.routeProgress;
-
-        if (this.totalLength === 0) return;
-
-        // Дистанция, пройденная трамваем (м)
-        const targetDistance = percentageCompleted * this.totalLength;
-
-        // Определяем сегмент маршрута, в котором находится трамвай
-        let segIdx = 0;
-        while (
-          segIdx < this.cumulativeDistances.length - 1 &&
-          this.cumulativeDistances[segIdx + 1] < targetDistance
-        ) {
-          segIdx++;
-        }
-
-        const segStart = this.routeLatlngs[segIdx];
-        const segEnd =
-          this.routeLatlngs[Math.min(segIdx + 1, this.routeLatlngs.length - 1)];
-        const segStartDist = this.cumulativeDistances[segIdx];
-        const segLen = this.cumulativeDistances[segIdx + 1] - segStartDist || 1;
-
-        // Интерполируем точку на сегменте
-        const t = segLen === 0 ? 0 : (targetDistance - segStartDist) / segLen;
-        const tramLatLng = [
-          segStart[0] + (segEnd[0] - segStart[0]) * t,
-          segStart[1] + (segEnd[1] - segStart[1]) * t,
-        ];
-
-        // Формируем координаты пройденной и оставшейся части
-        const passedCoords = this.routeLatlngs.slice(0, segIdx + 1);
-        passedCoords.push(tramLatLng);
-        const fullCoords = [tramLatLng, ...this.routeLatlngs.slice(segIdx + 1)];
-
-        // ── Update / create progress polylines without flicker ──
-        if (!this.passedPolyline) {
-          this.passedPolyline = L.polyline(passedCoords, {
-            color: "red",
-            weight: 7,
-            pane: "routePane",
-            renderer: this.routeRenderer,
-          }).addTo(this.map);
+          this.drawRoute(route.path);
+          this.drawStations(stationsRu, stationsEn);
+          if (typeof route.rotate === "number") {
+            // this.routeRotate = route.rotate;
+            this.routeGroup.rotation = (route.rotate * Math.PI) / 180;
+            this.updateLabelOrientation(); // подписи остаются горизонтальными
+          }
+          // после линии, станций и (возможного) поворота автоматически подгоняем viewport
+          this.autoFitViewport();
+          gotPath = true;
         } else {
-          this.passedPolyline.setLatLngs(passedCoords);
-        }
-
-        if (!this.fullPolyline) {
-          this.fullPolyline = L.polyline(fullCoords, {
-            color: "white",
-            weight: 7,
-            pane: "routePane",
-            renderer: this.routeRenderer,
-          }).addTo(this.map);
-        } else {
-          this.fullPolyline.setLatLngs(fullCoords);
-        }
-
-        if (this.tramMarker && !this.map.hasLayer(this.tramMarker)) {
-          this.tramMarker.addTo(this.map);
-        }
-
-        this.stationMarkers.forEach(({ marker, station }) => {
-          const stationIndex = this.routeLatlngs.reduce(
-            (closestIdx, latlng, idx) => {
-              const dist = L.latLng(latlng).distanceTo([
-                station.latitude,
-                station.longitude,
-              ]);
-              const closestDist = L.latLng(
-                this.routeLatlngs[closestIdx]
-              ).distanceTo([station.latitude, station.longitude]);
-              return dist < closestDist ? idx : closestIdx;
-            },
-            0
+          console.warn(
+            "fetchRoute: path отсутствует или слишком короткий. Повторяем запрос…"
           );
-
-          const stationPassed =
-            this.cumulativeDistances[stationIndex] <= targetDistance;
-          const color = stationPassed ? "red" : "white";
-
-          marker.setStyle({
-            color: "black",
-            fillColor: color,
-            fillOpacity: 1,
-            radius: 8,
-            weight: 4,
-          });
-
-          if (!this.map.hasLayer(marker)) {
-            marker.addTo(this.map);
-          }
-        });
-
-        const direction = this.chooseTramDirection(tramLatLng);
-
-        if (!this.tramMarker && tramLatLng[0] && tramLatLng[1]) {
-          this.tramMarker = L.marker(tramLatLng, {
-            icon: this.createTramIcon(direction),
-            pane: "tramPane",
-          }).addTo(this.map);
-          this.tramDirection = direction;
-        } else {
-          if (direction !== this.tramDirection) {
-            this.tramMarker.setIcon(this.createTramIcon(direction));
-            this.tramDirection = direction;
-          }
-          this.tramMarker.setLatLng(tramLatLng);
         }
-      } catch (error) {
-        console.error("Ошибка при получении геолокации трамвая:", error);
-      }
-    },
-  },
-  watch: {
-    // When routeId becomes available or changes, (re)load dependent data
-    routeId(newVal, oldVal) {
-      if (newVal && newVal !== oldVal) {
-        this.fetchRoute();
-        this.fetchSights();
-        this.fetchStations();
-        this.startSightPolling();
+        if (gotPath) {
+          this.stopRoutePolling();
+          this.attemptCount = 0;
+        } else {
+          this.startRoutePolling();
+        }
+      } catch (err) {
+        console.error("Ошибка при получении данных маршрута:", err);
+        this.startRoutePolling();
+        if (this.attemptCount > 1e6) this.attemptCount = 0;
       }
     },
   },
   beforeUnmount() {
-    if (this.sightPollTimer) {
-      clearInterval(this.sightPollTimer);
-      this.sightPollTimer = null;
-    }
-    this.stopInactivityCheck();
-    ["mousemove", "mousedown", "keydown", "touchstart", "scroll"].forEach(
-      (evt) => window.removeEventListener(evt, this.resetInactivity)
-    );
+    this.stopRoutePolling();
   },
 };
 </script>