v1.0.5

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

@@ -36,12 +36,13 @@ const MapDataContext = createContext<{
   setMapCenter: (x: number, y: number) => void;
   setStationOffset: (stationId: number, x: number, y: number) => void;
   setStationAlign: (stationId: number, align: number) => void;
+  setStationIconSize: (stationId: number, size: number) => void;
   setSightCoordinates: (
     sightId: number,
     latitude: number,
     longitude: number
   ) => void;
-  setIconSize: (size: number) => void;
+  setSightIconSize: (sightId: number, size: number) => void;
   setFontSize: (size: number) => void;
   saveChanges: () => void;
 }>({
@@ -62,8 +63,9 @@ const MapDataContext = createContext<{
   setMapCenter: () => {},
   setStationOffset: () => {},
   setStationAlign: () => {},
+  setStationIconSize: () => {},
   setSightCoordinates: () => {},
-  setIconSize: () => {},
+  setSightIconSize: () => {},
   setFontSize: () => {},
   saveChanges: () => {},
 });
@@ -145,16 +147,16 @@ export const MapDataProvider = observer(
     }, [routeId]);
 
     useEffect(() => {
-      if (originalRouteData)
+      if (originalRouteData) {
         setRouteData({ ...originalRouteData, ...routeChanges });
-      if (originalSightData) setSightData(originalSightData);
-    }, [
-      originalRouteData,
-      originalSightData,
-      routeChanges,
-      stationChanges,
-      sightChanges,
-    ]);
+      }
+    }, [originalRouteData, routeChanges]);
+
+    useEffect(() => {
+      if (originalSightData) {
+        setSightData(originalSightData);
+      }
+    }, [originalSightData]);
 
     function setScaleRange(min: number, max: number) {
       setRouteChanges((prev) => {
@@ -168,16 +170,6 @@ export const MapDataProvider = observer(
       });
     }
 
-    function setIconSize(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 setFontSize(size: number) {
       const clamped = Math.max(1, Math.min(300, size));
       setRouteChanges((prev) => {
@@ -241,6 +233,11 @@ export const MapDataProvider = observer(
                     ...s,
                     offset_x: station.offset_x,
                     offset_y: station.offset_y,
+                    align: station.align,
+                    icon_size:
+                      typeof station.icon_size === "number"
+                        ? station.icon_size
+                        : s.icon_size,
                   }
                 : s
             );
@@ -262,6 +259,10 @@ export const MapDataProvider = observer(
                       ...s,
                       latitude: sight.latitude,
                       longitude: sight.longitude,
+                      icon_size:
+                        typeof sight.icon_size === "number"
+                          ? sight.icon_size
+                          : s.icon_size,
                     }
                   : s
               )
@@ -306,6 +307,7 @@ export const MapDataProvider = observer(
               offset_x: x,
               offset_y: y,
               align: originalStation?.align ?? 1,
+              icon_size: originalStation?.icon_size,
               transfers: originalStation?.transfers ?? {
                 bus: "",
                 metro_blue: "",
@@ -367,6 +369,7 @@ export const MapDataProvider = observer(
               align: align,
               offset_x: originalStation?.offset_x ?? 0,
               offset_y: originalStation?.offset_y ?? 0,
+              icon_size: originalStation?.icon_size,
               transfers: originalStation?.transfers ?? {
                 bus: "",
                 metro_blue: "",
@@ -397,6 +400,70 @@ export const MapDataProvider = observer(
       });
     }
 
+    function setStationIconSize(stationId: number, size: number) {
+      const clamped = Math.max(1, Math.min(300, Math.round(size)));
+      const currentStation = stationData.ru?.find(
+        (station) => station.id === stationId
+      );
+      if (currentStation?.icon_size === clamped) {
+        return;
+      }
+
+      setStationChanges((prev) => {
+        const existingIndex = prev.findIndex(
+          (station) => station.station_id === stationId
+        );
+
+        if (existingIndex !== -1) {
+          const next = [...prev];
+          next[existingIndex] = {
+            ...next[existingIndex],
+            icon_size: clamped,
+          };
+          return next;
+        }
+
+        const originalStation = originalStationData?.find(
+          (s) => s.id === stationId
+        );
+
+        return [
+          ...prev,
+          {
+            station_id: stationId,
+            offset_x: currentStation?.offset_x ?? originalStation?.offset_x ?? 0,
+            offset_y: currentStation?.offset_y ?? originalStation?.offset_y ?? 0,
+            align: currentStation?.align ?? originalStation?.align ?? 1,
+            icon_size: clamped,
+            transfers: currentStation?.transfers ??
+              originalStation?.transfers ?? {
+                bus: "",
+                metro_blue: "",
+                metro_green: "",
+                metro_orange: "",
+                metro_purple: "",
+                metro_red: "",
+                train: "",
+                tram: "",
+                trolleybus: "",
+              },
+          },
+        ];
+      });
+
+      setStationData((prev) => {
+        const updated = { ...prev };
+        Object.keys(updated).forEach((lang) => {
+          updated[lang] = updated[lang].map((station) =>
+            station.id === stationId
+              ? { ...station, icon_size: clamped }
+              : station
+          );
+        });
+        return updated;
+      });
+    }
+
     function setSightCoordinates(
       sightId: number,
       latitude: number,
@@ -435,6 +502,7 @@ export const MapDataProvider = observer(
                 sight_id: sightId,
                 latitude,
                 longitude,
+                icon_size: foundSight.icon_size,
               },
             ];
           }
@@ -443,6 +511,49 @@ export const MapDataProvider = observer(
       });
     }
 
+    function setSightIconSize(sightId: number, size: number) {
+      const clamped = Math.max(1, Math.min(300, Math.round(size)));
+
+      setSightData((prev) =>
+        prev
+          ? prev.map((sight) =>
+              sight.id === sightId ? { ...sight, icon_size: clamped } : sight
+            )
+          : prev
+      );
+
+      setSightChanges((prev) => {
+        const existingIndex = prev.findIndex(
+          (sight) => sight.sight_id === sightId
+        );
+        if (existingIndex !== -1) {
+          const next = [...prev];
+          next[existingIndex] = {
+            ...next[existingIndex],
+            icon_size: clamped,
+          };
+          return next;
+        }
+
+        const foundSight =
+          sightData?.find((sight) => sight.id === sightId) ??
+          originalSightData?.find((sight) => sight.id === sightId);
+        if (!foundSight) {
+          return prev;
+        }
+
+        return [
+          ...prev,
+          {
+            sight_id: sightId,
+            latitude: foundSight.latitude,
+            longitude: foundSight.longitude,
+            icon_size: clamped,
+          },
+        ];
+      });
+    }
+
     useEffect(() => {}, [sightChanges]);
 
     const value = useMemo(
@@ -464,8 +575,9 @@ export const MapDataProvider = observer(
         saveChanges,
         setStationOffset,
         setStationAlign,
+        setStationIconSize,
         setSightCoordinates,
-        setIconSize,
+        setSightIconSize,
         setFontSize,
       }),
       [
@@ -479,7 +591,8 @@ export const MapDataProvider = observer(
         isStationLoading,
         isSightLoading,
         selectedSight,
-        setIconSize,
+        setStationIconSize,
+        setSightIconSize,
         setFontSize,
       ]
     );