feat: Update

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

@@ -2,7 +2,6 @@ import { Button, Stack, TextField, Typography, Slider } from "@mui/material";
 import { useMapData } from "./MapDataContext";
 import { useEffect, useState } from "react";
 import { useTransform } from "./TransformContext";
-import { coordinatesToLocal, localToCoordinates } from "./utils";
 import { SCALE_FACTOR } from "./Constants";
 import { toast } from "react-toastify";
 
@@ -13,18 +12,10 @@ export function RightSidebar() {
     saveChanges,
     originalRouteData,
     setMapRotation,
-    setMapCenter,
+    setIconSize: updateIconSize,
+    setFontSize: updateFontSize,
   } = useMapData();
-  const {
-    rotation,
-    position,
-    screenToLocal,
-    screenCenter,
-    rotateToAngle,
-    setTransform,
-    scale,
-    setScaleAtCenter,
-  } = useTransform();
+  const { rotation, rotateToAngle, scale, setScaleAtCenter } = useTransform();
 
   const [minScale, setMinScale] = useState<number>(1);
   const [maxScale, setMaxScale] = useState<number>(5);
@@ -34,6 +25,8 @@ export function RightSidebar() {
   });
   const [rotationDegrees, setRotationDegrees] = useState<number>(0);
   const [isUserEditing, setIsUserEditing] = useState<boolean>(false);
+  const [iconSize, setIconSize] = useState<number>(100);
+  const [fontSize, setFontSize] = useState<number>(100);
 
   useEffect(() => {
     if (originalRouteData) {
@@ -50,6 +43,8 @@ export function RightSidebar() {
         x: originalRouteData.center_latitude ?? 0,
         y: originalRouteData.center_longitude ?? 0,
       });
+      setIconSize(originalRouteData.icon_size ?? 100);
+      setFontSize(originalRouteData.font_size ?? 100);
     }
   }, [originalRouteData]);
 
@@ -70,33 +65,55 @@ export function RightSidebar() {
   }, [rotationDegrees]);
 
   useEffect(() => {
-    if (!isUserEditing) {
-      const center = screenCenter ?? { x: 0, y: 0 };
-      const localCenter = screenToLocal(center.x, center.y);
-      const coordinates = localToCoordinates(localCenter.x, localCenter.y);
-      setLocalCenter({ x: coordinates.latitude, y: coordinates.longitude });
+    if (isUserEditing) {
+      return;
     }
-  }, [
-    position,
-    screenCenter,
-    screenToLocal,
-    localToCoordinates,
-    setLocalCenter,
-    isUserEditing,
-  ]);
 
-  useEffect(() => {
-    setMapCenter(localCenter.x, localCenter.y);
-  }, [localCenter]);
+    const latitude = routeData?.center_latitude ?? 0;
+    const longitude = routeData?.center_longitude ?? 0;
+
+    setLocalCenter((prev) => {
+      if (
+        Math.abs(prev.x - latitude) < 1e-6 &&
+        Math.abs(prev.y - longitude) < 1e-6
+      ) {
+        return prev;
+      }
+      return { x: latitude, y: longitude };
+    });
+  }, [isUserEditing, routeData?.center_latitude, routeData?.center_longitude]);
 
   function setRotationFromDegrees(degrees: number) {
     rotateToAngle((degrees * Math.PI) / 180);
   }
 
-  function pan({ x, y }: { x: number; y: number }) {
-    const coordinates = coordinatesToLocal(x, y);
-    setTransform(coordinates.x, coordinates.y);
-  }
+  const handleIconSizeChange = (value: number) => {
+    if (!Number.isFinite(value)) {
+      return;
+    }
+    const clamped = Math.max(50, Math.min(300, Math.round(value)));
+    setIconSize(clamped);
+    updateIconSize(clamped);
+  };
+
+  const handleFontSizeChange = (value: number) => {
+    if (!Number.isFinite(value)) {
+      return;
+    }
+    const clamped = Math.max(50, Math.min(300, Math.round(value)));
+    setFontSize(clamped);
+    updateFontSize(clamped);
+  };
+
+  useEffect(() => {
+    const next = routeData?.icon_size ?? originalRouteData?.icon_size ?? 100;
+    setIconSize((prev) => (Math.abs(prev - next) > 0.5 ? next : prev));
+  }, [routeData?.icon_size, originalRouteData?.icon_size]);
+
+  useEffect(() => {
+    const next = routeData?.font_size ?? originalRouteData?.font_size ?? 100;
+    setFontSize((prev) => (Math.abs(prev - next) > 0.5 ? next : prev));
+  }, [routeData?.font_size, originalRouteData?.font_size]);
 
   if (!routeData) {
     return null;
@@ -176,6 +193,10 @@ export function RightSidebar() {
               newMaxScale = 3;
             }
 
+            if (newMaxScale > 300) {
+              newMaxScale = 300;
+            }
+
             setMaxScale(newMaxScale);
 
             if (newMaxScale - minScale < 2) {
@@ -204,7 +225,7 @@ export function RightSidebar() {
           slotProps={{
             input: {
               min: 3,
-              max: 10,
+              max: 300,
             },
           }}
         />
@@ -268,6 +289,62 @@ export function RightSidebar() {
         }}
       />
 
+      <Typography variant="body2" sx={{ color: "#fff", textAlign: "center" }}>
+        Размер иконок: {iconSize}%
+      </Typography>
+
+      <Slider
+        value={iconSize}
+        onChange={(_, value) => {
+          if (typeof value === "number") {
+            handleIconSizeChange(value);
+          }
+        }}
+        min={50}
+        max={300}
+        step={1}
+        sx={{
+          color: "#fff",
+          "& .MuiSlider-thumb": {
+            backgroundColor: "#fff",
+          },
+          "& .MuiSlider-track": {
+            backgroundColor: "#fff",
+          },
+          "& .MuiSlider-rail": {
+            backgroundColor: "#666",
+          },
+        }}
+      />
+
+      <Typography variant="body2" sx={{ color: "#fff", textAlign: "center" }}>
+        Размер шрифта: {fontSize}%
+      </Typography>
+
+      <Slider
+        value={fontSize}
+        onChange={(_, value) => {
+          if (typeof value === "number") {
+            handleFontSizeChange(value);
+          }
+        }}
+        min={50}
+        max={300}
+        step={1}
+        sx={{
+          color: "#fff",
+          "& .MuiSlider-thumb": {
+            backgroundColor: "#fff",
+          },
+          "& .MuiSlider-track": {
+            backgroundColor: "#fff",
+          },
+          "& .MuiSlider-rail": {
+            backgroundColor: "#666",
+          },
+        }}
+      />
+
       <TextField
         type="number"
         label="Поворот (в градусах)"
@@ -310,9 +387,10 @@ export function RightSidebar() {
           onChange={(e) => {
             setIsUserEditing(true);
             setLocalCenter((prev) => ({ ...prev, x: Number(e.target.value) }));
-            pan({ x: Number(e.target.value), y: localCenter.y });
           }}
-          onBlur={() => setIsUserEditing(false)}
+          onBlur={() => {
+            setIsUserEditing(false);
+          }}
           style={{ backgroundColor: "#222", borderRadius: 4 }}
           sx={{
             "& .MuiInputLabel-root": {
@@ -334,9 +412,10 @@ export function RightSidebar() {
           onChange={(e) => {
             setIsUserEditing(true);
             setLocalCenter((prev) => ({ ...prev, y: Number(e.target.value) }));
-            pan({ x: localCenter.x, y: Number(e.target.value) });
           }}
-          onBlur={() => setIsUserEditing(false)}
+          onBlur={() => {
+            setIsUserEditing(false);
+          }}
           style={{ backgroundColor: "#222", borderRadius: 4 }}
           sx={{
             "& .MuiInputLabel-root": {