feat: demo page realisation

src/pages/Route/DemoPage/index.tsx

@@ -0,0 +1,26 @@
+import React, { useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { apiStore } from "../../../client/src/api/ApiStore/store";
+import App from "../../../client/src/App";
+import "../../../client/src/index.css";
+import "../../../client/src/App.css";
+
+export const DemoPage = () => {
+  const { id } = useParams<{ id: string }>();
+
+  // Устанавливаем routeId синхронно при рендере,
+  // чтобы App уже имел его при монтировании
+  if (id && apiStore.routeId !== id) {
+    apiStore.setRouteId(id);
+  }
+
+  useEffect(() => {
+    return () => {
+      apiStore.stopPositionSimulation();
+    };
+  }, []);
+
+  if (!id) return null;
+
+  return <App />;
+};

src/pages/Route/RouteListPage/index.tsx

@@ -3,7 +3,7 @@ import { ruRU } from "@mui/x-data-grid/locales";
 import { authStore, carrierStore, languageStore, routeStore, selectedCityStore, SearchInput } from "@shared";
 import { useEffect, useState, useMemo } from "react";
 import { observer } from "mobx-react-lite";
-import { Map, Pencil, Trash2, Minus } from "lucide-react";
+import { Map, Pencil, Trash2, Minus, Monitor } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { CreateButton, DeleteModal, LanguageSwitcher } from "@widgets";
 import { Box, CircularProgress } from "@mui/material";
@@ -148,6 +148,11 @@ export const RouteListPage = observer(() => {
                 <Map size={20} className="text-purple-500" />
               </button>
             )}
+            {canShowRoutePreview && (
+              <button onClick={() => window.open(`/demo/${params.row.id}`, "_blank")}>
+                <Monitor size={20} className="text-green-500" />
+              </button>
+            )}
             {canWriteRoutes && (
               <button
                 onClick={() => {

src/pages/Route/index.ts

@@ -2,3 +2,4 @@ export * from "./RouteListPage";
 export * from "./RouteCreatePage";
 export { RoutePreview } from "./route-preview";
 export * from "./RouteEditPage";
+export * from "./DemoPage";

src/pages/Route/route-preview/Sight.tsx

@@ -89,9 +89,11 @@ export const Sight = ({ sight, id }: Readonly<SightProps>) => {
     return null;
   }
 
-  // Компенсируем масштаб для сохранения постоянного размера
+  // Компенсируем масштаб, но при зуме текст немного увеличивается
+  const clampedScale = Math.min(Math.max(scale, 1), 3);
+  const textScaleFactor = 1 + (clampedScale - 1) * 0.4;
   const compensatedSize = SIGHT_SIZE / scale;
-  const compensatedFontSize = 24 / scale;
+  const compensatedFontSize = (24 / scale) * textScaleFactor;
 
   return (
     <pixiContainer

src/pages/Route/route-preview/Station.tsx

@@ -326,8 +326,10 @@ const StationLabel = observer(
     if (!station) return null;
 
     const coordinates = coordinatesToLocal(station.latitude, station.longitude);
-    const compensatedRuFontSize = (26 * 0.75) / scale;
-    const compensatedNameFontSize = (16 * 0.75) / scale;
+    const clampedScale = Math.min(Math.max(scale, 1), 3);
+    const textScaleFactor = 1 + (clampedScale - 1) * 0.4;
+    const compensatedRuFontSize = ((26 * 0.75) / scale) * textScaleFactor;
+    const compensatedNameFontSize = ((16 * 0.75) / scale) * textScaleFactor;
 
     useEffect(() => {
       if (ruLabelRef.current && ruLabel) {

src/pages/Route/route-preview/webgl-prototype/WebGLRouteMapPrototype.tsx

@@ -2353,10 +2353,13 @@ export const WebGLRouteMapPrototype = observer(() => {
               routeData?.font_size ?? originalRouteData?.font_size ?? 100;
             const fontScale = fontSizePercent / 100;
 
-            const primaryFontSize = 16 * fontScale;
-            const secondaryFontSize = 13 * fontScale;
+            const zoomClampedScale = Math.min(Math.max(camera.scale, 1), 3);
+            const scaleFactor = 1 + (zoomClampedScale - 1) * 0.4;
 
-            const secondaryMarginTop = 5 * fontScale;
+            const primaryFontSize = 16 * fontScale * scaleFactor;
+            const secondaryFontSize = 13 * fontScale * scaleFactor;
+
+            const secondaryMarginTop = 5 * fontScale * scaleFactor;
 
             const alignmentFromData: StationAlignment =
               backendAlign === 1
@@ -2720,9 +2723,11 @@ export const WebGLRouteMapPrototype = observer(() => {
                 resizingSightIconId === sight.id);
             const iconLeft = cssX - iconSize;
             const iconTop = cssY - iconSize;
-            const labelHeight = 24;
-            const labelPadding = 6;
-            const labelFontSize = 14;
+            const sightZoomClampedScale = Math.min(Math.max(camera.scale, 1), 3);
+            const sightScaleFactor = 1 + (sightZoomClampedScale - 1) * 0.4;
+            const labelHeight = 24 * sightScaleFactor;
+            const labelPadding = 6 * sightScaleFactor;
+            const labelFontSize = 14 * sightScaleFactor;
 
             return (
               <div