Map stabilized while changing zone geometry

.env.example

@@ -1,2 +1,2 @@
-VITE_API_BASE_URL=http://localhost:8000/api/v1
+VITE_API_BASE_URL=http://127.0.0.1:8000/api/v1
 VITE_YANDEX_MAPS_API_KEY=

README.md

@@ -94,7 +94,7 @@
 Для локальной разработки backend обычно доступен по адресу:
 
 ```text
-http://localhost:8000/api/v1
+http://127.0.0.1:8000/api/v1
 ```
 
 ## Локальный запуск
@@ -121,7 +121,7 @@ VITE_YANDEX_MAPS_API_KEY=your-yandex-maps-api-key
 
 Если переменная не задана:
 
-- на `localhost` приложение использует `http://localhost:8000/api/v1`
+- на `localhost` приложение использует `http://127.0.0.1:8000/api/v1`
 - на остальных доменах приложение использует относительный путь `/api/v1`
 
 Ручного поля `API Base` в интерфейсе нет: конечный пользователь не должен настраивать backend-адрес внутри UI.

src/api/http.ts

@@ -13,7 +13,7 @@ function detectDefaultApiBase() {
   if (typeof window !== 'undefined') {
     const host = window.location.hostname;
     if (host === 'localhost' || host === '127.0.0.1') {
-      return 'http://localhost:8000/api/v1';
+      return 'http://127.0.0.1:8000/api/v1';
     }
   }
 

src/components/ZoneMapSelector.tsx

@@ -64,7 +64,7 @@ function YandexZoneGeometryMap({
 }) {
   const mapRef = useRef<HTMLDivElement | null>(null);
   const pointsRef = useRef(points);
-  const { ymaps, map, loading, error } = useYandexMap(mapRef, { center, zoom: 16 });
+  const { ymaps, map, loading, error } = useYandexMap(mapRef, { center, zoom: 16, syncView: false });
 
   useEffect(() => {
     pointsRef.current = points;

src/maps/useYandexMap.ts

@@ -5,6 +5,7 @@ type UseYandexMapOptions = {
   center: YandexPoint;
   zoom: number;
   controls?: string[];
+  syncView?: boolean;
 };
 
 type YandexMapState = {
@@ -16,7 +17,7 @@ type YandexMapState = {
 
 export function useYandexMap(
   containerRef: RefObject<HTMLDivElement>,
-  { center, zoom, controls = ['zoomControl'] }: UseYandexMapOptions
+  { center, zoom, controls = ['zoomControl'], syncView = true }: UseYandexMapOptions
 ) {
   const [state, setState] = useState<YandexMapState>({ loading: true });
   const centerKey = useMemo(() => center.join(','), [center]);
@@ -55,9 +56,9 @@ export function useYandexMap(
   }, []);
 
   useEffect(() => {
-    if (!state.map) return;
+    if (!syncView || !state.map) return;
     state.map.setCenter(center, zoom, { duration: 200 });
-  }, [state.map, centerKey, zoom]);
+  }, [state.map, centerKey, zoom, syncView]);
 
   return state;
 }

src/store/useStore.ts

@@ -22,7 +22,7 @@ function detectDefaultApiBase() {
   if (typeof window !== 'undefined') {
     const host = window.location.hostname;
     if (host === 'localhost' || host === '127.0.0.1') {
-      return 'http://localhost:8000/api/v1';
+      return 'http://127.0.0.1:8000/api/v1';
     }
   }