From 139d9e74eac2474fe10878e0b5094059b9b68e56 Mon Sep 17 00:00:00 2001
From: fisenko <kkzemeow@gmail.com>
Date: Fri, 7 Nov 2025 07:59:11 +0000
Subject: [PATCH] =?UTF-8?q?#19=20=D0=A4=D0=B8=D0=BA=D1=81=20=D0=BE=D1=88?=
 =?UTF-8?q?=D0=B8=D0=B1=D0=BA=D0=B8=20=D0=B1=D0=B8=D0=BB=D0=B4=D0=B0=20+?=
 =?UTF-8?q?=20=D0=BD=D0=B0=D0=B7=D0=B2=D0=B0=D0=BD=D0=B8=D0=B5=20=D0=B4?=
 =?UTF-8?q?=D0=BB=D1=8F=20=D0=BC=D0=B0=D1=80=D1=88=D1=80=D1=83=D1=82=D0=BE?=
 =?UTF-8?q?=D0=B2=20(#20)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reviewed-on: https://gitea.unprism.ru/KRBL/WhiteNightsAdminPanel/pulls/20
Reviewed-by: Микаэл Оганесян <15lu.akari@unprism.ru>
Co-authored-by: fisenko <kkzemeow@gmail.com>
Co-committed-by: fisenko <kkzemeow@gmail.com>
---
 src/pages/MapPage/index.tsx                   |   64 +-
 .../route-preview/web-gl/web-gl-version.tsx   | 3450 ++++++++---------
 src/shared/store/SightsStore/index.tsx        |    4 +
 tsconfig.tsbuildinfo                          |    2 +-
 4 files changed, 1786 insertions(+), 1734 deletions(-)

diff --git a/src/pages/MapPage/index.tsx b/src/pages/MapPage/index.tsx
index 33fdf5d..ab72571 100644
--- a/src/pages/MapPage/index.tsx
+++ b/src/pages/MapPage/index.tsx
@@ -124,6 +124,7 @@ export const clearMapCaches = () => {
 interface ApiRoute {
   id: number;
   route_number: string;
+  route_name: string;
   path: [number, number][];
   center_latitude: number;
   center_longitude: number;
@@ -370,6 +371,7 @@ class MapStore {
     this.routes = routeResponses.map((res) => ({
       id: res.data.id,
       route_number: res.data.route_number,
+      route_name: res.data.route_name || "",
       path: res.data.path,
       center_latitude: res.data.center_latitude,
       center_longitude: res.data.center_longitude,
@@ -2302,6 +2304,8 @@ const MapSightbar: React.FC<MapSightbarProps> = observer(
         });
         feature.setId(`route-${route.id}`);
         feature.set("featureType", "route");
+        feature.set("routeName", route.route_name);
+        feature.set("routeNumber", route.route_number);
         return feature;
       });
 
@@ -2317,11 +2321,18 @@ const MapSightbar: React.FC<MapSightbarProps> = observer(
 
     const filteredFeatures = useMemo(() => {
       if (!searchQuery.trim()) return allFeatures;
-      return allFeatures.filter((f) =>
-        ((f.get("name") as string) || "")
-          .toLowerCase()
-          .includes(searchQuery.toLowerCase())
-      );
+      const normalizedQuery = searchQuery.toLowerCase();
+      return allFeatures.filter((f) => {
+        const candidates = [
+          (f.get("name") as string) || "",
+          (f.get("description") as string) || "",
+          (f.get("routeName") as string) || "",
+          (f.get("routeNumber") as string) || "",
+        ];
+        return candidates.some((value) =>
+          value.toLowerCase().includes(normalizedQuery)
+        );
+      });
     }, [allFeatures, searchQuery]);
 
     const handleFeatureClick = useCallback(
@@ -2649,6 +2660,38 @@ const MapSightbar: React.FC<MapSightbarProps> = observer(
               featureType === "station" &&
               description &&
               description.trim() !== "";
+            const routeName =
+              featureType === "route"
+                ? (feature.get("routeName") as string) || ""
+                : "";
+            const routeNumber =
+              featureType === "route"
+                ? (feature.get("routeNumber") as string) || fName
+                : "";
+            const routeNumberTrimmed = routeNumber.trim();
+            const routeNameTrimmed = routeName.trim();
+            const displayName =
+              featureType === "route" ? routeNumberTrimmed || fName : fName;
+            const showRouteName =
+              featureType === "route" &&
+              routeNameTrimmed !== "" &&
+              routeNameTrimmed !== displayName;
+            const titleParts: string[] = [];
+            if (featureType === "route") {
+              if (routeNumberTrimmed) {
+                titleParts.push(routeNumberTrimmed);
+              }
+              if (routeNameTrimmed) {
+                titleParts.push(routeNameTrimmed);
+              }
+            }
+            const titleText =
+              featureType === "route"
+                ? titleParts.join(" • ") ||
+                  routeNumberTrimmed ||
+                  routeNameTrimmed ||
+                  fName
+                : fName;
 
             return (
               <div
@@ -2667,7 +2710,7 @@ const MapSightbar: React.FC<MapSightbarProps> = observer(
                     checked={isChecked}
                     onChange={() => handleCheckboxChange(fId)}
                     onClick={(e) => e.stopPropagation()}
-                    aria-label={`Выбрать ${fName}`}
+                    aria-label={`Выбрать ${titleText}`}
                   />
                 </div>
                 <div
@@ -2692,9 +2735,9 @@ const MapSightbar: React.FC<MapSightbarProps> = observer(
                     <span
                       className={`font-medium whitespace-nowrap overflow-x-auto block
                       scrollbar-visible`}
-                      title={fName}
+                      title={titleText}
                     >
-                      {fName}
+                      {displayName}
                     </span>
                   </div>
                   {showDescription && (
@@ -2702,6 +2745,11 @@ const MapSightbar: React.FC<MapSightbarProps> = observer(
                       {description}
                     </div>
                   )}
+                  {showRouteName && (
+                    <div className="mt-1 text-xs text-gray-600">
+                      {routeNameTrimmed}
+                    </div>
+                  )}
                 </div>
                 <div className="flex-shrink-0 flex items-center space-x-1 opacity-60 group-hover:opacity-100">
                   <button
diff --git a/src/pages/Route/route-preview/web-gl/web-gl-version.tsx b/src/pages/Route/route-preview/web-gl/web-gl-version.tsx
index 8c4190b..51e7977 100644
--- a/src/pages/Route/route-preview/web-gl/web-gl-version.tsx
+++ b/src/pages/Route/route-preview/web-gl/web-gl-version.tsx
@@ -1,1725 +1,1725 @@
-function initWebGLContext(
-  canvas: HTMLCanvasElement
-): WebGLRenderingContext | null {
-  const gl =
-    (canvas.getContext("webgl") as WebGLRenderingContext | null) ||
-    (canvas.getContext("experimental-webgl") as WebGLRenderingContext | null);
-  return gl;
-}
-
-function resizeCanvasToDisplaySize(canvas: HTMLCanvasElement): boolean {
-  const dpr = Math.max(1, window.devicePixelRatio || 1);
-  const displayWidth = Math.floor(canvas.clientWidth * dpr);
-  const displayHeight = Math.floor(canvas.clientHeight * dpr);
-  if (canvas.width !== displayWidth || canvas.height !== displayHeight) {
-    canvas.width = displayWidth;
-    canvas.height = displayHeight;
-    return true;
-  }
-  return false;
-}
-
-export const WebGLMap = observer(() => {
-  const canvasRef = useRef<HTMLCanvasElement | null>(null);
-  const glRef = useRef<WebGLRenderingContext | null>(null);
-  const programRef = useRef<WebGLProgram | null>(null);
-  const bufferRef = useRef<WebGLBuffer | null>(null);
-  const pointProgramRef = useRef<WebGLProgram | null>(null);
-  const pointBufferRef = useRef<WebGLBuffer | null>(null);
-  const screenLineProgramRef = useRef<WebGLProgram | null>(null);
-  const screenLineBufferRef = useRef<WebGLBuffer | null>(null);
-  const attribsRef = useRef<{ a_pos: number } | null>(null);
-  const uniformsRef = useRef<{
-    u_cameraPos: WebGLUniformLocation | null;
-    u_scale: WebGLUniformLocation | null;
-    u_resolution: WebGLUniformLocation | null;
-    u_color: WebGLUniformLocation | null;
-  } | null>(null);
-
-  const { routeData, stationData, stationDataEn, stationDataZh, sightData } =
-    useMapData() as any;
-  const {
-    position,
-    scale,
-    setPosition,
-    setScale,
-    isAutoMode,
-    setIsAutoMode,
-    screenCenter,
-    setScreenCenter,
-    userActivityTimestamp,
-    updateUserActivity,
-  } = useTransform();
-
-  const cameraAnimationStore = useCameraAnimationStore();
-
-  const scaleLimitsRef = useRef({
-    min: null as number | null,
-    max: null as number | null,
-  });
-
-  useEffect(() => {
-    if (
-      routeData?.scale_min !== undefined &&
-      routeData?.scale_max !== undefined
-    ) {
-      scaleLimitsRef.current = {
-        min: routeData.scale_min / 10,
-        max: routeData.scale_max / 10,
-      };
-    }
-  }, [routeData?.scale_min, routeData?.scale_max]);
-
-  const clampScale = useCallback((value: number) => {
-    const { min, max } = scaleLimitsRef.current;
-
-    if (min === null || max === null) {
-      return value;
-    }
-
-    const clampedValue = Math.max(min, Math.min(max, value));
-
-    return clampedValue;
-  }, []);
-  const { selectedLanguage } = useGeolocationStore();
-  const positionRef = useRef(position);
-  const scaleRef = useRef(scale);
-  const setPositionRef = useRef(setPosition);
-  const setScaleRef = useRef(setScale);
-
-  useEffect(() => {
-    setPositionRef.current = setPosition;
-  }, [setPosition]);
-
-  useEffect(() => {
-    setScaleRef.current = setScale;
-  }, [setScale]);
-
-  useEffect(() => {
-    if (routeData) {
-    }
-  }, [routeData]);
-
-  useEffect(() => {
-    positionRef.current = position;
-  }, [position]);
-
-  useEffect(() => {
-    scaleRef.current = scale;
-  }, [scale]);
-
-  const rotationAngle = useMemo(() => {
-    const deg = (routeData as any)?.rotate ?? 0;
-    return (deg * Math.PI) / 180;
-  }, [routeData]);
-
-  const {
-    position: animatedYellowDotPosition,
-    animateTo: animateYellowDotTo,
-    setPositionImmediate: setYellowDotPositionImmediate,
-  } = useAnimatedPolarPosition(0, 0, 800);
-
-  const routePath = useMemo(() => {
-    if (!routeData?.path || routeData?.path.length === 0)
-      return new Float32Array();
-    const centerLat = routeData.center_latitude;
-    const centerLon = routeData.center_longitude;
-    if (centerLat === undefined || centerLon === undefined)
-      return new Float32Array();
-
-    const cos = Math.cos(rotationAngle);
-    const sin = Math.sin(rotationAngle);
-
-    const verts: number[] = [];
-    for (const [lat, lon] of routeData.path) {
-      const local = coordinatesToLocal(lat - centerLat, lon - centerLon);
-      const x = local.x * UP_SCALE;
-      const y = local.y * UP_SCALE;
-      const rx = x * cos - y * sin;
-      const ry = x * sin + y * cos;
-      verts.push(rx, ry);
-    }
-    return new Float32Array(verts);
-  }, [
-    routeData?.path,
-    routeData?.center_latitude,
-    routeData?.center_longitude,
-    rotationAngle,
-  ]);
-
-  const transformedTramCoords = useMemo(() => {
-    const centerLat = routeData?.center_latitude;
-    const centerLon = routeData?.center_longitude;
-    if (centerLat === undefined || centerLon === undefined) return null;
-
-    const coords: any = apiStore?.context?.currentCoordinates;
-    if (!coords) return null;
-
-    const local = coordinatesToLocal(
-      coords.latitude - centerLat,
-      coords.longitude - centerLon
-    );
-    const x = local.x * UP_SCALE;
-    const y = local.y * UP_SCALE;
-    const cos = Math.cos(rotationAngle);
-    const sin = Math.sin(rotationAngle);
-    const rx = x * cos - y * sin;
-    const ry = x * sin + y * cos;
-
-    return { x: rx, y: ry };
-  }, [
-    routeData?.center_latitude,
-    routeData?.center_longitude,
-    apiStore?.context?.currentCoordinates,
-    rotationAngle,
-  ]);
-
-  useEffect(() => {
-    const callback = (newPos: { x: number; y: number }, newZoom: number) => {
-      setPosition(newPos);
-      setScale(newZoom);
-    };
-
-    cameraAnimationStore.setUpdateCallback(callback);
-
-    cameraAnimationStore.syncState(position, scale);
-
-    return () => {
-      cameraAnimationStore.setUpdateCallback(null);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (
-      routeData?.scale_min !== undefined &&
-      routeData?.scale_max !== undefined
-    ) {
-      cameraAnimationStore.setMaxZoom(routeData.scale_max / SCALE_FACTOR);
-      cameraAnimationStore.setMinZoom(routeData.scale_min / SCALE_FACTOR);
-    }
-  }, [routeData?.scale_min, routeData?.scale_max, cameraAnimationStore]);
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      const timeSinceActivity = Date.now() - userActivityTimestamp;
-      if (timeSinceActivity >= 5000 && !isAutoMode) {
-        setIsAutoMode(true);
-      }
-    }, 1000);
-
-    return () => clearInterval(interval);
-  }, [userActivityTimestamp, isAutoMode, setIsAutoMode]);
-
-  useEffect(() => {
-    if (cameraAnimationStore.isActivelyAnimating) {
-      return;
-    }
-
-    if (isAutoMode && transformedTramCoords && screenCenter) {
-      const transformedStations = stationData
-        ? stationData
-            .map((station: any) => {
-              const centerLat = routeData?.center_latitude;
-              const centerLon = routeData?.center_longitude;
-              if (centerLat === undefined || centerLon === undefined)
-                return null;
-
-              const local = coordinatesToLocal(
-                station.latitude - centerLat,
-                station.longitude - centerLon
-              );
-              const x = local.x * UP_SCALE;
-              const y = local.y * UP_SCALE;
-              const cos = Math.cos(rotationAngle);
-              const sin = Math.sin(rotationAngle);
-              const rx = x * cos - y * sin;
-              const ry = x * sin + y * cos;
-
-              return {
-                longitude: rx,
-                latitude: ry,
-                id: station.id,
-              };
-            })
-            .filter(Boolean)
-        : [];
-
-      if (
-        transformedTramCoords &&
-        screenCenter &&
-        transformedStations &&
-        scaleLimitsRef.current !== null &&
-        scaleLimitsRef.current.max !== null &&
-        scaleLimitsRef.current.min &&
-        scaleLimitsRef.current.min !== null
-      ) {
-        cameraAnimationStore.setMaxZoom(scaleLimitsRef.current!.max);
-        cameraAnimationStore.setMinZoom(scaleLimitsRef.current!.min);
-
-        cameraAnimationStore.syncState(positionRef.current, scaleRef.current);
-
-        cameraAnimationStore.followTram(
-          transformedTramCoords,
-          screenCenter,
-          transformedStations
-        );
-      }
-    } else if (!isAutoMode) {
-      cameraAnimationStore.stopAnimation();
-    }
-  }, [
-    isAutoMode,
-    transformedTramCoords,
-    screenCenter,
-    cameraAnimationStore,
-    stationData,
-    routeData,
-    rotationAngle,
-  ]);
-
-  const stationLabels = useMemo(() => {
-    if (!stationData || !routeData)
-      return [] as Array<{ x: number; y: number; name: string; sub?: string }>;
-    const centerLat = routeData.center_latitude;
-    const centerLon = routeData.center_longitude;
-    if (centerLat === undefined || centerLon === undefined) return [];
-    const cos = Math.cos(rotationAngle);
-    const sin = Math.sin(rotationAngle);
-    const result: Array<{ x: number; y: number; name: string; sub?: string }> =
-      [];
-    for (let i = 0; i < stationData.length; i++) {
-      const st = stationData[i];
-      const local = coordinatesToLocal(
-        st.latitude - centerLat,
-        st.longitude - centerLon
-      );
-      const x = local.x * UP_SCALE;
-      const y = local.y * UP_SCALE;
-      const rx = x * cos - y * sin;
-      const ry = x * sin + y * cos;
-      const DEFAULT_LABEL_OFFSET_X = 25;
-      const DEFAULT_LABEL_OFFSET_Y = 0;
-      const labelOffsetX =
-        st.offset_x === 0 && st.offset_y === 0
-          ? DEFAULT_LABEL_OFFSET_X
-          : st.offset_x;
-      const labelOffsetY =
-        st.offset_x === 0 && st.offset_y === 0
-          ? DEFAULT_LABEL_OFFSET_Y
-          : st.offset_y;
-      const textBlockPositionX = rx + labelOffsetX;
-      const textBlockPositionY = ry + labelOffsetY;
-      const dpr = Math.max(
-        1,
-        (typeof window !== "undefined" && window.devicePixelRatio) || 1
-      );
-      const sx = (textBlockPositionX * scale + position.x) / dpr;
-      const sy = (textBlockPositionY * scale + position.y) / dpr;
-      let sub: string | undefined;
-      if ((selectedLanguage as any) === "zh")
-        sub = (stationDataZh as any)?.[i]?.name;
-      else if (
-        (selectedLanguage as any) === "en" ||
-        (selectedLanguage as any) === "ru"
-      )
-        sub = (stationDataEn as any)?.[i]?.name;
-      result.push({ x: sx, y: sy, name: st.name, sub });
-    }
-    return result;
-  }, [
-    stationData,
-    stationDataEn as any,
-    stationDataZh as any,
-    position.x,
-    position.y,
-    scale,
-    routeData?.center_latitude,
-    routeData?.center_longitude,
-    rotationAngle,
-    selectedLanguage as any,
-  ]);
-
-  const stationPoints = useMemo(() => {
-    if (!stationData || !routeData) return new Float32Array();
-    const centerLat = routeData.center_latitude;
-    const centerLon = routeData.center_longitude;
-    if (centerLat === undefined || centerLon === undefined)
-      return new Float32Array();
-
-    const cos = Math.cos(rotationAngle);
-    const sin = Math.sin(rotationAngle);
-    const verts: number[] = [];
-    for (const s of stationData) {
-      const local = coordinatesToLocal(
-        s.latitude - centerLat,
-        s.longitude - centerLon
-      );
-      const x = local.x * UP_SCALE;
-      const y = local.y * UP_SCALE;
-      const rx = x * cos - y * sin;
-      const ry = x * sin + y * cos;
-      verts.push(rx, ry);
-    }
-    return new Float32Array(verts);
-  }, [
-    stationData,
-    routeData?.center_latitude,
-    routeData?.center_longitude,
-    rotationAngle,
-  ]);
-
-  const sightPoints = useMemo(() => {
-    if (!sightData || !routeData) return new Float32Array();
-    const centerLat = routeData.center_latitude;
-    const centerLon = routeData.center_longitude;
-    if (centerLat === undefined || centerLon === undefined)
-      return new Float32Array();
-
-    const cos = Math.cos(rotationAngle);
-    const sin = Math.sin(rotationAngle);
-    const verts: number[] = [];
-    for (const s of sightData) {
-      const local = coordinatesToLocal(
-        s.latitude - centerLat,
-        s.longitude - centerLon
-      );
-      const x = local.x * UP_SCALE;
-      const y = local.y * UP_SCALE;
-      const rx = x * cos - y * sin;
-      const ry = x * sin + y * cos;
-      verts.push(rx, ry);
-    }
-    return new Float32Array(verts);
-  }, [
-    sightData,
-    routeData?.center_latitude,
-    routeData?.center_longitude,
-    rotationAngle,
-  ]);
-
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-    const gl = initWebGLContext(canvas);
-    glRef.current = gl;
-    if (!gl) return;
-
-    const vertSrc = `
-      attribute vec2 a_pos;
-      uniform vec2 u_cameraPos;
-      uniform float u_scale;
-      uniform vec2 u_resolution;
-      void main() {
-        vec2 screen = a_pos * u_scale + u_cameraPos;
-        vec2 zeroToOne = screen / u_resolution;
-        vec2 zeroToTwo = zeroToOne * 2.0;
-        vec2 clip = zeroToTwo - 1.0;
-        gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
-      }
-    `;
-    const fragSrc = `
-      precision mediump float;
-      uniform vec4 u_color;
-      void main() {
-        gl_FragColor = u_color;
-      }
-    `;
-
-    const compile = (type: number, src: string) => {
-      const s = gl.createShader(type)!;
-      gl.shaderSource(s, src);
-      gl.compileShader(s);
-      return s;
-    };
-    const vs = compile(gl.VERTEX_SHADER, vertSrc);
-    const fs = compile(gl.FRAGMENT_SHADER, fragSrc);
-    const prog = gl.createProgram()!;
-    gl.attachShader(prog, vs);
-    gl.attachShader(prog, fs);
-    gl.linkProgram(prog);
-    programRef.current = prog;
-    gl.useProgram(prog);
-
-    const a_pos = gl.getAttribLocation(prog, "a_pos");
-    const u_cameraPos = gl.getUniformLocation(prog, "u_cameraPos");
-    const u_scale = gl.getUniformLocation(prog, "u_scale");
-    const u_resolution = gl.getUniformLocation(prog, "u_resolution");
-    const u_color = gl.getUniformLocation(prog, "u_color");
-    attribsRef.current = { a_pos };
-    uniformsRef.current = { u_cameraPos, u_scale, u_resolution, u_color };
-
-    const buffer = gl.createBuffer();
-    bufferRef.current = buffer;
-
-    const pointVert = `
-      attribute vec2 a_pos;
-      uniform vec2 u_cameraPos;
-      uniform float u_scale;
-      uniform vec2 u_resolution;
-      uniform float u_pointSize;
-      void main() {
-        vec2 screen = a_pos * u_scale + u_cameraPos;
-        vec2 zeroToOne = screen / u_resolution;
-        vec2 zeroToTwo = zeroToOne * 2.0;
-        vec2 clip = zeroToTwo - 1.0;
-        gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
-        gl_PointSize = u_pointSize;
-      }
-    `;
-    const pointFrag = `
-      precision mediump float;
-      uniform vec4 u_color;
-      void main() {
-        vec2 c = gl_PointCoord * 2.0 - 1.0;
-        float d = dot(c, c);
-        if (d > 1.0) discard;
-        gl_FragColor = u_color;
-      }
-    `;
-    const vs2 = compile(gl.VERTEX_SHADER, pointVert);
-    const fs2 = compile(gl.FRAGMENT_SHADER, pointFrag);
-    const pprog = gl.createProgram()!;
-    gl.attachShader(pprog, vs2);
-    gl.attachShader(pprog, fs2);
-    gl.linkProgram(pprog);
-    pointProgramRef.current = pprog;
-    pointBufferRef.current = gl.createBuffer();
-
-    const lineVert = `
-      attribute vec2 a_screen;
-      uniform vec2 u_resolution;
-      void main(){
-        vec2 zeroToOne = a_screen / u_resolution;
-        vec2 clip = zeroToOne * 2.0 - 1.0;
-        gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
-      }
-    `;
-    const lineFrag = `
-      precision mediump float;
-      uniform vec4 u_color;
-      void main(){ gl_FragColor = u_color; }
-    `;
-    const lv = compile(gl.VERTEX_SHADER, lineVert);
-    const lf = compile(gl.FRAGMENT_SHADER, lineFrag);
-    const lprog = gl.createProgram()!;
-    gl.attachShader(lprog, lv);
-    gl.attachShader(lprog, lf);
-    gl.linkProgram(lprog);
-    screenLineProgramRef.current = lprog;
-    screenLineBufferRef.current = gl.createBuffer();
-
-    const handleResize = () => {
-      const changed = resizeCanvasToDisplaySize(canvas);
-      if (!gl) return;
-      setScreenCenter({
-        x: canvas.width / 2,
-        y: canvas.height / 2,
-      });
-      if (changed) {
-        gl.viewport(0, 0, canvas.width, canvas.height);
-      }
-      gl.clearColor(0, 0, 0, 1);
-      gl.clear(gl.COLOR_BUFFER_BIT);
-    };
-
-    handleResize();
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-
-  useEffect(() => {
-    const centerLat = routeData?.center_latitude;
-    const centerLon = routeData?.center_longitude;
-    if (centerLat !== undefined && centerLon !== undefined) {
-      const coords: any = apiStore?.context?.currentCoordinates;
-      if (coords) {
-        const local = coordinatesToLocal(
-          coords.latitude - centerLat,
-          coords.longitude - centerLon
-        );
-        const x = local.x * UP_SCALE;
-        const y = local.y * UP_SCALE;
-        const cos = Math.cos(rotationAngle),
-          sin = Math.sin(rotationAngle);
-        const rx = x * cos - y * sin;
-        const ry = x * sin + y * cos;
-
-        if (isAutoMode) {
-          animateYellowDotTo(rx, ry);
-        } else {
-          setYellowDotPositionImmediate(rx, ry);
-        }
-      }
-    }
-  }, [
-    routeData?.center_latitude,
-    routeData?.center_longitude,
-    rotationAngle,
-    apiStore?.context?.currentCoordinates?.latitude,
-    apiStore?.context?.currentCoordinates?.longitude,
-    isAutoMode,
-    animateYellowDotTo,
-    setYellowDotPositionImmediate,
-  ]);
-
-  useEffect(() => {
-    const gl = glRef.current;
-    const canvas = canvasRef.current;
-    const prog = programRef.current;
-    const buffer = bufferRef.current;
-    const attribs = attribsRef.current;
-    const uniforms = uniformsRef.current;
-    const pprog = pointProgramRef.current;
-    const pbuffer = pointBufferRef.current;
-    if (
-      !gl ||
-      !canvas ||
-      !prog ||
-      !buffer ||
-      !attribs ||
-      !uniforms ||
-      !pprog ||
-      !pbuffer
-    )
-      return;
-
-    gl.viewport(0, 0, canvas.width, canvas.height);
-    gl.clearColor(0, 0, 0, 1);
-    gl.clear(gl.COLOR_BUFFER_BIT);
-
-    gl.useProgram(prog);
-    gl.uniform2f(uniforms.u_cameraPos, position.x, position.y);
-    gl.uniform1f(uniforms.u_scale, scale);
-    gl.uniform2f(uniforms.u_resolution, canvas.width, canvas.height);
-    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-    gl.bufferData(gl.ARRAY_BUFFER, routePath, gl.STATIC_DRAW);
-    gl.enableVertexAttribArray(attribs.a_pos);
-    gl.vertexAttribPointer(attribs.a_pos, 2, gl.FLOAT, false, 0, 0);
-
-    const vcount = routePath.length / 2;
-    let tramSegIndex = -1;
-    {
-      const centerLatTmp = routeData?.center_latitude;
-      const centerLonTmp = routeData?.center_longitude;
-      if (centerLatTmp !== undefined && centerLonTmp !== undefined) {
-        const coordsAny: any = apiStore?.context?.currentCoordinates;
-        if (coordsAny) {
-          const loc = coordinatesToLocal(
-            coordsAny.latitude - centerLatTmp,
-            coordsAny.longitude - centerLonTmp
-          );
-          const wx = loc.x * UP_SCALE;
-          const wy = loc.y * UP_SCALE;
-          const cosR = Math.cos(rotationAngle),
-            sinR = Math.sin(rotationAngle);
-          const tX = wx * cosR - wy * sinR;
-          const tY = wx * sinR + wy * cosR;
-          let best = -1,
-            bestD = Infinity;
-          for (let i = 0; i < vcount - 1; i++) {
-            const p1x = routePath[i * 2],
-              p1y = routePath[i * 2 + 1];
-            const p2x = routePath[(i + 1) * 2],
-              p2y = routePath[(i + 1) * 2 + 1];
-            const dx = p2x - p1x,
-              dy = p2y - p1y;
-            const len2 = dx * dx + dy * dy;
-            if (!len2) continue;
-            const t = ((tX - p1x) * dx + (tY - p1y) * dy) / len2;
-            const cl = Math.max(0, Math.min(1, t));
-            const px = p1x + cl * dx,
-              py = p1y + cl * dy;
-            const d = Math.hypot(tX - px, tY - py);
-            if (d < bestD) {
-              bestD = d;
-              best = i;
-            }
-          }
-          tramSegIndex = best;
-        }
-      }
-    }
-
-    const vertexCount = routePath.length / 2;
-    if (vertexCount > 1) {
-      const generateThickLine = (points: Float32Array, width: number) => {
-        const vertices: number[] = [];
-        const halfWidth = width / 2;
-
-        if (points.length < 4) return new Float32Array();
-
-        for (let i = 0; i < points.length - 2; i += 2) {
-          const x1 = points[i];
-          const y1 = points[i + 1];
-          const x2 = points[i + 2];
-          const y2 = points[i + 3];
-
-          const dx = x2 - x1;
-          const dy = y2 - y1;
-          const length = Math.sqrt(dx * dx + dy * dy);
-          if (length === 0) continue;
-
-          const perpX = (-dy / length) * halfWidth;
-          const perpY = (dx / length) * halfWidth;
-
-          vertices.push(x1 + perpX, y1 + perpY);
-          vertices.push(x1 - perpX, y1 - perpY);
-          vertices.push(x2 + perpX, y2 + perpY);
-
-          vertices.push(x1 - perpX, y1 - perpY);
-          vertices.push(x2 - perpX, y2 - perpY);
-          vertices.push(x2 + perpX, y2 + perpY);
-
-          if (i < points.length - 4) {
-            const x3 = points[i + 4];
-            const y3 = points[i + 5];
-
-            const dx2 = x3 - x2;
-            const dy2 = y3 - y2;
-            const length2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
-            if (length2 > 0) {
-              const perpX2 = (-dy2 / length2) * halfWidth;
-              const perpY2 = (dx2 / length2) * halfWidth;
-
-              vertices.push(x2 + perpX, y2 + perpY);
-              vertices.push(x2 - perpX, y2 - perpY);
-              vertices.push(x2 + perpX2, y2 + perpY2);
-
-              vertices.push(x2 - perpX, y2 - perpY);
-              vertices.push(x2 - perpX2, y2 - perpY2);
-              vertices.push(x2 + perpX2, y2 + perpY2);
-            }
-          }
-        }
-
-        return new Float32Array(vertices);
-      };
-
-      const lineWidth = Math.min(6);
-      const r1 = ((PATH_COLOR >> 16) & 0xff) / 255;
-      const g1 = ((PATH_COLOR >> 8) & 0xff) / 255;
-      const b1 = (PATH_COLOR & 0xff) / 255;
-      gl.uniform4f(uniforms.u_color, r1, g1, b1, 1);
-
-      if (tramSegIndex >= 0) {
-        const animatedPos = animatedYellowDotPosition;
-        if (
-          animatedPos &&
-          animatedPos.x !== undefined &&
-          animatedPos.y !== undefined
-        ) {
-          const passedPoints: number[] = [];
-
-          for (let i = 0; i <= tramSegIndex; i++) {
-            passedPoints.push(routePath[i * 2], routePath[i * 2 + 1]);
-          }
-
-          passedPoints.push(animatedPos.x, animatedPos.y);
-
-          if (passedPoints.length >= 4) {
-            const thickLineVertices = generateThickLine(
-              new Float32Array(passedPoints),
-              lineWidth
-            );
-            gl.bufferData(gl.ARRAY_BUFFER, thickLineVertices, gl.STATIC_DRAW);
-            gl.drawArrays(gl.TRIANGLES, 0, thickLineVertices.length / 2);
-          }
-        }
-      }
-
-      const r2 = ((UNPASSED_STATION_COLOR >> 16) & 0xff) / 255;
-      const g2 = ((UNPASSED_STATION_COLOR >> 8) & 0xff) / 255;
-      const b2 = (UNPASSED_STATION_COLOR & 0xff) / 255;
-      gl.uniform4f(uniforms.u_color, r2, g2, b2, 1);
-
-      const animatedPos = animatedYellowDotPosition;
-      if (
-        animatedPos &&
-        animatedPos.x !== undefined &&
-        animatedPos.y !== undefined
-      ) {
-        const unpassedPoints: number[] = [];
-
-        unpassedPoints.push(animatedPos.x, animatedPos.y);
-
-        for (let i = tramSegIndex + 1; i < vertexCount; i++) {
-          unpassedPoints.push(routePath[i * 2], routePath[i * 2 + 1]);
-        }
-
-        if (unpassedPoints.length >= 4) {
-          const thickLineVertices = generateThickLine(
-            new Float32Array(unpassedPoints),
-            lineWidth
-          );
-          gl.bufferData(gl.ARRAY_BUFFER, thickLineVertices, gl.STATIC_DRAW);
-          gl.drawArrays(gl.TRIANGLES, 0, thickLineVertices.length / 2);
-        }
-      }
-    }
-
-    if (stationPoints.length > 0) {
-      gl.useProgram(pprog);
-      const a_pos_pts = gl.getAttribLocation(pprog, "a_pos");
-      const u_cameraPos_pts = gl.getUniformLocation(pprog, "u_cameraPos");
-      const u_scale_pts = gl.getUniformLocation(pprog, "u_scale");
-      const u_resolution_pts = gl.getUniformLocation(pprog, "u_resolution");
-      const u_pointSize = gl.getUniformLocation(pprog, "u_pointSize");
-      const u_color_pts = gl.getUniformLocation(pprog, "u_color");
-
-      gl.uniform2f(u_cameraPos_pts, position.x, position.y);
-      gl.uniform1f(u_scale_pts, scale);
-      gl.uniform2f(u_resolution_pts, canvas.width, canvas.height);
-      gl.bindBuffer(gl.ARRAY_BUFFER, pbuffer);
-      gl.bufferData(gl.ARRAY_BUFFER, stationPoints, gl.STATIC_DRAW);
-      gl.enableVertexAttribArray(a_pos_pts);
-      gl.vertexAttribPointer(a_pos_pts, 2, gl.FLOAT, false, 0, 0);
-
-      gl.uniform1f(u_pointSize, 10 * scale * 1.5);
-      const r_outline = ((BACKGROUND_COLOR >> 16) & 0xff) / 255;
-      const g_outline = ((BACKGROUND_COLOR >> 8) & 0xff) / 255;
-      const b_outline = (BACKGROUND_COLOR & 0xff) / 255;
-      gl.uniform4f(u_color_pts, r_outline, g_outline, b_outline, 1);
-      gl.drawArrays(gl.POINTS, 0, stationPoints.length / 2);
-
-      gl.uniform1f(u_pointSize, 8.0 * scale * 1.5);
-
-      if (tramSegIndex >= 0) {
-        const passedStations = [];
-        for (let i = 0; i < stationData.length; i++) {
-          if (i <= tramSegIndex) {
-            passedStations.push(stationPoints[i * 2], stationPoints[i * 2 + 1]);
-          }
-        }
-        if (passedStations.length > 0) {
-          const r_passed = ((PATH_COLOR >> 16) & 0xff) / 255;
-          const g_passed = ((PATH_COLOR >> 8) & 0xff) / 255;
-          const b_passed = (PATH_COLOR & 0xff) / 255;
-          gl.uniform4f(u_color_pts, r_passed, g_passed, b_passed, 1);
-          gl.bufferData(
-            gl.ARRAY_BUFFER,
-            new Float32Array(passedStations),
-            gl.STATIC_DRAW
-          );
-          gl.drawArrays(gl.POINTS, 0, passedStations.length / 2);
-        }
-      }
-
-      if (tramSegIndex >= 0) {
-        const unpassedStations = [];
-        for (let i = 0; i < stationData.length; i++) {
-          if (i > tramSegIndex) {
-            unpassedStations.push(
-              stationPoints[i * 2],
-              stationPoints[i * 2 + 1]
-            );
-          }
-        }
-        if (unpassedStations.length > 0) {
-          const r_unpassed = ((UNPASSED_STATION_COLOR >> 16) & 0xff) / 255;
-          const g_unpassed = ((UNPASSED_STATION_COLOR >> 8) & 0xff) / 255;
-          const b_unpassed = (UNPASSED_STATION_COLOR & 0xff) / 255;
-          gl.uniform4f(u_color_pts, r_unpassed, g_unpassed, b_unpassed, 1);
-          gl.bufferData(
-            gl.ARRAY_BUFFER,
-            new Float32Array(unpassedStations),
-            gl.STATIC_DRAW
-          );
-          gl.drawArrays(gl.POINTS, 0, unpassedStations.length / 2);
-        }
-      } else {
-        const r_unpassed = ((UNPASSED_STATION_COLOR >> 16) & 0xff) / 255;
-        const g_unpassed = ((UNPASSED_STATION_COLOR >> 8) & 0xff) / 255;
-        const b_unpassed = (UNPASSED_STATION_COLOR & 0xff) / 255;
-        gl.uniform4f(u_color_pts, r_unpassed, g_unpassed, b_unpassed, 1);
-        gl.bufferData(gl.ARRAY_BUFFER, stationPoints, gl.STATIC_DRAW);
-        gl.drawArrays(gl.POINTS, 0, stationPoints.length / 2);
-      }
-    }
-
-    const a_pos_pts = gl.getAttribLocation(pprog, "a_pos");
-    const u_cameraPos_pts = gl.getUniformLocation(pprog, "u_cameraPos");
-    const u_scale_pts = gl.getUniformLocation(pprog, "u_scale");
-    const u_resolution_pts = gl.getUniformLocation(pprog, "u_resolution");
-    const u_pointSize = gl.getUniformLocation(pprog, "u_pointSize");
-    const u_color_pts = gl.getUniformLocation(pprog, "u_color");
-
-    gl.uniform2f(u_cameraPos_pts, position.x, position.y);
-    gl.uniform1f(u_scale_pts, scale);
-    gl.uniform2f(u_resolution_pts, canvas.width, canvas.height);
-
-    const toPointsArray = (arr: number[]) => new Float32Array(arr);
-
-    const pathPts: { x: number; y: number }[] = [];
-    for (let i = 0; i < routePath.length; i += 2)
-      pathPts.push({ x: routePath[i], y: routePath[i + 1] });
-    const getSeg = (px: number, py: number) => {
-      if (pathPts.length < 2) return -1;
-      let best = -1,
-        bestD = Infinity;
-      for (let i = 0; i < pathPts.length - 1; i++) {
-        const p1 = pathPts[i],
-          p2 = pathPts[i + 1];
-        const dx = p2.x - p1.x,
-          dy = p2.y - p1.y;
-        const len2 = dx * dx + dy * dy;
-        if (!len2) continue;
-        const t = ((px - p1.x) * dx + (py - p1.y) * dy) / len2;
-        const tt = Math.max(0, Math.min(1, t));
-        const cx = p1.x + tt * dx,
-          cy = p1.y + tt * dy;
-        const d = Math.hypot(px - cx, py - cy);
-        if (d < bestD) {
-          bestD = d;
-          best = i;
-        }
-      }
-      return best;
-    };
-
-    let tramSegForStations = -1;
-    {
-      const cLat = routeData?.center_latitude,
-        cLon = routeData?.center_longitude;
-      const tram = apiStore?.context?.currentCoordinates as any;
-      if (tram && cLat !== undefined && cLon !== undefined) {
-        const loc = coordinatesToLocal(
-          tram.latitude - cLat,
-          tram.longitude - cLon
-        );
-        const wx = loc.x * UP_SCALE,
-          wy = loc.y * UP_SCALE;
-        const cosR = Math.cos(rotationAngle),
-          sinR = Math.sin(rotationAngle);
-        const tx = wx * cosR - wy * sinR,
-          ty = wx * sinR + wy * cosR;
-        tramSegForStations = getSeg(tx, ty);
-      }
-    }
-
-    const passedStations: number[] = [];
-    const unpassedStations: number[] = [];
-    for (let i = 0; i < stationPoints.length; i += 2) {
-      const sx = stationPoints[i],
-        sy = stationPoints[i + 1];
-      const seg = getSeg(sx, sy);
-      if (tramSegForStations !== -1 && seg !== -1 && seg < tramSegForStations)
-        passedStations.push(sx, sy);
-      else unpassedStations.push(sx, sy);
-    }
-
-    const outlineSize = 10.0 * scale * 2,
-      coreSize = 8.0 * scale * 2;
-
-    gl.bindBuffer(gl.ARRAY_BUFFER, pbuffer);
-    gl.bufferData(
-      gl.ARRAY_BUFFER,
-      toPointsArray(unpassedStations),
-      gl.STREAM_DRAW
-    );
-    gl.enableVertexAttribArray(a_pos_pts);
-    gl.vertexAttribPointer(a_pos_pts, 2, gl.FLOAT, false, 0, 0);
-    gl.uniform1f(u_pointSize, outlineSize);
-    gl.uniform4f(
-      u_color_pts,
-      ((BACKGROUND_COLOR >> 16) & 255) / 255,
-      ((BACKGROUND_COLOR >> 8) & 255) / 255,
-      (BACKGROUND_COLOR & 255) / 255,
-      1
-    );
-    if (unpassedStations.length)
-      gl.drawArrays(gl.POINTS, 0, unpassedStations.length / 2);
-    gl.uniform1f(u_pointSize, coreSize);
-    gl.uniform4f(
-      u_color_pts,
-      ((UNPASSED_STATION_COLOR >> 16) & 255) / 255,
-      ((UNPASSED_STATION_COLOR >> 8) & 255) / 255,
-      (UNPASSED_STATION_COLOR & 255) / 255,
-      1
-    );
-    if (unpassedStations.length)
-      gl.drawArrays(gl.POINTS, 0, unpassedStations.length / 2);
-
-    gl.bindBuffer(gl.ARRAY_BUFFER, pbuffer);
-    gl.bufferData(
-      gl.ARRAY_BUFFER,
-      toPointsArray(passedStations),
-      gl.STREAM_DRAW
-    );
-    gl.enableVertexAttribArray(a_pos_pts);
-    gl.vertexAttribPointer(a_pos_pts, 2, gl.FLOAT, false, 0, 0);
-    gl.uniform1f(u_pointSize, outlineSize);
-    gl.uniform4f(
-      u_color_pts,
-      ((BACKGROUND_COLOR >> 16) & 255) / 255,
-      ((BACKGROUND_COLOR >> 8) & 255) / 255,
-      (BACKGROUND_COLOR & 255) / 255,
-      1
-    );
-    if (passedStations.length)
-      gl.drawArrays(gl.POINTS, 0, passedStations.length / 2);
-    gl.uniform1f(u_pointSize, coreSize);
-    gl.uniform4f(
-      u_color_pts,
-      ((PATH_COLOR >> 16) & 255) / 255,
-      ((PATH_COLOR >> 8) & 255) / 255,
-      (PATH_COLOR & 255) / 255,
-      1
-    );
-    if (passedStations.length)
-      gl.drawArrays(gl.POINTS, 0, passedStations.length / 2);
-
-    if (
-      stationData &&
-      stationData.length > 0 &&
-      routeData &&
-      apiStore?.context
-    ) {
-      const centerLat = routeData.center_latitude;
-      const centerLon = routeData.center_longitude;
-      if (centerLat !== undefined && centerLon !== undefined) {
-        const cos = Math.cos(rotationAngle);
-        const sin = Math.sin(rotationAngle);
-
-        const startStationData = stationData.find(
-          (station) => station.id.toString() === apiStore.context?.startStopId
-        );
-        const endStationData = stationData.find(
-          (station) => station.id.toString() === apiStore.context?.endStopId
-        );
-
-        const terminalStations: number[] = [];
-
-        if (startStationData) {
-          const startLocal = coordinatesToLocal(
-            startStationData.latitude - centerLat,
-            startStationData.longitude - centerLon
-          );
-          const startX = startLocal.x * UP_SCALE;
-          const startY = startLocal.y * UP_SCALE;
-          const startRx = startX * cos - startY * sin;
-          const startRy = startX * sin + startY * cos;
-          terminalStations.push(startRx, startRy);
-        }
-
-        if (endStationData) {
-          const endLocal = coordinatesToLocal(
-            endStationData.latitude - centerLat,
-            endStationData.longitude - centerLon
-          );
-          const endX = endLocal.x * UP_SCALE;
-          const endY = endLocal.y * UP_SCALE;
-          const endRx = endX * cos - endY * sin;
-          const endRy = endX * sin + endY * cos;
-          terminalStations.push(endRx, endRy);
-        }
-
-        if (terminalStations.length > 0) {
-          const terminalStationData: any[] = [];
-          if (startStationData) terminalStationData.push(startStationData);
-          if (endStationData) terminalStationData.push(endStationData);
-
-          let tramSegIndex = -1;
-          const coords: any = apiStore?.context?.currentCoordinates;
-          if (coords && centerLat !== undefined && centerLon !== undefined) {
-            const local = coordinatesToLocal(
-              coords.latitude - centerLat,
-              coords.longitude - centerLon
-            );
-            const wx = local.x * UP_SCALE;
-            const wy = local.y * UP_SCALE;
-            const cosR = Math.cos(rotationAngle);
-            const sinR = Math.sin(rotationAngle);
-            const tx = wx * cosR - wy * sinR;
-            const ty = wx * sinR + wy * cosR;
-
-            let best = -1;
-            let bestD = Infinity;
-            for (let i = 0; i < routePath.length - 2; i += 2) {
-              const p1x = routePath[i];
-              const p1y = routePath[i + 1];
-              const p2x = routePath[i + 2];
-              const p2y = routePath[i + 3];
-              const dx = p2x - p1x;
-              const dy = p2y - p1y;
-              const len2 = dx * dx + dy * dy;
-              if (!len2) continue;
-              const t = ((tx - p1x) * dx + (ty - p1y) * dy) / len2;
-              const cl = Math.max(0, Math.min(1, t));
-              const px = p1x + cl * dx;
-              const py = p1y + cl * dy;
-              const d = Math.hypot(tx - px, ty - py);
-              if (d < bestD) {
-                bestD = d;
-                best = i / 2;
-              }
-            }
-            tramSegIndex = best;
-          }
-
-          const isStartPassed = startStationData
-            ? (() => {
-                const sx = terminalStations[0];
-                const sy = terminalStations[1];
-                const seg = (() => {
-                  if (routePath.length < 4) return -1;
-                  let best = -1;
-                  let bestD = Infinity;
-                  for (let i = 0; i < routePath.length - 2; i += 2) {
-                    const p1x = routePath[i];
-                    const p1y = routePath[i + 1];
-                    const p2x = routePath[i + 2];
-                    const p2y = routePath[i + 3];
-                    const dx = p2x - p1x;
-                    const dy = p2y - p1y;
-                    const len2 = dx * dx + dy * dy;
-                    if (!len2) continue;
-                    const t = ((sx - p1x) * dx + (sy - p1y) * dy) / len2;
-                    const cl = Math.max(0, Math.min(1, t));
-                    const px = p1x + cl * dx;
-                    const py = p1y + cl * dy;
-                    const d = Math.hypot(sx - px, sy - py);
-                    if (d < bestD) {
-                      bestD = d;
-                      best = i / 2;
-                    }
-                  }
-                  return best;
-                })();
-                return tramSegIndex !== -1 && seg !== -1 && seg < tramSegIndex;
-              })()
-            : false;
-
-          const isEndPassed = endStationData
-            ? (() => {
-                const ex = terminalStations[terminalStations.length - 2];
-                const ey = terminalStations[terminalStations.length - 1];
-                const seg = (() => {
-                  if (routePath.length < 4) return -1;
-                  let best = -1;
-                  let bestD = Infinity;
-                  for (let i = 0; i < routePath.length - 2; i += 2) {
-                    const p1x = routePath[i];
-                    const p1y = routePath[i + 1];
-                    const p2x = routePath[i + 2];
-                    const p2y = routePath[i + 3];
-                    const dx = p2x - p1x;
-                    const dy = p2y - p1y;
-                    const len2 = dx * dx + dy * dy;
-                    if (!len2) continue;
-                    const t = ((ex - p1x) * dx + (ey - p1y) * dy) / len2;
-                    const cl = Math.max(0, Math.min(1, t));
-                    const px = p1x + cl * dx;
-                    const py = p1y + cl * dy;
-                    const d = Math.hypot(ex - px, ey - py);
-                    if (d < bestD) {
-                      bestD = d;
-                      best = i / 2;
-                    }
-                  }
-                  return best;
-                })();
-                return tramSegIndex !== -1 && seg !== -1 && seg < tramSegIndex;
-              })()
-            : false;
-
-          gl.bindBuffer(gl.ARRAY_BUFFER, pbuffer);
-          gl.bufferData(
-            gl.ARRAY_BUFFER,
-            new Float32Array(terminalStations),
-            gl.STREAM_DRAW
-          );
-          gl.enableVertexAttribArray(a_pos_pts);
-          gl.vertexAttribPointer(a_pos_pts, 2, gl.FLOAT, false, 0, 0);
-
-          gl.uniform1f(u_pointSize, 18.0 * scale);
-          if (startStationData && endStationData) {
-            if (isStartPassed) {
-              gl.uniform4f(u_color_pts, 1.0, 0.4, 0.4, 1.0);
-            } else {
-              gl.uniform4f(u_color_pts, 0.7, 0.7, 0.7, 1.0);
-            }
-            gl.drawArrays(gl.POINTS, 0, 1);
-
-            if (isEndPassed) {
-              gl.uniform4f(u_color_pts, 1.0, 0.4, 0.4, 1.0);
-            } else {
-              gl.uniform4f(u_color_pts, 0.7, 0.7, 0.7, 1.0);
-            }
-            gl.drawArrays(gl.POINTS, 1, 1);
-          } else {
-            const isPassed = startStationData ? isStartPassed : isEndPassed;
-            if (isPassed) {
-              gl.uniform4f(u_color_pts, 1.0, 0.4, 0.4, 1.0);
-            } else {
-              gl.uniform4f(u_color_pts, 0.7, 0.7, 0.7, 1.0);
-            }
-            gl.drawArrays(gl.POINTS, 0, terminalStations.length / 2);
-          }
-
-          gl.uniform1f(u_pointSize, 11.0 * scale);
-          const r_center = ((BACKGROUND_COLOR >> 16) & 0xff) / 255;
-          const g_center = ((BACKGROUND_COLOR >> 8) & 0xff) / 255;
-          const b_center = (BACKGROUND_COLOR & 0xff) / 255;
-          gl.uniform4f(u_color_pts, r_center, g_center, b_center, 1.0);
-          gl.drawArrays(gl.POINTS, 0, terminalStations.length / 2);
-        }
-      }
-    }
-
-    if (animatedYellowDotPosition) {
-      const rx = animatedYellowDotPosition.x;
-      const ry = animatedYellowDotPosition.y;
-
-      gl.uniform1f(u_pointSize, 13.3333 * scale);
-      gl.uniform4f(u_color_pts, 1.0, 1.0, 0.0, 1.0);
-      const tmp = new Float32Array([rx, ry]);
-      gl.bindBuffer(gl.ARRAY_BUFFER, pbuffer);
-      gl.bufferData(gl.ARRAY_BUFFER, tmp, gl.STREAM_DRAW);
-      gl.enableVertexAttribArray(a_pos_pts);
-      gl.vertexAttribPointer(a_pos_pts, 2, gl.FLOAT, false, 0, 0);
-      gl.drawArrays(gl.POINTS, 0, 1);
-    }
-  }, [
-    routePath,
-    stationPoints,
-    sightPoints,
-    position.x,
-    position.y,
-    scale,
-    animatedYellowDotPosition?.x,
-    animatedYellowDotPosition?.y,
-  ]);
-
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-    if (!routePath || routePath.length < 4) return;
-
-    let minX = Infinity,
-      minY = Infinity,
-      maxX = -Infinity,
-      maxY = -Infinity;
-    for (let i = 0; i < routePath.length; i += 2) {
-      const x = routePath[i];
-      const y = routePath[i + 1];
-      if (x < minX) minX = x;
-      if (y < minY) minY = y;
-      if (x > maxX) maxX = x;
-      if (y > maxY) maxY = y;
-    }
-    if (
-      !isFinite(minX) ||
-      !isFinite(minY) ||
-      !isFinite(maxX) ||
-      !isFinite(maxY)
-    )
-      return;
-
-    const worldWidth = Math.max(1, maxX - minX);
-    const worldHeight = Math.max(1, maxY - minY);
-
-    const margin = 0.1;
-    const targetScale = Math.min(
-      (canvas.width * (1 - margin)) / worldWidth,
-      (canvas.height * (1 - margin)) / worldHeight
-    );
-
-    const centerX = (minX + maxX) / 2;
-    const centerY = (minY + maxY) / 2;
-
-    const clampedScale = clampScale(targetScale);
-
-    setScaleRef.current(clampedScale);
-    setPositionRef.current({
-      x: canvas.width / 2 - centerX * clampedScale,
-      y: canvas.height / 2 - centerY * clampedScale,
-    });
-  }, [routePath]);
-
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-
-    let isDragging = false;
-    let startMouse = { x: 0, y: 0 };
-    let startPos = { x: 0, y: 0 };
-
-    const activePointers = new Map<number, { x: number; y: number }>();
-    let isPinching = false;
-    let pinchStart: {
-      distance: number;
-      midpoint: { x: number; y: number };
-      scale: number;
-      position: { x: number; y: number };
-    } | null = null;
-
-    const getDistance = (
-      p1: { x: number; y: number },
-      p2: { x: number; y: number }
-    ) => Math.hypot(p2.x - p1.x, p2.y - p1.y);
-
-    const getMidpoint = (
-      p1: { x: number; y: number },
-      p2: { x: number; y: number }
-    ) => ({
-      x: (p1.x + p2.x) / 2,
-      y: (p1.y + p2.y) / 2,
-    });
-
-    const onPointerDown = (e: PointerEvent) => {
-      updateUserActivity();
-      if (isAutoMode) {
-        setIsAutoMode(false);
-      }
-      cameraAnimationStore.stopAnimation();
-
-      canvas.setPointerCapture(e.pointerId);
-      const rect = canvas.getBoundingClientRect();
-      activePointers.set(e.pointerId, {
-        x: e.clientX - rect.left,
-        y: e.clientY - rect.top,
-      });
-      if (activePointers.size === 1) {
-        isDragging = true;
-        startMouse = { x: e.clientX - rect.left, y: e.clientY - rect.top };
-        startPos = { x: positionRef.current.x, y: positionRef.current.y };
-      } else if (activePointers.size === 2) {
-        isDragging = false;
-        const [p1, p2] = Array.from(activePointers.values());
-        pinchStart = {
-          distance: getDistance(p1, p2),
-          midpoint: getMidpoint(p1, p2),
-          scale: scaleRef.current,
-          position: { x: positionRef.current.x, y: positionRef.current.y },
-        };
-        isPinching = true;
-      }
-    };
-
-    const onPointerMove = (e: PointerEvent) => {
-      if (!activePointers.has(e.pointerId)) return;
-
-      updateUserActivity();
-
-      const rect = canvas.getBoundingClientRect();
-      activePointers.set(e.pointerId, {
-        x: e.clientX - rect.left,
-        y: e.clientY - rect.top,
-      });
-
-      if (activePointers.size === 2) {
-        isDragging = false;
-
-        const pointersArray = Array.from(activePointers.values());
-        if (pointersArray.length === 2) {
-          const [p1, p2] = pointersArray;
-
-          if (!isPinching || pinchStart === null) {
-            isPinching = true;
-            pinchStart = {
-              distance: getDistance(p1, p2),
-              midpoint: getMidpoint(p1, p2),
-              scale: scaleRef.current,
-              position: { x: positionRef.current.x, y: positionRef.current.y },
-            };
-          }
-
-          if (pinchStart) {
-            const currentDistance = getDistance(p1, p2);
-            const zoomFactor = currentDistance / pinchStart.distance;
-            const unclampedScale = pinchStart.scale * zoomFactor;
-            const newScale = clampScale(Math.max(0.1, unclampedScale));
-
-            const k = newScale / pinchStart.scale;
-            const newPosition = {
-              x: pinchStart.position.x * k + pinchStart.midpoint.x * (1 - k),
-              y: pinchStart.position.y * k + pinchStart.midpoint.y * (1 - k),
-            };
-            setPositionRef.current(newPosition);
-            setScaleRef.current(newScale);
-          }
-        }
-      } else if (isDragging && activePointers.size === 1) {
-        const p = Array.from(activePointers.values())[0];
-
-        if (
-          !startMouse ||
-          !startPos ||
-          typeof startMouse.x !== "number" ||
-          typeof startMouse.y !== "number" ||
-          typeof startPos.x !== "number" ||
-          typeof startPos.y !== "number"
-        ) {
-          console.warn(
-            "WebGLMap: Некорректные значения startMouse или startPos:",
-            {
-              startMouse,
-              startPos,
-              p,
-            }
-          );
-          return;
-        }
-
-        const dx = p.x - startMouse.x;
-        const dy = p.y - startMouse.y;
-
-        setPositionRef.current({ x: startPos.x + dx, y: startPos.y + dy });
-      }
-    };
-
-    const onPointerUp = (e: PointerEvent) => {
-      updateUserActivity();
-
-      canvas.releasePointerCapture(e.pointerId);
-      activePointers.delete(e.pointerId);
-      if (activePointers.size < 2) {
-        isPinching = false;
-        pinchStart = null;
-      }
-      if (activePointers.size === 0) {
-        isDragging = false;
-      } else if (activePointers.size === 1) {
-        const p = Array.from(activePointers.values())[0];
-        startPos = { x: positionRef.current.x, y: positionRef.current.y };
-        startMouse = { x: p.x, y: p.y };
-        isDragging = true;
-      }
-    };
-
-    const onPointerCancel = (e: PointerEvent) => {
-      updateUserActivity();
-      canvas.releasePointerCapture(e.pointerId);
-      activePointers.delete(e.pointerId);
-      isPinching = false;
-      pinchStart = null;
-      if (activePointers.size === 0) {
-        isDragging = false;
-      }
-    };
-
-    const onWheel = (e: WheelEvent) => {
-      e.preventDefault();
-
-      updateUserActivity();
-      if (isAutoMode) {
-        setIsAutoMode(false);
-      }
-      cameraAnimationStore.stopAnimation();
-
-      const rect = canvas.getBoundingClientRect();
-      const mouseX =
-        (e.clientX - rect.left) * (canvas.width / canvas.clientWidth);
-      const mouseY =
-        (e.clientY - rect.top) * (canvas.height / canvas.clientHeight);
-      const delta = e.deltaY > 0 ? 0.9 : 1.1;
-      const unclampedScale = scaleRef.current * delta;
-      const newScale = clampScale(Math.max(0.1, unclampedScale));
-
-      const k = newScale / scaleRef.current;
-      const newPosition = {
-        x: positionRef.current.x * k + mouseX * (1 - k),
-        y: positionRef.current.y * k + mouseY * (1 - k),
-      };
-      setScaleRef.current(newScale);
-      setPositionRef.current(newPosition);
-    };
-
-    canvas.addEventListener("pointerdown", onPointerDown);
-    canvas.addEventListener("pointermove", onPointerMove);
-    canvas.addEventListener("pointerup", onPointerUp);
-    canvas.addEventListener("pointercancel", onPointerCancel);
-    canvas.addEventListener("pointerleave", onPointerUp);
-    canvas.addEventListener("wheel", onWheel, { passive: false });
-
-    return () => {
-      canvas.removeEventListener("pointerdown", onPointerDown);
-      canvas.removeEventListener("pointermove", onPointerMove);
-      canvas.removeEventListener("pointerup", onPointerUp);
-      canvas.removeEventListener("pointercancel", onPointerCancel);
-      canvas.removeEventListener("pointerleave", onPointerUp);
-      canvas.removeEventListener("wheel", onWheel as any);
-    };
-  }, [
-    updateUserActivity,
-    setIsAutoMode,
-    cameraAnimationStore,
-    isAutoMode,
-    clampScale,
-  ]);
-
-  return (
-    <div
-      className="map-layer"
-      style={{ width: "100%", height: "100vh", position: "relative" }}
-    >
-      <canvas
-        ref={canvasRef}
-        style={{ width: "100%", height: "100%", display: "block", zIndex: 0 }}
-      />
-      <div
-        style={{
-          position: "absolute",
-          inset: 0,
-          pointerEvents: "none",
-          zIndex: 9999,
-        }}
-      >
-        {stationLabels.map((l, idx) => (
-          <div
-            key={idx}
-            style={{
-              position: "absolute",
-              left: l.x,
-              top: l.y,
-              transform: "translate(0, -50%)",
-              color: "#fff",
-              fontFamily: "Roboto",
-            }}
-          >
-            <div style={{ fontWeight: 700, fontSize: 16 }}>{l.name}</div>
-            {l.sub ? (
-              <div
-                style={{
-                  color: "#CBCBCB",
-                  fontWeight: 400,
-                  fontSize: 13,
-                  marginTop: 2,
-                }}
-              >
-                {l.sub}
-              </div>
-            ) : null}
-          </div>
-        ))}
-        {sightData?.map((s: any, i: number) => {
-          const centerLat = routeData?.center_latitude;
-          const centerLon = routeData?.center_longitude;
-          if (centerLat === undefined || centerLon === undefined) return null;
-          const cos = Math.cos(rotationAngle);
-          const sin = Math.sin(rotationAngle);
-          const local = coordinatesToLocal(
-            s.latitude - centerLat,
-            s.longitude - centerLon
-          );
-          const x = local.x * UP_SCALE;
-          const y = local.y * UP_SCALE;
-          const rx = x * cos - y * sin;
-          const ry = x * sin + y * cos;
-          const dpr = Math.max(
-            1,
-            (typeof window !== "undefined" && window.devicePixelRatio) || 1
-          );
-          const sx = (rx * scale + position.x) / dpr;
-          const sy = (ry * scale + position.y) / dpr;
-          const size = 30;
-
-          const handleSightClick = () => {
-            const {
-              setSelectedSightId,
-              setIsManualSelection,
-              setIsRightWidgetSelectorOpen,
-              closeGovernorModal,
-            } = useGeolocationStore();
-            setSelectedSightId(String(s.id));
-            setIsManualSelection(true);
-            setIsRightWidgetSelectorOpen(false);
-            closeGovernorModal();
-          };
-
-          return (
-            <img
-              key={`sight-${s.id}`}
-              src={sightIcon}
-              alt=""
-              width={size}
-              height={size}
-              style={{
-                position: "absolute",
-                left: sx - size / 2,
-                top: sy - size / 2,
-                pointerEvents: "auto",
-                cursor: "pointer",
-              }}
-              onClick={handleSightClick}
-            />
-          );
-        })}
-
-        {(() => {
-          if (!routeData) return null;
-          const centerLat = routeData.center_latitude;
-          const centerLon = routeData.center_longitude;
-          if (centerLat === undefined || centerLon === undefined) return null;
-
-          const coords: any = apiStore?.context?.currentCoordinates;
-          if (!coords) return null;
-
-          const local = coordinatesToLocal(
-            coords.latitude - centerLat,
-            coords.longitude - centerLon
-          );
-          const wx = local.x * UP_SCALE;
-          const wy = local.y * UP_SCALE;
-          const cosR = Math.cos(rotationAngle);
-          const sinR = Math.sin(rotationAngle);
-          const rx = wx * cosR - wy * sinR;
-          const ry = wx * sinR + wy * cosR;
-          const dpr2 = Math.max(
-            1,
-            (typeof window !== "undefined" && window.devicePixelRatio) || 1
-          );
-          const screenX = (rx * scale + position.x) / dpr2;
-          const screenY = (ry * scale + position.y) / dpr2;
-
-          const pathPts: { x: number; y: number }[] = [];
-          for (let i = 0; i < routePath.length; i += 2)
-            pathPts.push({ x: routePath[i], y: routePath[i + 1] });
-          const stationsForAngle = (stationData || []).map((st: any) => {
-            const loc = coordinatesToLocal(
-              st.latitude - centerLat,
-              st.longitude - centerLon
-            );
-            const x = loc.x * UP_SCALE,
-              y = loc.y * UP_SCALE;
-            const rx2 = x * cosR - y * sinR,
-              ry2 = x * sinR + y * cosR;
-            return {
-              longitude: rx2,
-              latitude: ry2,
-              offset_x: st.offset_x,
-              offset_y: st.offset_y,
-            };
-          });
-          let tramSegIndex = -1;
-          if (routePath.length >= 4) {
-            let best = -1,
-              bestD = Infinity;
-            for (let i = 0; i < routePath.length - 2; i += 2) {
-              const p1x = routePath[i],
-                p1y = routePath[i + 1];
-              const p2x = routePath[i + 2],
-                p2y = routePath[i + 3];
-              const dx = p2x - p1x,
-                dy = p2y - p1y;
-              const len2 = dx * dx + dy * dy;
-              if (!len2) continue;
-              const t = ((rx - p1x) * dx + (ry - p1y) * dy) / len2;
-              const cl = Math.max(0, Math.min(1, t));
-              const px = p1x + cl * dx,
-                py = p1y + cl * dy;
-              const d = Math.hypot(rx - px, ry - py);
-              if (d < bestD) {
-                bestD = d;
-                best = i / 2;
-              }
-            }
-            tramSegIndex = best;
-          }
-          const optimalAngle = (() => {
-            const testRadiusInMap = 100 / scale;
-            const minPath = 60,
-              minPassed = 60,
-              minStation = 50;
-            let bestAng = 0,
-              bestScore = Infinity;
-            for (let i = 0; i < 12; i++) {
-              const ang = (i * Math.PI * 2) / 12;
-              const tx = rx + Math.cos(ang) * testRadiusInMap;
-              const ty = ry + Math.sin(ang) * testRadiusInMap;
-              const distPath = (function () {
-                if (pathPts.length < 2) return Infinity;
-                let md = Infinity;
-                for (let k = 0; k < pathPts.length - 1; k++) {
-                  const p1 = pathPts[k],
-                    p2 = pathPts[k + 1];
-                  const L2 = (p2.x - p1.x) ** 2 + (p2.y - p1.y) ** 2;
-                  if (!L2) continue;
-                  const tt =
-                    ((tx - p1.x) * (p2.x - p1.x) +
-                      (ty - p1.y) * (p2.y - p1.y)) /
-                    L2;
-                  const cl = Math.max(0, Math.min(1, tt));
-                  const px = p1.x + cl * (p2.x - p1.x),
-                    py = p1.y + cl * (p2.y - p1.y);
-                  const d = Math.hypot(tx - px, ty - py);
-                  if (d < md) md = d;
-                }
-                return md * scale;
-              })();
-              const distPassed = (function () {
-                if (pathPts.length < 2 || tramSegIndex < 0) return Infinity;
-                let md = Infinity;
-                for (
-                  let k = 0;
-                  k <= Math.min(tramSegIndex, pathPts.length - 2);
-                  k++
-                ) {
-                  const p1 = pathPts[k],
-                    p2 = pathPts[k + 1];
-                  const L2 = (p2.x - p1.x) ** 2 + (p2.y - p1.y) ** 2;
-                  if (!L2) continue;
-                  const tt =
-                    ((tx - p1.x) * (p2.x - p1.x) +
-                      (ty - p1.y) * (p2.y - p1.y)) /
-                    L2;
-                  const cl = Math.max(0, Math.min(1, tt));
-                  const px = p1.x + cl * (p2.x - p1.x),
-                    py = p1.y + cl * (p2.y - p1.y);
-                  const d = Math.hypot(tx - px, ty - py);
-                  if (d < md) md = d;
-                }
-                return md * scale;
-              })();
-              const distStation = (function () {
-                if (!stationsForAngle.length) return Infinity;
-                const DEFAULT_LABEL_OFFSET_X = 25,
-                  DEFAULT_LABEL_OFFSET_Y = 0;
-                let md = Infinity;
-                for (const st of stationsForAngle) {
-                  const offsetX =
-                    st.offset_x === 0 && st.offset_y === 0
-                      ? DEFAULT_LABEL_OFFSET_X
-                      : st.offset_x || 0 * 3;
-                  const offsetY =
-                    st.offset_x === 0 && st.offset_y === 0
-                      ? DEFAULT_LABEL_OFFSET_Y
-                      : st.offset_y || 0 * 3;
-                  const lx = st.longitude + offsetX,
-                    ly = st.latitude + offsetY;
-                  const d = Math.hypot(tx - lx, ty - ly);
-                  if (d < md) md = d;
-                }
-                return md * scale;
-              })();
-              let weight = 0;
-              if (distPath < minPath) weight += 100 * (1 - distPath / minPath);
-              if (distPassed < minPassed)
-                weight += 10 * (1 - distPassed / minPassed);
-              if (distStation < minStation)
-                weight += 1000 * (1 - distStation / minStation);
-              if (weight < bestScore) {
-                bestScore = weight;
-                bestAng = ang;
-              }
-            }
-            return bestAng;
-          })();
-
-          return (
-            <TramIconWebGL
-              x={screenX}
-              y={screenY}
-              optimalAngle={optimalAngle}
-              scale={scale}
-            />
-          );
-        })()}
-      </div>
-    </div>
-  );
-});
-
-export default WebGLMap;
+// function initWebGLContext(
+//   canvas: HTMLCanvasElement
+// ): WebGLRenderingContext | null {
+//   const gl =
+//     (canvas.getContext("webgl") as WebGLRenderingContext | null) ||
+//     (canvas.getContext("experimental-webgl") as WebGLRenderingContext | null);
+//   return gl;
+// }
+
+// function resizeCanvasToDisplaySize(canvas: HTMLCanvasElement): boolean {
+//   const dpr = Math.max(1, window.devicePixelRatio || 1);
+//   const displayWidth = Math.floor(canvas.clientWidth * dpr);
+//   const displayHeight = Math.floor(canvas.clientHeight * dpr);
+//   if (canvas.width !== displayWidth || canvas.height !== displayHeight) {
+//     canvas.width = displayWidth;
+//     canvas.height = displayHeight;
+//     return true;
+//   }
+//   return false;
+// }
+
+// export const WebGLMap = observer(() => {
+//   const canvasRef = useRef<HTMLCanvasElement | null>(null);
+//   const glRef = useRef<WebGLRenderingContext | null>(null);
+//   const programRef = useRef<WebGLProgram | null>(null);
+//   const bufferRef = useRef<WebGLBuffer | null>(null);
+//   const pointProgramRef = useRef<WebGLProgram | null>(null);
+//   const pointBufferRef = useRef<WebGLBuffer | null>(null);
+//   const screenLineProgramRef = useRef<WebGLProgram | null>(null);
+//   const screenLineBufferRef = useRef<WebGLBuffer | null>(null);
+//   const attribsRef = useRef<{ a_pos: number } | null>(null);
+//   const uniformsRef = useRef<{
+//     u_cameraPos: WebGLUniformLocation | null;
+//     u_scale: WebGLUniformLocation | null;
+//     u_resolution: WebGLUniformLocation | null;
+//     u_color: WebGLUniformLocation | null;
+//   } | null>(null);
+
+//   const { routeData, stationData, stationDataEn, stationDataZh, sightData } =
+//     useMapData() as any;
+//   const {
+//     position,
+//     scale,
+//     setPosition,
+//     setScale,
+//     isAutoMode,
+//     setIsAutoMode,
+//     screenCenter,
+//     setScreenCenter,
+//     userActivityTimestamp,
+//     updateUserActivity,
+//   } = useTransform();
+
+//   const cameraAnimationStore = useCameraAnimationStore();
+
+//   const scaleLimitsRef = useRef({
+//     min: null as number | null,
+//     max: null as number | null,
+//   });
+
+//   useEffect(() => {
+//     if (
+//       routeData?.scale_min !== undefined &&
+//       routeData?.scale_max !== undefined
+//     ) {
+//       scaleLimitsRef.current = {
+//         min: routeData.scale_min / 10,
+//         max: routeData.scale_max / 10,
+//       };
+//     }
+//   }, [routeData?.scale_min, routeData?.scale_max]);
+
+//   const clampScale = useCallback((value: number) => {
+//     const { min, max } = scaleLimitsRef.current;
+
+//     if (min === null || max === null) {
+//       return value;
+//     }
+
+//     const clampedValue = Math.max(min, Math.min(max, value));
+
+//     return clampedValue;
+//   }, []);
+//   const { selectedLanguage } = useGeolocationStore();
+//   const positionRef = useRef(position);
+//   const scaleRef = useRef(scale);
+//   const setPositionRef = useRef(setPosition);
+//   const setScaleRef = useRef(setScale);
+
+//   useEffect(() => {
+//     setPositionRef.current = setPosition;
+//   }, [setPosition]);
+
+//   useEffect(() => {
+//     setScaleRef.current = setScale;
+//   }, [setScale]);
+
+//   useEffect(() => {
+//     if (routeData) {
+//     }
+//   }, [routeData]);
+
+//   useEffect(() => {
+//     positionRef.current = position;
+//   }, [position]);
+
+//   useEffect(() => {
+//     scaleRef.current = scale;
+//   }, [scale]);
+
+//   const rotationAngle = useMemo(() => {
+//     const deg = (routeData as any)?.rotate ?? 0;
+//     return (deg * Math.PI) / 180;
+//   }, [routeData]);
+
+//   const {
+//     position: animatedYellowDotPosition,
+//     animateTo: animateYellowDotTo,
+//     setPositionImmediate: setYellowDotPositionImmediate,
+//   } = useAnimatedPolarPosition(0, 0, 800);
+
+//   const routePath = useMemo(() => {
+//     if (!routeData?.path || routeData?.path.length === 0)
+//       return new Float32Array();
+//     const centerLat = routeData.center_latitude;
+//     const centerLon = routeData.center_longitude;
+//     if (centerLat === undefined || centerLon === undefined)
+//       return new Float32Array();
+
+//     const cos = Math.cos(rotationAngle);
+//     const sin = Math.sin(rotationAngle);
+
+//     const verts: number[] = [];
+//     for (const [lat, lon] of routeData.path) {
+//       const local = coordinatesToLocal(lat - centerLat, lon - centerLon);
+//       const x = local.x * UP_SCALE;
+//       const y = local.y * UP_SCALE;
+//       const rx = x * cos - y * sin;
+//       const ry = x * sin + y * cos;
+//       verts.push(rx, ry);
+//     }
+//     return new Float32Array(verts);
+//   }, [
+//     routeData?.path,
+//     routeData?.center_latitude,
+//     routeData?.center_longitude,
+//     rotationAngle,
+//   ]);
+
+//   const transformedTramCoords = useMemo(() => {
+//     const centerLat = routeData?.center_latitude;
+//     const centerLon = routeData?.center_longitude;
+//     if (centerLat === undefined || centerLon === undefined) return null;
+
+//     const coords: any = apiStore?.context?.currentCoordinates;
+//     if (!coords) return null;
+
+//     const local = coordinatesToLocal(
+//       coords.latitude - centerLat,
+//       coords.longitude - centerLon
+//     );
+//     const x = local.x * UP_SCALE;
+//     const y = local.y * UP_SCALE;
+//     const cos = Math.cos(rotationAngle);
+//     const sin = Math.sin(rotationAngle);
+//     const rx = x * cos - y * sin;
+//     const ry = x * sin + y * cos;
+
+//     return { x: rx, y: ry };
+//   }, [
+//     routeData?.center_latitude,
+//     routeData?.center_longitude,
+//     apiStore?.context?.currentCoordinates,
+//     rotationAngle,
+//   ]);
+
+//   useEffect(() => {
+//     const callback = (newPos: { x: number; y: number }, newZoom: number) => {
+//       setPosition(newPos);
+//       setScale(newZoom);
+//     };
+
+//     cameraAnimationStore.setUpdateCallback(callback);
+
+//     cameraAnimationStore.syncState(position, scale);
+
+//     return () => {
+//       cameraAnimationStore.setUpdateCallback(null);
+//     };
+//   }, []);
+
+//   useEffect(() => {
+//     if (
+//       routeData?.scale_min !== undefined &&
+//       routeData?.scale_max !== undefined
+//     ) {
+//       cameraAnimationStore.setMaxZoom(routeData.scale_max / SCALE_FACTOR);
+//       cameraAnimationStore.setMinZoom(routeData.scale_min / SCALE_FACTOR);
+//     }
+//   }, [routeData?.scale_min, routeData?.scale_max, cameraAnimationStore]);
+
+//   useEffect(() => {
+//     const interval = setInterval(() => {
+//       const timeSinceActivity = Date.now() - userActivityTimestamp;
+//       if (timeSinceActivity >= 5000 && !isAutoMode) {
+//         setIsAutoMode(true);
+//       }
+//     }, 1000);
+
+//     return () => clearInterval(interval);
+//   }, [userActivityTimestamp, isAutoMode, setIsAutoMode]);
+
+//   useEffect(() => {
+//     if (cameraAnimationStore.isActivelyAnimating) {
+//       return;
+//     }
+
+//     if (isAutoMode && transformedTramCoords && screenCenter) {
+//       const transformedStations = stationData
+//         ? stationData
+//             .map((station: any) => {
+//               const centerLat = routeData?.center_latitude;
+//               const centerLon = routeData?.center_longitude;
+//               if (centerLat === undefined || centerLon === undefined)
+//                 return null;
+
+//               const local = coordinatesToLocal(
+//                 station.latitude - centerLat,
+//                 station.longitude - centerLon
+//               );
+//               const x = local.x * UP_SCALE;
+//               const y = local.y * UP_SCALE;
+//               const cos = Math.cos(rotationAngle);
+//               const sin = Math.sin(rotationAngle);
+//               const rx = x * cos - y * sin;
+//               const ry = x * sin + y * cos;
+
+//               return {
+//                 longitude: rx,
+//                 latitude: ry,
+//                 id: station.id,
+//               };
+//             })
+//             .filter(Boolean)
+//         : [];
+
+//       if (
+//         transformedTramCoords &&
+//         screenCenter &&
+//         transformedStations &&
+//         scaleLimitsRef.current !== null &&
+//         scaleLimitsRef.current.max !== null &&
+//         scaleLimitsRef.current.min &&
+//         scaleLimitsRef.current.min !== null
+//       ) {
+//         cameraAnimationStore.setMaxZoom(scaleLimitsRef.current!.max);
+//         cameraAnimationStore.setMinZoom(scaleLimitsRef.current!.min);
+
+//         cameraAnimationStore.syncState(positionRef.current, scaleRef.current);
+
+//         cameraAnimationStore.followTram(
+//           transformedTramCoords,
+//           screenCenter,
+//           transformedStations
+//         );
+//       }
+//     } else if (!isAutoMode) {
+//       cameraAnimationStore.stopAnimation();
+//     }
+//   }, [
+//     isAutoMode,
+//     transformedTramCoords,
+//     screenCenter,
+//     cameraAnimationStore,
+//     stationData,
+//     routeData,
+//     rotationAngle,
+//   ]);
+
+//   const stationLabels = useMemo(() => {
+//     if (!stationData || !routeData)
+//       return [] as Array<{ x: number; y: number; name: string; sub?: string }>;
+//     const centerLat = routeData.center_latitude;
+//     const centerLon = routeData.center_longitude;
+//     if (centerLat === undefined || centerLon === undefined) return [];
+//     const cos = Math.cos(rotationAngle);
+//     const sin = Math.sin(rotationAngle);
+//     const result: Array<{ x: number; y: number; name: string; sub?: string }> =
+//       [];
+//     for (let i = 0; i < stationData.length; i++) {
+//       const st = stationData[i];
+//       const local = coordinatesToLocal(
+//         st.latitude - centerLat,
+//         st.longitude - centerLon
+//       );
+//       const x = local.x * UP_SCALE;
+//       const y = local.y * UP_SCALE;
+//       const rx = x * cos - y * sin;
+//       const ry = x * sin + y * cos;
+//       const DEFAULT_LABEL_OFFSET_X = 25;
+//       const DEFAULT_LABEL_OFFSET_Y = 0;
+//       const labelOffsetX =
+//         st.offset_x === 0 && st.offset_y === 0
+//           ? DEFAULT_LABEL_OFFSET_X
+//           : st.offset_x;
+//       const labelOffsetY =
+//         st.offset_x === 0 && st.offset_y === 0
+//           ? DEFAULT_LABEL_OFFSET_Y
+//           : st.offset_y;
+//       const textBlockPositionX = rx + labelOffsetX;
+//       const textBlockPositionY = ry + labelOffsetY;
+//       const dpr = Math.max(
+//         1,
+//         (typeof window !== "undefined" && window.devicePixelRatio) || 1
+//       );
+//       const sx = (textBlockPositionX * scale + position.x) / dpr;
+//       const sy = (textBlockPositionY * scale + position.y) / dpr;
+//       let sub: string | undefined;
+//       if ((selectedLanguage as any) === "zh")
+//         sub = (stationDataZh as any)?.[i]?.name;
+//       else if (
+//         (selectedLanguage as any) === "en" ||
+//         (selectedLanguage as any) === "ru"
+//       )
+//         sub = (stationDataEn as any)?.[i]?.name;
+//       result.push({ x: sx, y: sy, name: st.name, sub });
+//     }
+//     return result;
+//   }, [
+//     stationData,
+//     stationDataEn as any,
+//     stationDataZh as any,
+//     position.x,
+//     position.y,
+//     scale,
+//     routeData?.center_latitude,
+//     routeData?.center_longitude,
+//     rotationAngle,
+//     selectedLanguage as any,
+//   ]);
+
+//   const stationPoints = useMemo(() => {
+//     if (!stationData || !routeData) return new Float32Array();
+//     const centerLat = routeData.center_latitude;
+//     const centerLon = routeData.center_longitude;
+//     if (centerLat === undefined || centerLon === undefined)
+//       return new Float32Array();
+
+//     const cos = Math.cos(rotationAngle);
+//     const sin = Math.sin(rotationAngle);
+//     const verts: number[] = [];
+//     for (const s of stationData) {
+//       const local = coordinatesToLocal(
+//         s.latitude - centerLat,
+//         s.longitude - centerLon
+//       );
+//       const x = local.x * UP_SCALE;
+//       const y = local.y * UP_SCALE;
+//       const rx = x * cos - y * sin;
+//       const ry = x * sin + y * cos;
+//       verts.push(rx, ry);
+//     }
+//     return new Float32Array(verts);
+//   }, [
+//     stationData,
+//     routeData?.center_latitude,
+//     routeData?.center_longitude,
+//     rotationAngle,
+//   ]);
+
+//   const sightPoints = useMemo(() => {
+//     if (!sightData || !routeData) return new Float32Array();
+//     const centerLat = routeData.center_latitude;
+//     const centerLon = routeData.center_longitude;
+//     if (centerLat === undefined || centerLon === undefined)
+//       return new Float32Array();
+
+//     const cos = Math.cos(rotationAngle);
+//     const sin = Math.sin(rotationAngle);
+//     const verts: number[] = [];
+//     for (const s of sightData) {
+//       const local = coordinatesToLocal(
+//         s.latitude - centerLat,
+//         s.longitude - centerLon
+//       );
+//       const x = local.x * UP_SCALE;
+//       const y = local.y * UP_SCALE;
+//       const rx = x * cos - y * sin;
+//       const ry = x * sin + y * cos;
+//       verts.push(rx, ry);
+//     }
+//     return new Float32Array(verts);
+//   }, [
+//     sightData,
+//     routeData?.center_latitude,
+//     routeData?.center_longitude,
+//     rotationAngle,
+//   ]);
+
+//   useEffect(() => {
+//     const canvas = canvasRef.current;
+//     if (!canvas) return;
+//     const gl = initWebGLContext(canvas);
+//     glRef.current = gl;
+//     if (!gl) return;
+
+//     const vertSrc = `
+//       attribute vec2 a_pos;
+//       uniform vec2 u_cameraPos;
+//       uniform float u_scale;
+//       uniform vec2 u_resolution;
+//       void main() {
+//         vec2 screen = a_pos * u_scale + u_cameraPos;
+//         vec2 zeroToOne = screen / u_resolution;
+//         vec2 zeroToTwo = zeroToOne * 2.0;
+//         vec2 clip = zeroToTwo - 1.0;
+//         gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
+//       }
+//     `;
+//     const fragSrc = `
+//       precision mediump float;
+//       uniform vec4 u_color;
+//       void main() {
+//         gl_FragColor = u_color;
+//       }
+//     `;
+
+//     const compile = (type: number, src: string) => {
+//       const s = gl.createShader(type)!;
+//       gl.shaderSource(s, src);
+//       gl.compileShader(s);
+//       return s;
+//     };
+//     const vs = compile(gl.VERTEX_SHADER, vertSrc);
+//     const fs = compile(gl.FRAGMENT_SHADER, fragSrc);
+//     const prog = gl.createProgram()!;
+//     gl.attachShader(prog, vs);
+//     gl.attachShader(prog, fs);
+//     gl.linkProgram(prog);
+//     programRef.current = prog;
+//     gl.useProgram(prog);
+
+//     const a_pos = gl.getAttribLocation(prog, "a_pos");
+//     const u_cameraPos = gl.getUniformLocation(prog, "u_cameraPos");
+//     const u_scale = gl.getUniformLocation(prog, "u_scale");
+//     const u_resolution = gl.getUniformLocation(prog, "u_resolution");
+//     const u_color = gl.getUniformLocation(prog, "u_color");
+//     attribsRef.current = { a_pos };
+//     uniformsRef.current = { u_cameraPos, u_scale, u_resolution, u_color };
+
+//     const buffer = gl.createBuffer();
+//     bufferRef.current = buffer;
+
+//     const pointVert = `
+//       attribute vec2 a_pos;
+//       uniform vec2 u_cameraPos;
+//       uniform float u_scale;
+//       uniform vec2 u_resolution;
+//       uniform float u_pointSize;
+//       void main() {
+//         vec2 screen = a_pos * u_scale + u_cameraPos;
+//         vec2 zeroToOne = screen / u_resolution;
+//         vec2 zeroToTwo = zeroToOne * 2.0;
+//         vec2 clip = zeroToTwo - 1.0;
+//         gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
+//         gl_PointSize = u_pointSize;
+//       }
+//     `;
+//     const pointFrag = `
+//       precision mediump float;
+//       uniform vec4 u_color;
+//       void main() {
+//         vec2 c = gl_PointCoord * 2.0 - 1.0;
+//         float d = dot(c, c);
+//         if (d > 1.0) discard;
+//         gl_FragColor = u_color;
+//       }
+//     `;
+//     const vs2 = compile(gl.VERTEX_SHADER, pointVert);
+//     const fs2 = compile(gl.FRAGMENT_SHADER, pointFrag);
+//     const pprog = gl.createProgram()!;
+//     gl.attachShader(pprog, vs2);
+//     gl.attachShader(pprog, fs2);
+//     gl.linkProgram(pprog);
+//     pointProgramRef.current = pprog;
+//     pointBufferRef.current = gl.createBuffer();
+
+//     const lineVert = `
+//       attribute vec2 a_screen;
+//       uniform vec2 u_resolution;
+//       void main(){
+//         vec2 zeroToOne = a_screen / u_resolution;
+//         vec2 clip = zeroToOne * 2.0 - 1.0;
+//         gl_Position = vec4(clip.x, -clip.y, 0.0, 1.0);
+//       }
+//     `;
+//     const lineFrag = `
+//       precision mediump float;
+//       uniform vec4 u_color;
+//       void main(){ gl_FragColor = u_color; }
+//     `;
+//     const lv = compile(gl.VERTEX_SHADER, lineVert);
+//     const lf = compile(gl.FRAGMENT_SHADER, lineFrag);
+//     const lprog = gl.createProgram()!;
+//     gl.attachShader(lprog, lv);
+//     gl.attachShader(lprog, lf);
+//     gl.linkProgram(lprog);
+//     screenLineProgramRef.current = lprog;
+//     screenLineBufferRef.current = gl.createBuffer();
+
+//     const handleResize = () => {
+//       const changed = resizeCanvasToDisplaySize(canvas);
+//       if (!gl) return;
+//       setScreenCenter({
+//         x: canvas.width / 2,
+//         y: canvas.height / 2,
+//       });
+//       if (changed) {
+//         gl.viewport(0, 0, canvas.width, canvas.height);
+//       }
+//       gl.clearColor(0, 0, 0, 1);
+//       gl.clear(gl.COLOR_BUFFER_BIT);
+//     };
+
+//     handleResize();
+//     window.addEventListener("resize", handleResize);
+//     return () => {
+//       window.removeEventListener("resize", handleResize);
+//     };
+//   }, []);
+
+//   useEffect(() => {
+//     const centerLat = routeData?.center_latitude;
+//     const centerLon = routeData?.center_longitude;
+//     if (centerLat !== undefined && centerLon !== undefined) {
+//       const coords: any = apiStore?.context?.currentCoordinates;
+//       if (coords) {
+//         const local = coordinatesToLocal(
+//           coords.latitude - centerLat,
+//           coords.longitude - centerLon
+//         );
+//         const x = local.x * UP_SCALE;
+//         const y = local.y * UP_SCALE;
+//         const cos = Math.cos(rotationAngle),
+//           sin = Math.sin(rotationAngle);
+//         const rx = x * cos - y * sin;
+//         const ry = x * sin + y * cos;
+
+//         if (isAutoMode) {
+//           animateYellowDotTo(rx, ry);
+//         } else {
+//           setYellowDotPositionImmediate(rx, ry);
+//         }
+//       }
+//     }
+//   }, [
+//     routeData?.center_latitude,
+//     routeData?.center_longitude,
+//     rotationAngle,
+//     apiStore?.context?.currentCoordinates?.latitude,
+//     apiStore?.context?.currentCoordinates?.longitude,
+//     isAutoMode,
+//     animateYellowDotTo,
+//     setYellowDotPositionImmediate,
+//   ]);
+
+//   useEffect(() => {
+//     const gl = glRef.current;
+//     const canvas = canvasRef.current;
+//     const prog = programRef.current;
+//     const buffer = bufferRef.current;
+//     const attribs = attribsRef.current;
+//     const uniforms = uniformsRef.current;
+//     const pprog = pointProgramRef.current;
+//     const pbuffer = pointBufferRef.current;
+//     if (
+//       !gl ||
+//       !canvas ||
+//       !prog ||
+//       !buffer ||
+//       !attribs ||
+//       !uniforms ||
+//       !pprog ||
+//       !pbuffer
+//     )
+//       return;
+
+//     gl.viewport(0, 0, canvas.width, canvas.height);
+//     gl.clearColor(0, 0, 0, 1);
+//     gl.clear(gl.COLOR_BUFFER_BIT);
+
+//     gl.useProgram(prog);
+//     gl.uniform2f(uniforms.u_cameraPos, position.x, position.y);
+//     gl.uniform1f(uniforms.u_scale, scale);
+//     gl.uniform2f(uniforms.u_resolution, canvas.width, canvas.height);
+//     gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+//     gl.bufferData(gl.ARRAY_BUFFER, routePath, gl.STATIC_DRAW);
+//     gl.enableVertexAttribArray(attribs.a_pos);
+//     gl.vertexAttribPointer(attribs.a_pos, 2, gl.FLOAT, false, 0, 0);
+
+//     const vcount = routePath.length / 2;
+//     let tramSegIndex = -1;
+//     {
+//       const centerLatTmp = routeData?.center_latitude;
+//       const centerLonTmp = routeData?.center_longitude;
+//       if (centerLatTmp !== undefined && centerLonTmp !== undefined) {
+//         const coordsAny: any = apiStore?.context?.currentCoordinates;
+//         if (coordsAny) {
+//           const loc = coordinatesToLocal(
+//             coordsAny.latitude - centerLatTmp,
+//             coordsAny.longitude - centerLonTmp
+//           );
+//           const wx = loc.x * UP_SCALE;
+//           const wy = loc.y * UP_SCALE;
+//           const cosR = Math.cos(rotationAngle),
+//             sinR = Math.sin(rotationAngle);
+//           const tX = wx * cosR - wy * sinR;
+//           const tY = wx * sinR + wy * cosR;
+//           let best = -1,
+//             bestD = Infinity;
+//           for (let i = 0; i < vcount - 1; i++) {
+//             const p1x = routePath[i * 2],
+//               p1y = routePath[i * 2 + 1];
+//             const p2x = routePath[(i + 1) * 2],
+//               p2y = routePath[(i + 1) * 2 + 1];
+//             const dx = p2x - p1x,
+//               dy = p2y - p1y;
+//             const len2 = dx * dx + dy * dy;
+//             if (!len2) continue;
+//             const t = ((tX - p1x) * dx + (tY - p1y) * dy) / len2;
+//             const cl = Math.max(0, Math.min(1, t));
+//             const px = p1x + cl * dx,
+//               py = p1y + cl * dy;
+//             const d = Math.hypot(tX - px, tY - py);
+//             if (d < bestD) {
+//               bestD = d;
+//               best = i;
+//             }
+//           }
+//           tramSegIndex = best;
+//         }
+//       }
+//     }
+
+//     const vertexCount = routePath.length / 2;
+//     if (vertexCount > 1) {
+//       const generateThickLine = (points: Float32Array, width: number) => {
+//         const vertices: number[] = [];
+//         const halfWidth = width / 2;
+
+//         if (points.length < 4) return new Float32Array();
+
+//         for (let i = 0; i < points.length - 2; i += 2) {
+//           const x1 = points[i];
+//           const y1 = points[i + 1];
+//           const x2 = points[i + 2];
+//           const y2 = points[i + 3];
+
+//           const dx = x2 - x1;
+//           const dy = y2 - y1;
+//           const length = Math.sqrt(dx * dx + dy * dy);
+//           if (length === 0) continue;
+
+//           const perpX = (-dy / length) * halfWidth;
+//           const perpY = (dx / length) * halfWidth;
+
+//           vertices.push(x1 + perpX, y1 + perpY);
+//           vertices.push(x1 - perpX, y1 - perpY);
+//           vertices.push(x2 + perpX, y2 + perpY);
+
+//           vertices.push(x1 - perpX, y1 - perpY);
+//           vertices.push(x2 - perpX, y2 - perpY);
+//           vertices.push(x2 + perpX, y2 + perpY);
+
+//           if (i < points.length - 4) {
+//             const x3 = points[i + 4];
+//             const y3 = points[i + 5];
+
+//             const dx2 = x3 - x2;
+//             const dy2 = y3 - y2;
+//             const length2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
+//             if (length2 > 0) {
+//               const perpX2 = (-dy2 / length2) * halfWidth;
+//               const perpY2 = (dx2 / length2) * halfWidth;
+
+//               vertices.push(x2 + perpX, y2 + perpY);
+//               vertices.push(x2 - perpX, y2 - perpY);
+//               vertices.push(x2 + perpX2, y2 + perpY2);
+
+//               vertices.push(x2 - perpX, y2 - perpY);
+//               vertices.push(x2 - perpX2, y2 - perpY2);
+//               vertices.push(x2 + perpX2, y2 + perpY2);
+//             }
+//           }
+//         }
+
+//         return new Float32Array(vertices);
+//       };
+
+//       const lineWidth = Math.min(6);
+//       const r1 = ((PATH_COLOR >> 16) & 0xff) / 255;
+//       const g1 = ((PATH_COLOR >> 8) & 0xff) / 255;
+//       const b1 = (PATH_COLOR & 0xff) / 255;
+//       gl.uniform4f(uniforms.u_color, r1, g1, b1, 1);
+
+//       if (tramSegIndex >= 0) {
+//         const animatedPos = animatedYellowDotPosition;
+//         if (
+//           animatedPos &&
+//           animatedPos.x !== undefined &&
+//           animatedPos.y !== undefined
+//         ) {
+//           const passedPoints: number[] = [];
+
+//           for (let i = 0; i <= tramSegIndex; i++) {
+//             passedPoints.push(routePath[i * 2], routePath[i * 2 + 1]);
+//           }
+
+//           passedPoints.push(animatedPos.x, animatedPos.y);
+
+//           if (passedPoints.length >= 4) {
+//             const thickLineVertices = generateThickLine(
+//               new Float32Array(passedPoints),
+//               lineWidth
+//             );
+//             gl.bufferData(gl.ARRAY_BUFFER, thickLineVertices, gl.STATIC_DRAW);
+//             gl.drawArrays(gl.TRIANGLES, 0, thickLineVertices.length / 2);
+//           }
+//         }
+//       }
+
+//       const r2 = ((UNPASSED_STATION_COLOR >> 16) & 0xff) / 255;
+//       const g2 = ((UNPASSED_STATION_COLOR >> 8) & 0xff) / 255;
+//       const b2 = (UNPASSED_STATION_COLOR & 0xff) / 255;
+//       gl.uniform4f(uniforms.u_color, r2, g2, b2, 1);
+
+//       const animatedPos = animatedYellowDotPosition;
+//       if (
+//         animatedPos &&
+//         animatedPos.x !== undefined &&
+//         animatedPos.y !== undefined
+//       ) {
+//         const unpassedPoints: number[] = [];
+
+//         unpassedPoints.push(animatedPos.x, animatedPos.y);
+
+//         for (let i = tramSegIndex + 1; i < vertexCount; i++) {
+//           unpassedPoints.push(routePath[i * 2], routePath[i * 2 + 1]);
+//         }
+
+//         if (unpassedPoints.length >= 4) {
+//           const thickLineVertices = generateThickLine(
+//             new Float32Array(unpassedPoints),
+//             lineWidth
+//           );
+//           gl.bufferData(gl.ARRAY_BUFFER, thickLineVertices, gl.STATIC_DRAW);
+//           gl.drawArrays(gl.TRIANGLES, 0, thickLineVertices.length / 2);
+//         }
+//       }
+//     }
+
+//     if (stationPoints.length > 0) {
+//       gl.useProgram(pprog);
+//       const a_pos_pts = gl.getAttribLocation(pprog, "a_pos");
+//       const u_cameraPos_pts = gl.getUniformLocation(pprog, "u_cameraPos");
+//       const u_scale_pts = gl.getUniformLocation(pprog, "u_scale");
+//       const u_resolution_pts = gl.getUniformLocation(pprog, "u_resolution");
+//       const u_pointSize = gl.getUniformLocation(pprog, "u_pointSize");
+//       const u_color_pts = gl.getUniformLocation(pprog, "u_color");
+
+//       gl.uniform2f(u_cameraPos_pts, position.x, position.y);
+//       gl.uniform1f(u_scale_pts, scale);
+//       gl.uniform2f(u_resolution_pts, canvas.width, canvas.height);
+//       gl.bindBuffer(gl.ARRAY_BUFFER, pbuffer);
+//       gl.bufferData(gl.ARRAY_BUFFER, stationPoints, gl.STATIC_DRAW);
+//       gl.enableVertexAttribArray(a_pos_pts);
+//       gl.vertexAttribPointer(a_pos_pts, 2, gl.FLOAT, false, 0, 0);
+
+//       gl.uniform1f(u_pointSize, 10 * scale * 1.5);
+//       const r_outline = ((BACKGROUND_COLOR >> 16) & 0xff) / 255;
+//       const g_outline = ((BACKGROUND_COLOR >> 8) & 0xff) / 255;
+//       const b_outline = (BACKGROUND_COLOR & 0xff) / 255;
+//       gl.uniform4f(u_color_pts, r_outline, g_outline, b_outline, 1);
+//       gl.drawArrays(gl.POINTS, 0, stationPoints.length / 2);
+
+//       gl.uniform1f(u_pointSize, 8.0 * scale * 1.5);
+
+//       if (tramSegIndex >= 0) {
+//         const passedStations = [];
+//         for (let i = 0; i < stationData.length; i++) {
+//           if (i <= tramSegIndex) {
+//             passedStations.push(stationPoints[i * 2], stationPoints[i * 2 + 1]);
+//           }
+//         }
+//         if (passedStations.length > 0) {
+//           const r_passed = ((PATH_COLOR >> 16) & 0xff) / 255;
+//           const g_passed = ((PATH_COLOR >> 8) & 0xff) / 255;
+//           const b_passed = (PATH_COLOR & 0xff) / 255;
+//           gl.uniform4f(u_color_pts, r_passed, g_passed, b_passed, 1);
+//           gl.bufferData(
+//             gl.ARRAY_BUFFER,
+//             new Float32Array(passedStations),
+//             gl.STATIC_DRAW
+//           );
+//           gl.drawArrays(gl.POINTS, 0, passedStations.length / 2);
+//         }
+//       }
+
+//       if (tramSegIndex >= 0) {
+//         const unpassedStations = [];
+//         for (let i = 0; i < stationData.length; i++) {
+//           if (i > tramSegIndex) {
+//             unpassedStations.push(
+//               stationPoints[i * 2],
+//               stationPoints[i * 2 + 1]
+//             );
+//           }
+//         }
+//         if (unpassedStations.length > 0) {
+//           const r_unpassed = ((UNPASSED_STATION_COLOR >> 16) & 0xff) / 255;
+//           const g_unpassed = ((UNPASSED_STATION_COLOR >> 8) & 0xff) / 255;
+//           const b_unpassed = (UNPASSED_STATION_COLOR & 0xff) / 255;
+//           gl.uniform4f(u_color_pts, r_unpassed, g_unpassed, b_unpassed, 1);
+//           gl.bufferData(
+//             gl.ARRAY_BUFFER,
+//             new Float32Array(unpassedStations),
+//             gl.STATIC_DRAW
+//           );
+//           gl.drawArrays(gl.POINTS, 0, unpassedStations.length / 2);
+//         }
+//       } else {
+//         const r_unpassed = ((UNPASSED_STATION_COLOR >> 16) & 0xff) / 255;
+//         const g_unpassed = ((UNPASSED_STATION_COLOR >> 8) & 0xff) / 255;
+//         const b_unpassed = (UNPASSED_STATION_COLOR & 0xff) / 255;
+//         gl.uniform4f(u_color_pts, r_unpassed, g_unpassed, b_unpassed, 1);
+//         gl.bufferData(gl.ARRAY_BUFFER, stationPoints, gl.STATIC_DRAW);
+//         gl.drawArrays(gl.POINTS, 0, stationPoints.length / 2);
+//       }
+//     }
+
+//     const a_pos_pts = gl.getAttribLocation(pprog, "a_pos");
+//     const u_cameraPos_pts = gl.getUniformLocation(pprog, "u_cameraPos");
+//     const u_scale_pts = gl.getUniformLocation(pprog, "u_scale");
+//     const u_resolution_pts = gl.getUniformLocation(pprog, "u_resolution");
+//     const u_pointSize = gl.getUniformLocation(pprog, "u_pointSize");
+//     const u_color_pts = gl.getUniformLocation(pprog, "u_color");
+
+//     gl.uniform2f(u_cameraPos_pts, position.x, position.y);
+//     gl.uniform1f(u_scale_pts, scale);
+//     gl.uniform2f(u_resolution_pts, canvas.width, canvas.height);
+
+//     const toPointsArray = (arr: number[]) => new Float32Array(arr);
+
+//     const pathPts: { x: number; y: number }[] = [];
+//     for (let i = 0; i < routePath.length; i += 2)
+//       pathPts.push({ x: routePath[i], y: routePath[i + 1] });
+//     const getSeg = (px: number, py: number) => {
+//       if (pathPts.length < 2) return -1;
+//       let best = -1,
+//         bestD = Infinity;
+//       for (let i = 0; i < pathPts.length - 1; i++) {
+//         const p1 = pathPts[i],
+//           p2 = pathPts[i + 1];
+//         const dx = p2.x - p1.x,
+//           dy = p2.y - p1.y;
+//         const len2 = dx * dx + dy * dy;
+//         if (!len2) continue;
+//         const t = ((px - p1.x) * dx + (py - p1.y) * dy) / len2;
+//         const tt = Math.max(0, Math.min(1, t));
+//         const cx = p1.x + tt * dx,
+//           cy = p1.y + tt * dy;
+//         const d = Math.hypot(px - cx, py - cy);
+//         if (d < bestD) {
+//           bestD = d;
+//           best = i;
+//         }
+//       }
+//       return best;
+//     };
+
+//     let tramSegForStations = -1;
+//     {
+//       const cLat = routeData?.center_latitude,
+//         cLon = routeData?.center_longitude;
+//       const tram = apiStore?.context?.currentCoordinates as any;
+//       if (tram && cLat !== undefined && cLon !== undefined) {
+//         const loc = coordinatesToLocal(
+//           tram.latitude - cLat,
+//           tram.longitude - cLon
+//         );
+//         const wx = loc.x * UP_SCALE,
+//           wy = loc.y * UP_SCALE;
+//         const cosR = Math.cos(rotationAngle),
+//           sinR = Math.sin(rotationAngle);
+//         const tx = wx * cosR - wy * sinR,
+//           ty = wx * sinR + wy * cosR;
+//         tramSegForStations = getSeg(tx, ty);
+//       }
+//     }
+
+//     const passedStations: number[] = [];
+//     const unpassedStations: number[] = [];
+//     for (let i = 0; i < stationPoints.length; i += 2) {
+//       const sx = stationPoints[i],
+//         sy = stationPoints[i + 1];
+//       const seg = getSeg(sx, sy);
+//       if (tramSegForStations !== -1 && seg !== -1 && seg < tramSegForStations)
+//         passedStations.push(sx, sy);
+//       else unpassedStations.push(sx, sy);
+//     }
+
+//     const outlineSize = 10.0 * scale * 2,
+//       coreSize = 8.0 * scale * 2;
+
+//     gl.bindBuffer(gl.ARRAY_BUFFER, pbuffer);
+//     gl.bufferData(
+//       gl.ARRAY_BUFFER,
+//       toPointsArray(unpassedStations),
+//       gl.STREAM_DRAW
+//     );
+//     gl.enableVertexAttribArray(a_pos_pts);
+//     gl.vertexAttribPointer(a_pos_pts, 2, gl.FLOAT, false, 0, 0);
+//     gl.uniform1f(u_pointSize, outlineSize);
+//     gl.uniform4f(
+//       u_color_pts,
+//       ((BACKGROUND_COLOR >> 16) & 255) / 255,
+//       ((BACKGROUND_COLOR >> 8) & 255) / 255,
+//       (BACKGROUND_COLOR & 255) / 255,
+//       1
+//     );
+//     if (unpassedStations.length)
+//       gl.drawArrays(gl.POINTS, 0, unpassedStations.length / 2);
+//     gl.uniform1f(u_pointSize, coreSize);
+//     gl.uniform4f(
+//       u_color_pts,
+//       ((UNPASSED_STATION_COLOR >> 16) & 255) / 255,
+//       ((UNPASSED_STATION_COLOR >> 8) & 255) / 255,
+//       (UNPASSED_STATION_COLOR & 255) / 255,
+//       1
+//     );
+//     if (unpassedStations.length)
+//       gl.drawArrays(gl.POINTS, 0, unpassedStations.length / 2);
+
+//     gl.bindBuffer(gl.ARRAY_BUFFER, pbuffer);
+//     gl.bufferData(
+//       gl.ARRAY_BUFFER,
+//       toPointsArray(passedStations),
+//       gl.STREAM_DRAW
+//     );
+//     gl.enableVertexAttribArray(a_pos_pts);
+//     gl.vertexAttribPointer(a_pos_pts, 2, gl.FLOAT, false, 0, 0);
+//     gl.uniform1f(u_pointSize, outlineSize);
+//     gl.uniform4f(
+//       u_color_pts,
+//       ((BACKGROUND_COLOR >> 16) & 255) / 255,
+//       ((BACKGROUND_COLOR >> 8) & 255) / 255,
+//       (BACKGROUND_COLOR & 255) / 255,
+//       1
+//     );
+//     if (passedStations.length)
+//       gl.drawArrays(gl.POINTS, 0, passedStations.length / 2);
+//     gl.uniform1f(u_pointSize, coreSize);
+//     gl.uniform4f(
+//       u_color_pts,
+//       ((PATH_COLOR >> 16) & 255) / 255,
+//       ((PATH_COLOR >> 8) & 255) / 255,
+//       (PATH_COLOR & 255) / 255,
+//       1
+//     );
+//     if (passedStations.length)
+//       gl.drawArrays(gl.POINTS, 0, passedStations.length / 2);
+
+//     if (
+//       stationData &&
+//       stationData.length > 0 &&
+//       routeData &&
+//       apiStore?.context
+//     ) {
+//       const centerLat = routeData.center_latitude;
+//       const centerLon = routeData.center_longitude;
+//       if (centerLat !== undefined && centerLon !== undefined) {
+//         const cos = Math.cos(rotationAngle);
+//         const sin = Math.sin(rotationAngle);
+
+//         const startStationData = stationData.find(
+//           (station) => station.id.toString() === apiStore.context?.startStopId
+//         );
+//         const endStationData = stationData.find(
+//           (station) => station.id.toString() === apiStore.context?.endStopId
+//         );
+
+//         const terminalStations: number[] = [];
+
+//         if (startStationData) {
+//           const startLocal = coordinatesToLocal(
+//             startStationData.latitude - centerLat,
+//             startStationData.longitude - centerLon
+//           );
+//           const startX = startLocal.x * UP_SCALE;
+//           const startY = startLocal.y * UP_SCALE;
+//           const startRx = startX * cos - startY * sin;
+//           const startRy = startX * sin + startY * cos;
+//           terminalStations.push(startRx, startRy);
+//         }
+
+//         if (endStationData) {
+//           const endLocal = coordinatesToLocal(
+//             endStationData.latitude - centerLat,
+//             endStationData.longitude - centerLon
+//           );
+//           const endX = endLocal.x * UP_SCALE;
+//           const endY = endLocal.y * UP_SCALE;
+//           const endRx = endX * cos - endY * sin;
+//           const endRy = endX * sin + endY * cos;
+//           terminalStations.push(endRx, endRy);
+//         }
+
+//         if (terminalStations.length > 0) {
+//           const terminalStationData: any[] = [];
+//           if (startStationData) terminalStationData.push(startStationData);
+//           if (endStationData) terminalStationData.push(endStationData);
+
+//           let tramSegIndex = -1;
+//           const coords: any = apiStore?.context?.currentCoordinates;
+//           if (coords && centerLat !== undefined && centerLon !== undefined) {
+//             const local = coordinatesToLocal(
+//               coords.latitude - centerLat,
+//               coords.longitude - centerLon
+//             );
+//             const wx = local.x * UP_SCALE;
+//             const wy = local.y * UP_SCALE;
+//             const cosR = Math.cos(rotationAngle);
+//             const sinR = Math.sin(rotationAngle);
+//             const tx = wx * cosR - wy * sinR;
+//             const ty = wx * sinR + wy * cosR;
+
+//             let best = -1;
+//             let bestD = Infinity;
+//             for (let i = 0; i < routePath.length - 2; i += 2) {
+//               const p1x = routePath[i];
+//               const p1y = routePath[i + 1];
+//               const p2x = routePath[i + 2];
+//               const p2y = routePath[i + 3];
+//               const dx = p2x - p1x;
+//               const dy = p2y - p1y;
+//               const len2 = dx * dx + dy * dy;
+//               if (!len2) continue;
+//               const t = ((tx - p1x) * dx + (ty - p1y) * dy) / len2;
+//               const cl = Math.max(0, Math.min(1, t));
+//               const px = p1x + cl * dx;
+//               const py = p1y + cl * dy;
+//               const d = Math.hypot(tx - px, ty - py);
+//               if (d < bestD) {
+//                 bestD = d;
+//                 best = i / 2;
+//               }
+//             }
+//             tramSegIndex = best;
+//           }
+
+//           const isStartPassed = startStationData
+//             ? (() => {
+//                 const sx = terminalStations[0];
+//                 const sy = terminalStations[1];
+//                 const seg = (() => {
+//                   if (routePath.length < 4) return -1;
+//                   let best = -1;
+//                   let bestD = Infinity;
+//                   for (let i = 0; i < routePath.length - 2; i += 2) {
+//                     const p1x = routePath[i];
+//                     const p1y = routePath[i + 1];
+//                     const p2x = routePath[i + 2];
+//                     const p2y = routePath[i + 3];
+//                     const dx = p2x - p1x;
+//                     const dy = p2y - p1y;
+//                     const len2 = dx * dx + dy * dy;
+//                     if (!len2) continue;
+//                     const t = ((sx - p1x) * dx + (sy - p1y) * dy) / len2;
+//                     const cl = Math.max(0, Math.min(1, t));
+//                     const px = p1x + cl * dx;
+//                     const py = p1y + cl * dy;
+//                     const d = Math.hypot(sx - px, sy - py);
+//                     if (d < bestD) {
+//                       bestD = d;
+//                       best = i / 2;
+//                     }
+//                   }
+//                   return best;
+//                 })();
+//                 return tramSegIndex !== -1 && seg !== -1 && seg < tramSegIndex;
+//               })()
+//             : false;
+
+//           const isEndPassed = endStationData
+//             ? (() => {
+//                 const ex = terminalStations[terminalStations.length - 2];
+//                 const ey = terminalStations[terminalStations.length - 1];
+//                 const seg = (() => {
+//                   if (routePath.length < 4) return -1;
+//                   let best = -1;
+//                   let bestD = Infinity;
+//                   for (let i = 0; i < routePath.length - 2; i += 2) {
+//                     const p1x = routePath[i];
+//                     const p1y = routePath[i + 1];
+//                     const p2x = routePath[i + 2];
+//                     const p2y = routePath[i + 3];
+//                     const dx = p2x - p1x;
+//                     const dy = p2y - p1y;
+//                     const len2 = dx * dx + dy * dy;
+//                     if (!len2) continue;
+//                     const t = ((ex - p1x) * dx + (ey - p1y) * dy) / len2;
+//                     const cl = Math.max(0, Math.min(1, t));
+//                     const px = p1x + cl * dx;
+//                     const py = p1y + cl * dy;
+//                     const d = Math.hypot(ex - px, ey - py);
+//                     if (d < bestD) {
+//                       bestD = d;
+//                       best = i / 2;
+//                     }
+//                   }
+//                   return best;
+//                 })();
+//                 return tramSegIndex !== -1 && seg !== -1 && seg < tramSegIndex;
+//               })()
+//             : false;
+
+//           gl.bindBuffer(gl.ARRAY_BUFFER, pbuffer);
+//           gl.bufferData(
+//             gl.ARRAY_BUFFER,
+//             new Float32Array(terminalStations),
+//             gl.STREAM_DRAW
+//           );
+//           gl.enableVertexAttribArray(a_pos_pts);
+//           gl.vertexAttribPointer(a_pos_pts, 2, gl.FLOAT, false, 0, 0);
+
+//           gl.uniform1f(u_pointSize, 18.0 * scale);
+//           if (startStationData && endStationData) {
+//             if (isStartPassed) {
+//               gl.uniform4f(u_color_pts, 1.0, 0.4, 0.4, 1.0);
+//             } else {
+//               gl.uniform4f(u_color_pts, 0.7, 0.7, 0.7, 1.0);
+//             }
+//             gl.drawArrays(gl.POINTS, 0, 1);
+
+//             if (isEndPassed) {
+//               gl.uniform4f(u_color_pts, 1.0, 0.4, 0.4, 1.0);
+//             } else {
+//               gl.uniform4f(u_color_pts, 0.7, 0.7, 0.7, 1.0);
+//             }
+//             gl.drawArrays(gl.POINTS, 1, 1);
+//           } else {
+//             const isPassed = startStationData ? isStartPassed : isEndPassed;
+//             if (isPassed) {
+//               gl.uniform4f(u_color_pts, 1.0, 0.4, 0.4, 1.0);
+//             } else {
+//               gl.uniform4f(u_color_pts, 0.7, 0.7, 0.7, 1.0);
+//             }
+//             gl.drawArrays(gl.POINTS, 0, terminalStations.length / 2);
+//           }
+
+//           gl.uniform1f(u_pointSize, 11.0 * scale);
+//           const r_center = ((BACKGROUND_COLOR >> 16) & 0xff) / 255;
+//           const g_center = ((BACKGROUND_COLOR >> 8) & 0xff) / 255;
+//           const b_center = (BACKGROUND_COLOR & 0xff) / 255;
+//           gl.uniform4f(u_color_pts, r_center, g_center, b_center, 1.0);
+//           gl.drawArrays(gl.POINTS, 0, terminalStations.length / 2);
+//         }
+//       }
+//     }
+
+//     if (animatedYellowDotPosition) {
+//       const rx = animatedYellowDotPosition.x;
+//       const ry = animatedYellowDotPosition.y;
+
+//       gl.uniform1f(u_pointSize, 13.3333 * scale);
+//       gl.uniform4f(u_color_pts, 1.0, 1.0, 0.0, 1.0);
+//       const tmp = new Float32Array([rx, ry]);
+//       gl.bindBuffer(gl.ARRAY_BUFFER, pbuffer);
+//       gl.bufferData(gl.ARRAY_BUFFER, tmp, gl.STREAM_DRAW);
+//       gl.enableVertexAttribArray(a_pos_pts);
+//       gl.vertexAttribPointer(a_pos_pts, 2, gl.FLOAT, false, 0, 0);
+//       gl.drawArrays(gl.POINTS, 0, 1);
+//     }
+//   }, [
+//     routePath,
+//     stationPoints,
+//     sightPoints,
+//     position.x,
+//     position.y,
+//     scale,
+//     animatedYellowDotPosition?.x,
+//     animatedYellowDotPosition?.y,
+//   ]);
+
+//   useEffect(() => {
+//     const canvas = canvasRef.current;
+//     if (!canvas) return;
+//     if (!routePath || routePath.length < 4) return;
+
+//     let minX = Infinity,
+//       minY = Infinity,
+//       maxX = -Infinity,
+//       maxY = -Infinity;
+//     for (let i = 0; i < routePath.length; i += 2) {
+//       const x = routePath[i];
+//       const y = routePath[i + 1];
+//       if (x < minX) minX = x;
+//       if (y < minY) minY = y;
+//       if (x > maxX) maxX = x;
+//       if (y > maxY) maxY = y;
+//     }
+//     if (
+//       !isFinite(minX) ||
+//       !isFinite(minY) ||
+//       !isFinite(maxX) ||
+//       !isFinite(maxY)
+//     )
+//       return;
+
+//     const worldWidth = Math.max(1, maxX - minX);
+//     const worldHeight = Math.max(1, maxY - minY);
+
+//     const margin = 0.1;
+//     const targetScale = Math.min(
+//       (canvas.width * (1 - margin)) / worldWidth,
+//       (canvas.height * (1 - margin)) / worldHeight
+//     );
+
+//     const centerX = (minX + maxX) / 2;
+//     const centerY = (minY + maxY) / 2;
+
+//     const clampedScale = clampScale(targetScale);
+
+//     setScaleRef.current(clampedScale);
+//     setPositionRef.current({
+//       x: canvas.width / 2 - centerX * clampedScale,
+//       y: canvas.height / 2 - centerY * clampedScale,
+//     });
+//   }, [routePath]);
+
+//   useEffect(() => {
+//     const canvas = canvasRef.current;
+//     if (!canvas) return;
+
+//     let isDragging = false;
+//     let startMouse = { x: 0, y: 0 };
+//     let startPos = { x: 0, y: 0 };
+
+//     const activePointers = new Map<number, { x: number; y: number }>();
+//     let isPinching = false;
+//     let pinchStart: {
+//       distance: number;
+//       midpoint: { x: number; y: number };
+//       scale: number;
+//       position: { x: number; y: number };
+//     } | null = null;
+
+//     const getDistance = (
+//       p1: { x: number; y: number },
+//       p2: { x: number; y: number }
+//     ) => Math.hypot(p2.x - p1.x, p2.y - p1.y);
+
+//     const getMidpoint = (
+//       p1: { x: number; y: number },
+//       p2: { x: number; y: number }
+//     ) => ({
+//       x: (p1.x + p2.x) / 2,
+//       y: (p1.y + p2.y) / 2,
+//     });
+
+//     const onPointerDown = (e: PointerEvent) => {
+//       updateUserActivity();
+//       if (isAutoMode) {
+//         setIsAutoMode(false);
+//       }
+//       cameraAnimationStore.stopAnimation();
+
+//       canvas.setPointerCapture(e.pointerId);
+//       const rect = canvas.getBoundingClientRect();
+//       activePointers.set(e.pointerId, {
+//         x: e.clientX - rect.left,
+//         y: e.clientY - rect.top,
+//       });
+//       if (activePointers.size === 1) {
+//         isDragging = true;
+//         startMouse = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+//         startPos = { x: positionRef.current.x, y: positionRef.current.y };
+//       } else if (activePointers.size === 2) {
+//         isDragging = false;
+//         const [p1, p2] = Array.from(activePointers.values());
+//         pinchStart = {
+//           distance: getDistance(p1, p2),
+//           midpoint: getMidpoint(p1, p2),
+//           scale: scaleRef.current,
+//           position: { x: positionRef.current.x, y: positionRef.current.y },
+//         };
+//         isPinching = true;
+//       }
+//     };
+
+//     const onPointerMove = (e: PointerEvent) => {
+//       if (!activePointers.has(e.pointerId)) return;
+
+//       updateUserActivity();
+
+//       const rect = canvas.getBoundingClientRect();
+//       activePointers.set(e.pointerId, {
+//         x: e.clientX - rect.left,
+//         y: e.clientY - rect.top,
+//       });
+
+//       if (activePointers.size === 2) {
+//         isDragging = false;
+
+//         const pointersArray = Array.from(activePointers.values());
+//         if (pointersArray.length === 2) {
+//           const [p1, p2] = pointersArray;
+
+//           if (!isPinching || pinchStart === null) {
+//             isPinching = true;
+//             pinchStart = {
+//               distance: getDistance(p1, p2),
+//               midpoint: getMidpoint(p1, p2),
+//               scale: scaleRef.current,
+//               position: { x: positionRef.current.x, y: positionRef.current.y },
+//             };
+//           }
+
+//           if (pinchStart) {
+//             const currentDistance = getDistance(p1, p2);
+//             const zoomFactor = currentDistance / pinchStart.distance;
+//             const unclampedScale = pinchStart.scale * zoomFactor;
+//             const newScale = clampScale(Math.max(0.1, unclampedScale));
+
+//             const k = newScale / pinchStart.scale;
+//             const newPosition = {
+//               x: pinchStart.position.x * k + pinchStart.midpoint.x * (1 - k),
+//               y: pinchStart.position.y * k + pinchStart.midpoint.y * (1 - k),
+//             };
+//             setPositionRef.current(newPosition);
+//             setScaleRef.current(newScale);
+//           }
+//         }
+//       } else if (isDragging && activePointers.size === 1) {
+//         const p = Array.from(activePointers.values())[0];
+
+//         if (
+//           !startMouse ||
+//           !startPos ||
+//           typeof startMouse.x !== "number" ||
+//           typeof startMouse.y !== "number" ||
+//           typeof startPos.x !== "number" ||
+//           typeof startPos.y !== "number"
+//         ) {
+//           console.warn(
+//             "WebGLMap: Некорректные значения startMouse или startPos:",
+//             {
+//               startMouse,
+//               startPos,
+//               p,
+//             }
+//           );
+//           return;
+//         }
+
+//         const dx = p.x - startMouse.x;
+//         const dy = p.y - startMouse.y;
+
+//         setPositionRef.current({ x: startPos.x + dx, y: startPos.y + dy });
+//       }
+//     };
+
+//     const onPointerUp = (e: PointerEvent) => {
+//       updateUserActivity();
+
+//       canvas.releasePointerCapture(e.pointerId);
+//       activePointers.delete(e.pointerId);
+//       if (activePointers.size < 2) {
+//         isPinching = false;
+//         pinchStart = null;
+//       }
+//       if (activePointers.size === 0) {
+//         isDragging = false;
+//       } else if (activePointers.size === 1) {
+//         const p = Array.from(activePointers.values())[0];
+//         startPos = { x: positionRef.current.x, y: positionRef.current.y };
+//         startMouse = { x: p.x, y: p.y };
+//         isDragging = true;
+//       }
+//     };
+
+//     const onPointerCancel = (e: PointerEvent) => {
+//       updateUserActivity();
+//       canvas.releasePointerCapture(e.pointerId);
+//       activePointers.delete(e.pointerId);
+//       isPinching = false;
+//       pinchStart = null;
+//       if (activePointers.size === 0) {
+//         isDragging = false;
+//       }
+//     };
+
+//     const onWheel = (e: WheelEvent) => {
+//       e.preventDefault();
+
+//       updateUserActivity();
+//       if (isAutoMode) {
+//         setIsAutoMode(false);
+//       }
+//       cameraAnimationStore.stopAnimation();
+
+//       const rect = canvas.getBoundingClientRect();
+//       const mouseX =
+//         (e.clientX - rect.left) * (canvas.width / canvas.clientWidth);
+//       const mouseY =
+//         (e.clientY - rect.top) * (canvas.height / canvas.clientHeight);
+//       const delta = e.deltaY > 0 ? 0.9 : 1.1;
+//       const unclampedScale = scaleRef.current * delta;
+//       const newScale = clampScale(Math.max(0.1, unclampedScale));
+
+//       const k = newScale / scaleRef.current;
+//       const newPosition = {
+//         x: positionRef.current.x * k + mouseX * (1 - k),
+//         y: positionRef.current.y * k + mouseY * (1 - k),
+//       };
+//       setScaleRef.current(newScale);
+//       setPositionRef.current(newPosition);
+//     };
+
+//     canvas.addEventListener("pointerdown", onPointerDown);
+//     canvas.addEventListener("pointermove", onPointerMove);
+//     canvas.addEventListener("pointerup", onPointerUp);
+//     canvas.addEventListener("pointercancel", onPointerCancel);
+//     canvas.addEventListener("pointerleave", onPointerUp);
+//     canvas.addEventListener("wheel", onWheel, { passive: false });
+
+//     return () => {
+//       canvas.removeEventListener("pointerdown", onPointerDown);
+//       canvas.removeEventListener("pointermove", onPointerMove);
+//       canvas.removeEventListener("pointerup", onPointerUp);
+//       canvas.removeEventListener("pointercancel", onPointerCancel);
+//       canvas.removeEventListener("pointerleave", onPointerUp);
+//       canvas.removeEventListener("wheel", onWheel as any);
+//     };
+//   }, [
+//     updateUserActivity,
+//     setIsAutoMode,
+//     cameraAnimationStore,
+//     isAutoMode,
+//     clampScale,
+//   ]);
+
+//   return (
+//     <div
+//       className="map-layer"
+//       style={{ width: "100%", height: "100vh", position: "relative" }}
+//     >
+//       <canvas
+//         ref={canvasRef}
+//         style={{ width: "100%", height: "100%", display: "block", zIndex: 0 }}
+//       />
+//       <div
+//         style={{
+//           position: "absolute",
+//           inset: 0,
+//           pointerEvents: "none",
+//           zIndex: 9999,
+//         }}
+//       >
+//         {stationLabels.map((l, idx) => (
+//           <div
+//             key={idx}
+//             style={{
+//               position: "absolute",
+//               left: l.x,
+//               top: l.y,
+//               transform: "translate(0, -50%)",
+//               color: "#fff",
+//               fontFamily: "Roboto",
+//             }}
+//           >
+//             <div style={{ fontWeight: 700, fontSize: 16 }}>{l.name}</div>
+//             {l.sub ? (
+//               <div
+//                 style={{
+//                   color: "#CBCBCB",
+//                   fontWeight: 400,
+//                   fontSize: 13,
+//                   marginTop: 2,
+//                 }}
+//               >
+//                 {l.sub}
+//               </div>
+//             ) : null}
+//           </div>
+//         ))}
+//         {sightData?.map((s: any, i: number) => {
+//           const centerLat = routeData?.center_latitude;
+//           const centerLon = routeData?.center_longitude;
+//           if (centerLat === undefined || centerLon === undefined) return null;
+//           const cos = Math.cos(rotationAngle);
+//           const sin = Math.sin(rotationAngle);
+//           const local = coordinatesToLocal(
+//             s.latitude - centerLat,
+//             s.longitude - centerLon
+//           );
+//           const x = local.x * UP_SCALE;
+//           const y = local.y * UP_SCALE;
+//           const rx = x * cos - y * sin;
+//           const ry = x * sin + y * cos;
+//           const dpr = Math.max(
+//             1,
+//             (typeof window !== "undefined" && window.devicePixelRatio) || 1
+//           );
+//           const sx = (rx * scale + position.x) / dpr;
+//           const sy = (ry * scale + position.y) / dpr;
+//           const size = 30;
+
+//           const handleSightClick = () => {
+//             const {
+//               setSelectedSightId,
+//               setIsManualSelection,
+//               setIsRightWidgetSelectorOpen,
+//               closeGovernorModal,
+//             } = useGeolocationStore();
+//             setSelectedSightId(String(s.id));
+//             setIsManualSelection(true);
+//             setIsRightWidgetSelectorOpen(false);
+//             closeGovernorModal();
+//           };
+
+//           return (
+//             <img
+//               key={`sight-${s.id}`}
+//               src={sightIcon}
+//               alt=""
+//               width={size}
+//               height={size}
+//               style={{
+//                 position: "absolute",
+//                 left: sx - size / 2,
+//                 top: sy - size / 2,
+//                 pointerEvents: "auto",
+//                 cursor: "pointer",
+//               }}
+//               onClick={handleSightClick}
+//             />
+//           );
+//         })}
+
+//         {(() => {
+//           if (!routeData) return null;
+//           const centerLat = routeData.center_latitude;
+//           const centerLon = routeData.center_longitude;
+//           if (centerLat === undefined || centerLon === undefined) return null;
+
+//           const coords: any = apiStore?.context?.currentCoordinates;
+//           if (!coords) return null;
+
+//           const local = coordinatesToLocal(
+//             coords.latitude - centerLat,
+//             coords.longitude - centerLon
+//           );
+//           const wx = local.x * UP_SCALE;
+//           const wy = local.y * UP_SCALE;
+//           const cosR = Math.cos(rotationAngle);
+//           const sinR = Math.sin(rotationAngle);
+//           const rx = wx * cosR - wy * sinR;
+//           const ry = wx * sinR + wy * cosR;
+//           const dpr2 = Math.max(
+//             1,
+//             (typeof window !== "undefined" && window.devicePixelRatio) || 1
+//           );
+//           const screenX = (rx * scale + position.x) / dpr2;
+//           const screenY = (ry * scale + position.y) / dpr2;
+
+//           const pathPts: { x: number; y: number }[] = [];
+//           for (let i = 0; i < routePath.length; i += 2)
+//             pathPts.push({ x: routePath[i], y: routePath[i + 1] });
+//           const stationsForAngle = (stationData || []).map((st: any) => {
+//             const loc = coordinatesToLocal(
+//               st.latitude - centerLat,
+//               st.longitude - centerLon
+//             );
+//             const x = loc.x * UP_SCALE,
+//               y = loc.y * UP_SCALE;
+//             const rx2 = x * cosR - y * sinR,
+//               ry2 = x * sinR + y * cosR;
+//             return {
+//               longitude: rx2,
+//               latitude: ry2,
+//               offset_x: st.offset_x,
+//               offset_y: st.offset_y,
+//             };
+//           });
+//           let tramSegIndex = -1;
+//           if (routePath.length >= 4) {
+//             let best = -1,
+//               bestD = Infinity;
+//             for (let i = 0; i < routePath.length - 2; i += 2) {
+//               const p1x = routePath[i],
+//                 p1y = routePath[i + 1];
+//               const p2x = routePath[i + 2],
+//                 p2y = routePath[i + 3];
+//               const dx = p2x - p1x,
+//                 dy = p2y - p1y;
+//               const len2 = dx * dx + dy * dy;
+//               if (!len2) continue;
+//               const t = ((rx - p1x) * dx + (ry - p1y) * dy) / len2;
+//               const cl = Math.max(0, Math.min(1, t));
+//               const px = p1x + cl * dx,
+//                 py = p1y + cl * dy;
+//               const d = Math.hypot(rx - px, ry - py);
+//               if (d < bestD) {
+//                 bestD = d;
+//                 best = i / 2;
+//               }
+//             }
+//             tramSegIndex = best;
+//           }
+//           const optimalAngle = (() => {
+//             const testRadiusInMap = 100 / scale;
+//             const minPath = 60,
+//               minPassed = 60,
+//               minStation = 50;
+//             let bestAng = 0,
+//               bestScore = Infinity;
+//             for (let i = 0; i < 12; i++) {
+//               const ang = (i * Math.PI * 2) / 12;
+//               const tx = rx + Math.cos(ang) * testRadiusInMap;
+//               const ty = ry + Math.sin(ang) * testRadiusInMap;
+//               const distPath = (function () {
+//                 if (pathPts.length < 2) return Infinity;
+//                 let md = Infinity;
+//                 for (let k = 0; k < pathPts.length - 1; k++) {
+//                   const p1 = pathPts[k],
+//                     p2 = pathPts[k + 1];
+//                   const L2 = (p2.x - p1.x) ** 2 + (p2.y - p1.y) ** 2;
+//                   if (!L2) continue;
+//                   const tt =
+//                     ((tx - p1.x) * (p2.x - p1.x) +
+//                       (ty - p1.y) * (p2.y - p1.y)) /
+//                     L2;
+//                   const cl = Math.max(0, Math.min(1, tt));
+//                   const px = p1.x + cl * (p2.x - p1.x),
+//                     py = p1.y + cl * (p2.y - p1.y);
+//                   const d = Math.hypot(tx - px, ty - py);
+//                   if (d < md) md = d;
+//                 }
+//                 return md * scale;
+//               })();
+//               const distPassed = (function () {
+//                 if (pathPts.length < 2 || tramSegIndex < 0) return Infinity;
+//                 let md = Infinity;
+//                 for (
+//                   let k = 0;
+//                   k <= Math.min(tramSegIndex, pathPts.length - 2);
+//                   k++
+//                 ) {
+//                   const p1 = pathPts[k],
+//                     p2 = pathPts[k + 1];
+//                   const L2 = (p2.x - p1.x) ** 2 + (p2.y - p1.y) ** 2;
+//                   if (!L2) continue;
+//                   const tt =
+//                     ((tx - p1.x) * (p2.x - p1.x) +
+//                       (ty - p1.y) * (p2.y - p1.y)) /
+//                     L2;
+//                   const cl = Math.max(0, Math.min(1, tt));
+//                   const px = p1.x + cl * (p2.x - p1.x),
+//                     py = p1.y + cl * (p2.y - p1.y);
+//                   const d = Math.hypot(tx - px, ty - py);
+//                   if (d < md) md = d;
+//                 }
+//                 return md * scale;
+//               })();
+//               const distStation = (function () {
+//                 if (!stationsForAngle.length) return Infinity;
+//                 const DEFAULT_LABEL_OFFSET_X = 25,
+//                   DEFAULT_LABEL_OFFSET_Y = 0;
+//                 let md = Infinity;
+//                 for (const st of stationsForAngle) {
+//                   const offsetX =
+//                     st.offset_x === 0 && st.offset_y === 0
+//                       ? DEFAULT_LABEL_OFFSET_X
+//                       : st.offset_x || 0 * 3;
+//                   const offsetY =
+//                     st.offset_x === 0 && st.offset_y === 0
+//                       ? DEFAULT_LABEL_OFFSET_Y
+//                       : st.offset_y || 0 * 3;
+//                   const lx = st.longitude + offsetX,
+//                     ly = st.latitude + offsetY;
+//                   const d = Math.hypot(tx - lx, ty - ly);
+//                   if (d < md) md = d;
+//                 }
+//                 return md * scale;
+//               })();
+//               let weight = 0;
+//               if (distPath < minPath) weight += 100 * (1 - distPath / minPath);
+//               if (distPassed < minPassed)
+//                 weight += 10 * (1 - distPassed / minPassed);
+//               if (distStation < minStation)
+//                 weight += 1000 * (1 - distStation / minStation);
+//               if (weight < bestScore) {
+//                 bestScore = weight;
+//                 bestAng = ang;
+//               }
+//             }
+//             return bestAng;
+//           })();
+
+//           return (
+//             <TramIconWebGL
+//               x={screenX}
+//               y={screenY}
+//               optimalAngle={optimalAngle}
+//               scale={scale}
+//             />
+//           );
+//         })()}
+//       </div>
+//     </div>
+//   );
+// });
+
+// export default WebGLMap;
diff --git a/src/shared/store/SightsStore/index.tsx b/src/shared/store/SightsStore/index.tsx
index d4dc4f0..4198c1f 100644
--- a/src/shared/store/SightsStore/index.tsx
+++ b/src/shared/store/SightsStore/index.tsx
@@ -132,12 +132,16 @@ class SightsStore {
     common: boolean
   ) => {
     if (common) {
+      // @ts-ignore
       this.sight!.common = {
+        // @ts-ignore
         ...this.sight!.common,
         ...content,
       };
     } else {
+      // @ts-ignore
       this.sight![language] = {
+        // @ts-ignore
         ...this.sight![language],
         ...content,
       };
diff --git a/tsconfig.tsbuildinfo b/tsconfig.tsbuildinfo
index 38a9018..35d554f 100644
--- a/tsconfig.tsbuildinfo
+++ b/tsconfig.tsbuildinfo
@@ -1 +1 @@
-{"root":["./src/main.tsx","./src/vite-env.d.ts","./src/app/globalerrorboundary.tsx","./src/app/index.tsx","./src/app/router/index.tsx","./src/entities/index.ts","./src/entities/navigation/index.ts","./src/entities/navigation/model/index.ts","./src/entities/navigation/ui/index.tsx","./src/features/index.ts","./src/features/navigation/index.ts","./src/features/navigation/ui/index.tsx","./src/pages/index.ts","./src/pages/article/index.ts","./src/pages/article/articlecreatepage/index.tsx","./src/pages/article/articleeditpage/index.tsx","./src/pages/article/articlelistpage/index.tsx","./src/pages/article/articlepreviewpage/previewleftwidget.tsx","./src/pages/article/articlepreviewpage/previewrightwidget.tsx","./src/pages/article/articlepreviewpage/index.tsx","./src/pages/carrier/index.ts","./src/pages/carrier/carriercreatepage/index.tsx","./src/pages/carrier/carriereditpage/index.tsx","./src/pages/carrier/carrierlistpage/index.tsx","./src/pages/city/index.ts","./src/pages/city/citycreatepage/index.tsx","./src/pages/city/cityeditpage/index.tsx","./src/pages/city/citylistpage/index.tsx","./src/pages/city/citypreviewpage/index.tsx","./src/pages/country/index.ts","./src/pages/country/countryaddpage/index.tsx","./src/pages/country/countrycreatepage/index.tsx","./src/pages/country/countryeditpage/index.tsx","./src/pages/country/countrylistpage/index.tsx","./src/pages/country/countrypreviewpage/index.tsx","./src/pages/createsightpage/index.tsx","./src/pages/devicespage/index.tsx","./src/pages/editsightpage/index.tsx","./src/pages/loginpage/index.tsx","./src/pages/mainpage/index.tsx","./src/pages/mappage/index.tsx","./src/pages/mappage/mapstore.ts","./src/pages/media/index.ts","./src/pages/media/mediacreatepage/index.tsx","./src/pages/media/mediaeditpage/index.tsx","./src/pages/media/medialistpage/index.tsx","./src/pages/media/mediapreviewpage/index.tsx","./src/pages/route/linekedstations.tsx","./src/pages/route/index.ts","./src/pages/route/routecreatepage/index.tsx","./src/pages/route/routeeditpage/index.tsx","./src/pages/route/routelistpage/index.tsx","./src/pages/route/route-preview/constants.ts","./src/pages/route/route-preview/infinitecanvas.tsx","./src/pages/route/route-preview/leftsidebar.tsx","./src/pages/route/route-preview/mapdatacontext.tsx","./src/pages/route/route-preview/rightsidebar.tsx","./src/pages/route/route-preview/sight.tsx","./src/pages/route/route-preview/sightinfowidget.tsx","./src/pages/route/route-preview/station.tsx","./src/pages/route/route-preview/transformcontext.tsx","./src/pages/route/route-preview/travelpath.tsx","./src/pages/route/route-preview/widgets.tsx","./src/pages/route/route-preview/index.tsx","./src/pages/route/route-preview/types.ts","./src/pages/route/route-preview/utils.ts","./src/pages/sight/linkedstations.tsx","./src/pages/sight/index.ts","./src/pages/sight/sightlistpage/index.tsx","./src/pages/sightpage/index.tsx","./src/pages/snapshot/index.ts","./src/pages/snapshot/snapshotcreatepage/index.tsx","./src/pages/snapshot/snapshotlistpage/index.tsx","./src/pages/station/linkedsights.tsx","./src/pages/station/index.ts","./src/pages/station/stationcreatepage/index.tsx","./src/pages/station/stationeditpage/index.tsx","./src/pages/station/stationlistpage/index.tsx","./src/pages/station/stationpreviewpage/index.tsx","./src/pages/user/index.ts","./src/pages/user/usercreatepage/index.tsx","./src/pages/user/usereditpage/index.tsx","./src/pages/user/userlistpage/index.tsx","./src/pages/vehicle/index.ts","./src/pages/vehicle/vehiclecreatepage/index.tsx","./src/pages/vehicle/vehicleeditpage/index.tsx","./src/pages/vehicle/vehiclelistpage/index.tsx","./src/pages/vehicle/vehiclepreviewpage/index.tsx","./src/shared/index.tsx","./src/shared/api/index.tsx","./src/shared/config/constants.tsx","./src/shared/config/index.ts","./src/shared/const/index.ts","./src/shared/const/mediatypes.ts","./src/shared/hooks/index.ts","./src/shared/hooks/useselectedcity.ts","./src/shared/lib/gltfcachemanager.ts","./src/shared/lib/index.ts","./src/shared/lib/decodejwt/index.ts","./src/shared/lib/mui/theme.ts","./src/shared/modals/index.ts","./src/shared/modals/articleselectorcreatedialog/index.tsx","./src/shared/modals/previewmediadialog/index.tsx","./src/shared/modals/selectarticledialog/index.tsx","./src/shared/modals/selectmediadialog/index.tsx","./src/shared/modals/uploadmediadialog/index.tsx","./src/shared/store/index.ts","./src/shared/store/articlesstore/index.tsx","./src/shared/store/authstore/index.tsx","./src/shared/store/carrierstore/index.tsx","./src/shared/store/citystore/index.ts","./src/shared/store/countrystore/index.ts","./src/shared/store/createsightstore/index.tsx","./src/shared/store/devicesstore/index.tsx","./src/shared/store/editsightstore/index.tsx","./src/shared/store/languagestore/index.tsx","./src/shared/store/mediastore/index.tsx","./src/shared/store/menustore/index.ts","./src/shared/store/modelloadingstore/index.ts","./src/shared/store/routestore/index.ts","./src/shared/store/selectedcitystore/index.ts","./src/shared/store/sightsstore/index.tsx","./src/shared/store/snapshotstore/index.ts","./src/shared/store/stationsstore/index.ts","./src/shared/store/userstore/index.ts","./src/shared/store/vehiclestore/index.ts","./src/shared/ui/index.ts","./src/shared/ui/backbutton/index.tsx","./src/shared/ui/coordinatesinput/index.tsx","./src/shared/ui/input/index.tsx","./src/shared/ui/loadingspinner/index.tsx","./src/shared/ui/modal/index.tsx","./src/shared/ui/modelloadingindicator/index.tsx","./src/shared/ui/tabpanel/index.tsx","./src/widgets/index.ts","./src/widgets/cityselector/index.tsx","./src/widgets/createbutton/index.tsx","./src/widgets/deletemodal/index.tsx","./src/widgets/devicestable/index.tsx","./src/widgets/imageuploadcard/index.tsx","./src/widgets/languageswitcher/index.tsx","./src/widgets/layout/index.tsx","./src/widgets/layout/ui/appbar.tsx","./src/widgets/layout/ui/drawer.tsx","./src/widgets/layout/ui/drawerheader.tsx","./src/widgets/leaveagree/index.tsx","./src/widgets/mediaarea/index.tsx","./src/widgets/mediaareaforsight/index.tsx","./src/widgets/mediaviewer/threeview.tsx","./src/widgets/mediaviewer/threeviewerrorboundary.tsx","./src/widgets/mediaviewer/index.tsx","./src/widgets/modelviewer3d/index.tsx","./src/widgets/reactmarkdown/index.tsx","./src/widgets/reactmarkdowneditor/index.tsx","./src/widgets/savewithoutcityagree/index.tsx","./src/widgets/sightedit/index.tsx","./src/widgets/sightheader/index.ts","./src/widgets/sightheader/ui/index.tsx","./src/widgets/sighttabs/index.ts","./src/widgets/sighttabs/createinformationtab/mediauploadbox.tsx","./src/widgets/sighttabs/createinformationtab/index.tsx","./src/widgets/sighttabs/createlefttab/index.tsx","./src/widgets/sighttabs/createrighttab/index.tsx","./src/widgets/sighttabs/informationtab/index.tsx","./src/widgets/sighttabs/leftwidgettab/index.tsx","./src/widgets/sighttabs/rightwidgettab/index.tsx","./src/widgets/sightstable/index.tsx","./src/widgets/snapshotrestore/index.tsx","./src/widgets/videopreviewcard/index.tsx","./src/widgets/modals/editstationmodal.tsx","./src/widgets/modals/index.ts","./src/widgets/modals/selectarticledialog/index.tsx"],"errors":true,"version":"5.8.3"}
\ No newline at end of file
+{"root":["./src/main.tsx","./src/vite-env.d.ts","./src/app/globalerrorboundary.tsx","./src/app/index.tsx","./src/app/router/index.tsx","./src/entities/index.ts","./src/entities/navigation/index.ts","./src/entities/navigation/model/index.ts","./src/entities/navigation/ui/index.tsx","./src/features/index.ts","./src/features/navigation/index.ts","./src/features/navigation/ui/index.tsx","./src/pages/index.ts","./src/pages/article/index.ts","./src/pages/article/articlecreatepage/index.tsx","./src/pages/article/articleeditpage/index.tsx","./src/pages/article/articlelistpage/index.tsx","./src/pages/article/articlepreviewpage/previewleftwidget.tsx","./src/pages/article/articlepreviewpage/previewrightwidget.tsx","./src/pages/article/articlepreviewpage/index.tsx","./src/pages/carrier/index.ts","./src/pages/carrier/carriercreatepage/index.tsx","./src/pages/carrier/carriereditpage/index.tsx","./src/pages/carrier/carrierlistpage/index.tsx","./src/pages/city/index.ts","./src/pages/city/citycreatepage/index.tsx","./src/pages/city/cityeditpage/index.tsx","./src/pages/city/citylistpage/index.tsx","./src/pages/city/citypreviewpage/index.tsx","./src/pages/country/index.ts","./src/pages/country/countryaddpage/index.tsx","./src/pages/country/countrycreatepage/index.tsx","./src/pages/country/countryeditpage/index.tsx","./src/pages/country/countrylistpage/index.tsx","./src/pages/country/countrypreviewpage/index.tsx","./src/pages/createsightpage/index.tsx","./src/pages/devicespage/index.tsx","./src/pages/editsightpage/index.tsx","./src/pages/loginpage/index.tsx","./src/pages/mainpage/index.tsx","./src/pages/mappage/index.tsx","./src/pages/mappage/mapstore.ts","./src/pages/media/index.ts","./src/pages/media/mediacreatepage/index.tsx","./src/pages/media/mediaeditpage/index.tsx","./src/pages/media/medialistpage/index.tsx","./src/pages/media/mediapreviewpage/index.tsx","./src/pages/route/linekedstations.tsx","./src/pages/route/index.ts","./src/pages/route/routecreatepage/index.tsx","./src/pages/route/routeeditpage/index.tsx","./src/pages/route/routelistpage/index.tsx","./src/pages/route/route-preview/constants.ts","./src/pages/route/route-preview/infinitecanvas.tsx","./src/pages/route/route-preview/leftsidebar.tsx","./src/pages/route/route-preview/mapdatacontext.tsx","./src/pages/route/route-preview/rightsidebar.tsx","./src/pages/route/route-preview/sight.tsx","./src/pages/route/route-preview/sightinfowidget.tsx","./src/pages/route/route-preview/station.tsx","./src/pages/route/route-preview/transformcontext.tsx","./src/pages/route/route-preview/travelpath.tsx","./src/pages/route/route-preview/widgets.tsx","./src/pages/route/route-preview/index.tsx","./src/pages/route/route-preview/types.ts","./src/pages/route/route-preview/utils.ts","./src/pages/route/route-preview/web-gl/web-gl-version.tsx","./src/pages/sight/linkedstations.tsx","./src/pages/sight/index.ts","./src/pages/sight/sightlistpage/index.tsx","./src/pages/sightpage/index.tsx","./src/pages/snapshot/index.ts","./src/pages/snapshot/snapshotcreatepage/index.tsx","./src/pages/snapshot/snapshotlistpage/index.tsx","./src/pages/station/linkedsights.tsx","./src/pages/station/index.ts","./src/pages/station/stationcreatepage/index.tsx","./src/pages/station/stationeditpage/index.tsx","./src/pages/station/stationlistpage/index.tsx","./src/pages/station/stationpreviewpage/index.tsx","./src/pages/user/index.ts","./src/pages/user/usercreatepage/index.tsx","./src/pages/user/usereditpage/index.tsx","./src/pages/user/userlistpage/index.tsx","./src/pages/vehicle/index.ts","./src/pages/vehicle/vehiclecreatepage/index.tsx","./src/pages/vehicle/vehicleeditpage/index.tsx","./src/pages/vehicle/vehiclelistpage/index.tsx","./src/pages/vehicle/vehiclepreviewpage/index.tsx","./src/shared/index.tsx","./src/shared/api/index.tsx","./src/shared/config/constants.tsx","./src/shared/config/index.ts","./src/shared/const/index.ts","./src/shared/const/mediatypes.ts","./src/shared/hooks/index.ts","./src/shared/hooks/useselectedcity.ts","./src/shared/lib/gltfcachemanager.ts","./src/shared/lib/index.ts","./src/shared/lib/decodejwt/index.ts","./src/shared/lib/mui/theme.ts","./src/shared/modals/index.ts","./src/shared/modals/articleselectorcreatedialog/index.tsx","./src/shared/modals/previewmediadialog/index.tsx","./src/shared/modals/selectarticledialog/index.tsx","./src/shared/modals/selectmediadialog/index.tsx","./src/shared/modals/uploadmediadialog/index.tsx","./src/shared/store/index.ts","./src/shared/store/articlesstore/index.tsx","./src/shared/store/authstore/index.tsx","./src/shared/store/carrierstore/index.tsx","./src/shared/store/citystore/index.ts","./src/shared/store/countrystore/index.ts","./src/shared/store/createsightstore/index.tsx","./src/shared/store/devicesstore/index.tsx","./src/shared/store/editsightstore/index.tsx","./src/shared/store/languagestore/index.tsx","./src/shared/store/mediastore/index.tsx","./src/shared/store/menustore/index.ts","./src/shared/store/modelloadingstore/index.ts","./src/shared/store/routestore/index.ts","./src/shared/store/selectedcitystore/index.ts","./src/shared/store/sightsstore/index.tsx","./src/shared/store/snapshotstore/index.ts","./src/shared/store/stationsstore/index.ts","./src/shared/store/userstore/index.ts","./src/shared/store/vehiclestore/index.ts","./src/shared/ui/index.ts","./src/shared/ui/backbutton/index.tsx","./src/shared/ui/coordinatesinput/index.tsx","./src/shared/ui/input/index.tsx","./src/shared/ui/loadingspinner/index.tsx","./src/shared/ui/modal/index.tsx","./src/shared/ui/modelloadingindicator/index.tsx","./src/shared/ui/tabpanel/index.tsx","./src/widgets/index.ts","./src/widgets/cityselector/index.tsx","./src/widgets/createbutton/index.tsx","./src/widgets/deletemodal/index.tsx","./src/widgets/devicestable/index.tsx","./src/widgets/imageuploadcard/index.tsx","./src/widgets/languageswitcher/index.tsx","./src/widgets/layout/index.tsx","./src/widgets/layout/ui/appbar.tsx","./src/widgets/layout/ui/drawer.tsx","./src/widgets/layout/ui/drawerheader.tsx","./src/widgets/leaveagree/index.tsx","./src/widgets/mediaarea/index.tsx","./src/widgets/mediaareaforsight/index.tsx","./src/widgets/mediaviewer/threeview.tsx","./src/widgets/mediaviewer/threeviewerrorboundary.tsx","./src/widgets/mediaviewer/index.tsx","./src/widgets/modelviewer3d/index.tsx","./src/widgets/reactmarkdown/index.tsx","./src/widgets/reactmarkdowneditor/index.tsx","./src/widgets/savewithoutcityagree/index.tsx","./src/widgets/sightedit/index.tsx","./src/widgets/sightheader/index.ts","./src/widgets/sightheader/ui/index.tsx","./src/widgets/sighttabs/index.ts","./src/widgets/sighttabs/createinformationtab/mediauploadbox.tsx","./src/widgets/sighttabs/createinformationtab/index.tsx","./src/widgets/sighttabs/createlefttab/index.tsx","./src/widgets/sighttabs/createrighttab/index.tsx","./src/widgets/sighttabs/informationtab/index.tsx","./src/widgets/sighttabs/leftwidgettab/index.tsx","./src/widgets/sighttabs/rightwidgettab/index.tsx","./src/widgets/sightstable/index.tsx","./src/widgets/snapshotrestore/index.tsx","./src/widgets/videopreviewcard/index.tsx","./src/widgets/modals/editstationmodal.tsx","./src/widgets/modals/index.ts","./src/widgets/modals/selectarticledialog/index.tsx"],"version":"5.8.3"}
\ No newline at end of file