fix: Update map with tables fixes

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

@@ -1,8 +1,9 @@
-import { Button, Stack, TextField, Typography } from "@mui/material";
+import { Button, Stack, TextField, Typography, Slider } from "@mui/material";
 import { useMapData } from "./MapDataContext";
 import { useEffect, useState } from "react";
 import { useTransform } from "./TransformContext";
-import { coordinatesToLocal } from "./utils";
+import { coordinatesToLocal, localToCoordinates } from "./utils";
+import { SCALE_FACTOR } from "./Constants";
 
 export function RightSidebar() {
   const {
@@ -15,24 +16,36 @@ export function RightSidebar() {
   } = useMapData();
   const {
     rotation,
-    // position,
-    // screenToLocal,
-    // screenCenter,
+    position,
+    screenToLocal,
+    screenCenter,
     rotateToAngle,
     setTransform,
+    scale,
+    setScaleAtCenter,
   } = useTransform();
+
   const [minScale, setMinScale] = useState<number>(1);
-  const [maxScale, setMaxScale] = useState<number>(10);
+  const [maxScale, setMaxScale] = useState<number>(5);
   const [localCenter, setLocalCenter] = useState<{ x: number; y: number }>({
     x: 0,
     y: 0,
   });
   const [rotationDegrees, setRotationDegrees] = useState<number>(0);
+  const [isUserEditing, setIsUserEditing] = useState<boolean>(false);
 
   useEffect(() => {
     if (originalRouteData) {
-      setMinScale(originalRouteData.scale_min ?? 1);
-      setMaxScale(originalRouteData.scale_max ?? 10);
+      // Проверяем и сбрасываем минимальный масштаб если нужно
+      const originalMinScale = originalRouteData.scale_min ?? 1;
+      const resetMinScale = originalMinScale < 1 ? 1 : originalMinScale;
+
+      // Проверяем и сбрасываем максимальный масштаб если нужно
+      const originalMaxScale = originalRouteData.scale_max ?? 5;
+      const resetMaxScale = originalMaxScale < 3 ? 3 : originalMaxScale;
+
+      setMinScale(resetMinScale);
+      setMaxScale(resetMaxScale);
       setRotationDegrees(originalRouteData.rotate ?? 0);
       setLocalCenter({
         x: originalRouteData.center_latitude ?? 0,
@@ -52,16 +65,26 @@ export function RightSidebar() {
       ((Math.round((rotation * 180) / Math.PI) % 360) + 360) % 360
     );
   }, [rotation]);
+
   useEffect(() => {
     setMapRotation(rotationDegrees);
   }, [rotationDegrees]);
 
-  // useEffect(() => {
-  //   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 });
-  // }, [position]);
+  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 });
+    }
+  }, [
+    position,
+    screenCenter,
+    screenToLocal,
+    localToCoordinates,
+    setLocalCenter,
+    isUserEditing,
+  ]);
 
   useEffect(() => {
     setMapCenter(localCenter.x, localCenter.y);
@@ -104,7 +127,30 @@ export function RightSidebar() {
           label="Минимальный масштаб"
           variant="filled"
           value={minScale}
-          onChange={(e) => setMinScale(Number(e.target.value))}
+          onChange={(e) => {
+            let newMinScale = Number(e.target.value);
+
+            // Сбрасываем к 1 если меньше
+            if (newMinScale < 1) {
+              newMinScale = 1;
+            }
+
+            setMinScale(newMinScale);
+
+            if (maxScale - newMinScale < 2) {
+              let newMaxScale = newMinScale + 2;
+              // Сбрасываем максимальный к 3 если меньше минимального
+              if (newMaxScale < 3) {
+                newMaxScale = 3;
+                setMinScale(1); // Сбрасываем минимальный к 1
+              }
+              setMaxScale(newMaxScale);
+            }
+
+            if (newMinScale > scale * SCALE_FACTOR) {
+              setScaleAtCenter(newMinScale / SCALE_FACTOR);
+            }
+          }}
           style={{ backgroundColor: "#222", borderRadius: 4 }}
           sx={{
             "& .MuiInputLabel-root": {
@@ -116,7 +162,8 @@ export function RightSidebar() {
           }}
           slotProps={{
             input: {
-              min: 0.1,
+              min: 1,
+              max: 10,
             },
           }}
         />
@@ -125,7 +172,30 @@ export function RightSidebar() {
           label="Максимальный масштаб"
           variant="filled"
           value={maxScale}
-          onChange={(e) => setMaxScale(Number(e.target.value))}
+          onChange={(e) => {
+            let newMaxScale = Number(e.target.value);
+
+            // Сбрасываем к 3 если меньше минимального
+            if (newMaxScale < 3) {
+              newMaxScale = 3;
+            }
+
+            setMaxScale(newMaxScale);
+
+            if (newMaxScale - minScale < 2) {
+              let newMinScale = newMaxScale - 2;
+              // Сбрасываем минимальный к 1 если меньше
+              if (newMinScale < 1) {
+                newMinScale = 1;
+                setMaxScale(3); // Сбрасываем максимальный к минимальному значению
+              }
+              setMinScale(newMinScale);
+            }
+
+            if (newMaxScale < scale * SCALE_FACTOR) {
+              setScaleAtCenter(newMaxScale / SCALE_FACTOR);
+            }
+          }}
           style={{ backgroundColor: "#222", borderRadius: 4, color: "#fff" }}
           sx={{
             "& .MuiInputLabel-root": {
@@ -137,12 +207,71 @@ export function RightSidebar() {
           }}
           slotProps={{
             input: {
-              min: 0.1,
+              min: 3,
+              max: 10,
             },
           }}
         />
       </Stack>
 
+      <Typography variant="body2" sx={{ color: "#fff", textAlign: "center" }}>
+        Текущий масштаб: {Math.round(scale * SCALE_FACTOR * 100) / 100}
+      </Typography>
+
+      <Slider
+        value={scale * SCALE_FACTOR}
+        onChange={(_, newValue) => {
+          if (typeof newValue === "number") {
+            setScaleAtCenter(newValue / SCALE_FACTOR);
+          }
+        }}
+        min={minScale}
+        max={maxScale}
+        step={0.1}
+        sx={{
+          color: "#fff",
+          "& .MuiSlider-thumb": {
+            backgroundColor: "#fff",
+          },
+          "& .MuiSlider-track": {
+            backgroundColor: "#fff",
+          },
+          "& .MuiSlider-rail": {
+            backgroundColor: "#666",
+          },
+        }}
+      />
+
+      <TextField
+        type="number"
+        label="Текущий масштаб"
+        variant="filled"
+        value={Math.round(scale * SCALE_FACTOR * 100) / 100}
+        onChange={(e) => {
+          const newScale = Number(e.target.value);
+          if (
+            !isNaN(newScale) &&
+            newScale >= minScale &&
+            newScale <= maxScale
+          ) {
+            setScaleAtCenter(newScale / SCALE_FACTOR);
+          }
+        }}
+        style={{ backgroundColor: "#222", borderRadius: 4 }}
+        sx={{
+          "& .MuiInputLabel-root": {
+            color: "#fff",
+          },
+          "& .MuiInputBase-input": {
+            color: "#fff",
+          },
+        }}
+        inputProps={{
+          min: minScale,
+          max: maxScale,
+        }}
+      />
+
       <TextField
         type="number"
         label="Поворот (в градусах)"
@@ -181,11 +310,13 @@ export function RightSidebar() {
           type="number"
           label="Центр карты, широта"
           variant="filled"
-          value={Math.round(localCenter.x * 100000) / 100000}
+          value={Math.round(localCenter.x * 1000) / 1000}
           onChange={(e) => {
+            setIsUserEditing(true);
             setLocalCenter((prev) => ({ ...prev, x: Number(e.target.value) }));
             pan({ x: Number(e.target.value), y: localCenter.y });
           }}
+          onBlur={() => setIsUserEditing(false)}
           style={{ backgroundColor: "#222", borderRadius: 4 }}
           sx={{
             "& .MuiInputLabel-root": {
@@ -195,16 +326,21 @@ export function RightSidebar() {
               color: "#fff",
             },
           }}
+          inputProps={{
+            step: 0.001,
+          }}
         />
         <TextField
           type="number"
           label="Центр карты, высота"
           variant="filled"
-          value={Math.round(localCenter.y * 100000) / 100000}
+          value={Math.round(localCenter.y * 1000) / 1000}
           onChange={(e) => {
+            setIsUserEditing(true);
             setLocalCenter((prev) => ({ ...prev, y: Number(e.target.value) }));
             pan({ x: localCenter.x, y: Number(e.target.value) });
           }}
+          onBlur={() => setIsUserEditing(false)}
           style={{ backgroundColor: "#222", borderRadius: 4 }}
           sx={{
             "& .MuiInputLabel-root": {
@@ -214,6 +350,9 @@ export function RightSidebar() {
               color: "#fff",
             },
           }}
+          inputProps={{
+            step: 0.001,
+          }}
         />
       </Stack>