feat: add default size for icon and en trasnlate for secondary name when ru language is selected

.env

@@ -1,8 +1,8 @@
-VITE_API_URL='https://wn.st.unprism.ru'
+# # VITE_API_URL='https://wn.st.unprism.ru'
-VITE_REACT_APP ='https://wn.st.unprism.ru/'
+# # VITE_REACT_APP ='https://wn.st.unprism.ru/'
-VITE_KRBL_MEDIA='https://wn.st.unprism.ru/media/'
+# # VITE_KRBL_MEDIA='https://wn.st.unprism.ru/media/'
-VITE_NEED_AUTH='true'
-# VITE_API_URL='https://wn.krbl.ru'
-# VITE_REACT_APP ='https://wn.krbl.ru/'
-# VITE_KRBL_MEDIA='https://wn.krbl.ru/media/'
 # VITE_NEED_AUTH='true'
+VITE_API_URL='https://wn.krbl.ru'
+VITE_REACT_APP ='https://wn.krbl.ru/'
+VITE_KRBL_MEDIA='https://wn.krbl.ru/media/'
+VITE_NEED_AUTH='true'

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

@@ -44,6 +44,7 @@ const MapDataContext = createContext<{
   ) => void;
   setSightIconSize: (sightId: number, size: number) => void;
   setFontSize: (size: number) => void;
+  setRouteIconSize: (size: number) => void;
   saveChanges: () => void;
 }>({
   originalRouteData: undefined,
@@ -67,6 +68,7 @@ const MapDataContext = createContext<{
   setSightCoordinates: () => {},
   setSightIconSize: () => {},
   setFontSize: () => {},
+  setRouteIconSize: () => {},
   saveChanges: () => {},
 });
 
@@ -180,6 +182,16 @@ export const MapDataProvider = observer(
       });
     }
 
+    function setRouteIconSize(size: number) {
+      const clamped = Math.max(1, Math.min(300, size));
+      setRouteChanges((prev) => {
+        if (prev.icon_size === clamped) {
+          return prev;
+        }
+        return { ...prev, icon_size: clamped };
+      });
+    }
+
     function setMapCenter(latitude: number, longitude: number) {
       const epsilon = 1e-6;
 
@@ -579,6 +591,7 @@ export const MapDataProvider = observer(
         setSightCoordinates,
         setSightIconSize,
         setFontSize,
+        setRouteIconSize,
       }),
       [
         originalRouteData,
@@ -594,6 +607,7 @@ export const MapDataProvider = observer(
         setStationIconSize,
         setSightIconSize,
         setFontSize,
+        setRouteIconSize,
       ]
     );
 

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

@@ -22,6 +22,7 @@ export function RightSidebar() {
     setMapRotation,
     setMapCenter,
     setFontSize: updateFontSize,
+    setRouteIconSize: updateRouteIconSize,
   } = useMapData();
   const { rotation, rotateToAngle, scale, setScaleAtCenter } = useTransform();
 
@@ -34,6 +35,7 @@ export function RightSidebar() {
   const [rotationDegrees, setRotationDegrees] = useState<number>(0);
   const [isUserEditing, setIsUserEditing] = useState<boolean>(false);
   const [fontSize, setFontSize] = useState<number>(100);
+  const [defaultIconSize, setDefaultIconSize] = useState<number>(100);
   const [isSaving, setIsSaving] = useState<boolean>(false);
 
   useEffect(() => {
@@ -52,6 +54,7 @@ export function RightSidebar() {
         y: originalRouteData.center_longitude ?? 0,
       });
       setFontSize(originalRouteData.font_size ?? 100);
+      setDefaultIconSize(originalRouteData.icon_size ?? 100);
     }
   }, [originalRouteData]);
 
@@ -63,7 +66,7 @@ export function RightSidebar() {
 
   useEffect(() => {
     setRotationDegrees(
-      ((Math.round((rotation * 180) / Math.PI) % 360) + 360) % 360
+      ((Math.round((rotation * 180) / Math.PI) % 360) + 360) % 360,
     );
   }, [rotation]);
 
@@ -108,6 +111,20 @@ export function RightSidebar() {
     setFontSize((prev) => (Math.abs(prev - next) > 0.5 ? next : prev));
   }, [routeData?.font_size, originalRouteData?.font_size]);
 
+  const handleDefaultIconSizeChange = (value: number) => {
+    if (!Number.isFinite(value)) {
+      return;
+    }
+    const clamped = Math.max(1, Math.min(300, Math.round(value)));
+    setDefaultIconSize(clamped);
+    updateRouteIconSize(clamped);
+  };
+
+  useEffect(() => {
+    const next = routeData?.icon_size ?? originalRouteData?.icon_size ?? 100;
+    setDefaultIconSize((prev) => (Math.abs(prev - next) > 0.5 ? next : prev));
+  }, [routeData?.icon_size, originalRouteData?.icon_size]);
+
   if (!routeData) {
     return null;
   }
@@ -317,6 +334,33 @@ export function RightSidebar() {
         }}
       />
 
+      <TextField
+        type="number"
+        label="Размер иконок по умолчанию (%)"
+        variant="filled"
+        value={defaultIconSize}
+        onChange={(e) => {
+          const value = Number(e.target.value);
+          if (!isNaN(value)) {
+            handleDefaultIconSizeChange(value);
+          }
+        }}
+        style={{ backgroundColor: "#222", borderRadius: 4 }}
+        sx={{
+          "& .MuiInputLabel-root": {
+            color: "#fff",
+          },
+          "& .MuiInputBase-input": {
+            color: "#fff",
+          },
+        }}
+        inputProps={{
+          min: 1,
+          max: 300,
+          step: 1,
+        }}
+      />
+
       <TextField
         type="number"
         label="Поворот (в градусах)"

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

@@ -2288,6 +2288,7 @@ export const WebGLRouteMapPrototype = observer(() => {
               return null;
             }
             const translatedStation = stationData?.[language]?.[index];
+            const enStation = stationData?.["en"]?.[index];
 
             const local = coordinatesToLocal(
               station.latitude,
@@ -2341,11 +2342,12 @@ export const WebGLRouteMapPrototype = observer(() => {
             const rotationCss = `${rotationAngle}rad`;
             const counterRotationCss = `${-rotationAngle}rad`;
 
+            const secondaryStation =
+              language === "ru" ? enStation : translatedStation;
             const showSecondary =
-              language !== "ru" &&
+              secondaryStation &&
-              translatedStation &&
+              secondaryStation.name &&
-              translatedStation.name &&
+              secondaryStation.name !== station.name;
-              translatedStation.name !== station.name;
 
             const fontSizePercent =
               routeData?.font_size ?? originalRouteData?.font_size ?? 100;
@@ -2567,7 +2569,7 @@ export const WebGLRouteMapPrototype = observer(() => {
                               pointerEvents: "none",
                             }}
                           >
-                            {translatedStation?.name}
+                            {secondaryStation?.name}
                           </div>
                         ) : null}
                       </div>
@@ -2701,21 +2703,21 @@ export const WebGLRouteMapPrototype = observer(() => {
               ? camera.scale /
                 Math.max(customSightIconBaseScaleRef.current ?? 1, 1e-6)
               : 1;
-            const sightIconSizePercent =
+            const sightIconSizePercent = sight.is_default_icon === false
-              liveSightIconSizes.get(sight.id) ??
+              ? (liveSightIconSizes.get(sight.id) ??
-              (typeof sight.icon_size === "number" &&
+                (typeof sight.icon_size === "number" &&
-              Number.isFinite(sight.icon_size)
+                Number.isFinite(sight.icon_size)
-                ? sight.icon_size
+                  ? sight.icon_size
-                : (routeData?.icon_size ??
+                  : 100))
-                  originalRouteData?.icon_size ??
+              : (routeData?.icon_size ?? originalRouteData?.icon_size ?? 100);
-                  100));
             const iconSize =
               30 *
               clamp(sightIconSizePercent / 100, 0.1, 10) *
               customSightIconScaleFactor;
             const showSightResizeUi =
-              hoveredSightIconId === sight.id ||
+              sight.is_default_icon !== true &&
-              resizingSightIconId === sight.id;
+              (hoveredSightIconId === sight.id ||
+                resizingSightIconId === sight.id);
             const iconLeft = cssX - iconSize;
             const iconTop = cssY - iconSize;
             const labelHeight = 24;