bugfix/map-color-changing

src/lib/map/base-map.tsx

@@ -32,7 +32,6 @@ export const BaseMap: FC<PropsWithChildren<IBaseMapProps>> = ({
     sx,
     children,
 }) => {
-    const theme = useTheme();
     const mapContainer = useRef<HTMLDivElement | null>(null);
     const wrapper = useRef<HTMLDivElement | null>(null);
     // const mapRef = useRef<mapboxgl.Map>(null);
@@ -44,6 +43,12 @@ export const BaseMap: FC<PropsWithChildren<IBaseMapProps>> = ({
         if (!mapRef || !mapRef.current) return;
 
         mapRef.current.setStyle(getMapStyleId(palette.mode));
+
+        // Для обновления цветов в HelpControl
+        if (mapRef.current && mapRef.current._controls) {
+            const helpControl = mapRef.current._controls.find((control) => control instanceof HelpControl);
+            helpControl && helpControl.updatePalette(palette);
+        }
     }, [palette.mode]);
 
     useEffect(() => {
@@ -125,7 +130,7 @@ export const BaseMap: FC<PropsWithChildren<IBaseMapProps>> = ({
             mapRef.current?.flyTo({ center: [latlng.lng, latlng.lat], essential: true });
         });
 
-        const helpControl = new HelpControl(theme);
+        const helpControl = new HelpControl(palette);
         mapRef.current.addControl(helpControl, 'bottom-left');
 
         return () => {

src/lib/map/feature-map.tsx

@@ -24,9 +24,6 @@ interface IFeatureMapProps extends Omit<IBaseMapProps, 'mapRef' | 'onMapLoad'> {
     isLineMarkersNeeded?: boolean;
     accessToken?: string;
     centeringCoordinates?: Coordinates;
-    animateLineId?: number; // id по которому запускается анимация
-    animationDuration?: number;
-    onAnimationEnd?: () => void;
 }
 
 export const FeatureMap: React.FC<IFeatureMapProps> = ({
@@ -35,15 +32,13 @@ export const FeatureMap: React.FC<IFeatureMapProps> = ({
     scrollZoom = true,
     centeringCoordinates, // Координаты, по которым происходит центрирование
     isLineMarkersNeeded = true, // Флаг на отображение точек между стартовой и конечной на LineString
-    animateLineId,
-    animationDuration = 3000,
-    onAnimationEnd,
     ...baseProps
 }) => {
     const theme = useTheme();
     const markersRef = useRef<mapboxgl.Marker[]>([]);
     const map = useRef<mapboxgl.Map>(null);
     const drawRef = useRef<MapboxDraw | null>(null);
+    const themeRef = useRef(theme);
 
     const onMapLoad = (localData?: DataType) => {
         if (!map.current) return;
@@ -65,15 +60,15 @@ export const FeatureMap: React.FC<IFeatureMapProps> = ({
         addDataToMap(localData);
     };
 
-    const clearMap = useCallback(() => {
+    const clearMap = () => {
         if (!map.current) return;
 
         // Удаление всех маркеров
         markersRef.current.forEach((marker) => marker.remove());
         markersRef.current = []; // Очистка массива маркеров после их удаления
 
         drawRef.current && drawRef.current.deleteAll();
-    }, []);
+    };
 
     const addDataToMap = useCallback(
         (localData?: DataType) => {
@@ -101,10 +96,10 @@ export const FeatureMap: React.FC<IFeatureMapProps> = ({
                         if (localData.features.length === 1) {
                             singleMarkerCenter = geometry.coordinates;
                         }
-                        renderPoints(geometry, popupMarkup, map, markersRef, theme);
+                        renderPoints(geometry, popupMarkup, map, markersRef, themeRef.current);
                     } else if (geometry.type === 'LineString') {
                         // Отрисовка маркеров на линии
-                        renderLineStringPoints(geometry, map, markersRef, isLineMarkersNeeded, theme);
+                        renderLineStringPoints(geometry, map, markersRef, isLineMarkersNeeded, themeRef.current);
                     }
                 }
                 (map.current?.getSource('mapbox-gl-draw-cold') as mapboxgl.GeoJSONSource)?.setData({
@@ -127,15 +122,19 @@ export const FeatureMap: React.FC<IFeatureMapProps> = ({
         [theme],
     );
 
+    useEffect(() => {
+        themeRef.current = theme;
+    }, [theme]);
+
     useEffect(() => {
         if (!map.current) return;
 
         const updateMap = debounce(() => {
             if (map.current?.isStyleLoaded()) {
                 addDataToMap(data);
-            } else {
-                map.current?.on('style.load', () => addDataToMap(data));
             }
+
+            map.current?.on('style.load', () => addDataToMap(data));
         }, 100);
 
         updateMap();

src/lib/map/map-controls/help-control/help-control-svg.ts

@@ -1,23 +1,23 @@
 import { Palette } from '@mui/material';
 
-export const locationSvg = (theme: Palette) =>
+export const locationSvg = (palette: Palette) =>
     `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <rect x="0.5" y="0.5" width="23" height="23" rx="11.5" fill="${theme.base.color1}"/>
-        <rect x="0.5" y="0.5" width="23" height="23" rx="11.5" stroke="${theme.border.border5}"/>
-        <path d="M12.1111 18.75L18.2222 14.9305C18.2222 14.1202 17.9003 13.343 17.3273 12.7699C16.7542 12.1969 15.9771 11.875 15.1666 11.875H9.05555C8.24516 11.875 7.46798 12.1969 6.89495 12.7699C6.32192 13.343 6 14.1202 6 14.9305L12.1111 18.75Z" fill="${theme.base.color6}"/>
-        <path d="M12.1112 11.1111C13.7987 11.1111 15.1668 9.74309 15.1668 8.05555C15.1668 6.36802 13.7987 5 12.1112 5C10.4237 5 9.05566 6.36802 9.05566 8.05555C9.05566 9.74309 10.4237 11.1111 12.1112 11.1111Z" fill="${theme.base.color6}"/>
+        <rect x="0.5" y="0.5" width="23" height="23" rx="11.5" fill="${palette.background.background2}"/>
+        <rect x="0.5" y="0.5" width="23" height="23" rx="11.5" stroke="${palette.border.border5}"/>
+        <path d="M12.1111 18.75L18.2222 14.9305C18.2222 14.1202 17.9003 13.343 17.3273 12.7699C16.7542 12.1969 15.9771 11.875 15.1666 11.875H9.05555C8.24516 11.875 7.46798 12.1969 6.89495 12.7699C6.32192 13.343 6 14.1202 6 14.9305L12.1111 18.75Z" fill="${palette.base.color6}"/>
+        <path d="M12.1112 11.1111C13.7987 11.1111 15.1668 9.74309 15.1668 8.05555C15.1668 6.36802 13.7987 5 12.1112 5C10.4237 5 9.05566 6.36802 9.05566 8.05555C9.05566 9.74309 10.4237 11.1111 12.1112 11.1111Z" fill="${palette.base.color6}"/>
     </svg>
 `;
 
-export const trackerSvg = (theme: Palette) =>
+export const trackerSvg = (palette: Palette) =>
     `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <rect x="0.5" y="0.5" width="23" height="23" rx="11.5" fill="${theme.base.color1}"/>
-        <rect x="0.5" y="0.5" width="23" height="23" rx="11.5" stroke="${theme.border.border5}"/>
+        <rect x="0.5" y="0.5" width="23" height="23" rx="11.5" fill="${palette.background.background2}"/>
+        <rect x="0.5" y="0.5" width="23" height="23" rx="11.5" stroke="${palette.border.border5}"/>
         <mask id="path-2-inside-1_6447_126159" fill="white">
         <path d="M18.5 11.25C18.5 15.25 12.25 19.5 12.25 19.5C12.25 19.5 6 15.25 6 11.25C6 7.75 8.93629 5 12.25 5C15.5637 5 18.5 7.75 18.5 11.25Z"/>
         <path d="M14.5 11.25C14.5 12.4926 13.4926 13.5 12.25 13.5C11.0074 13.5 10 12.4926 10 11.25C10 10.0074 11.0074 9 12.25 9C13.4926 9 14.5 10.0074 14.5 11.25Z"/>
         </mask>
-        <path d="M18.5 11.25C18.5 15.25 12.25 19.5 12.25 19.5C12.25 19.5 6 15.25 6 11.25C6 7.75 8.93629 5 12.25 5C15.5637 5 18.5 7.75 18.5 11.25Z" stroke="${theme.base.color6}" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" mask="url(#path-2-inside-1_6447_126159)"/>
-        <path d="M14.5 11.25C14.5 12.4926 13.4926 13.5 12.25 13.5C11.0074 13.5 10 12.4926 10 11.25C10 10.0074 11.0074 9 12.25 9C13.4926 9 14.5 10.0074 14.5 11.25Z" stroke="${theme.base.color6}" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" mask="url(#path-2-inside-1_6447_126159)"/>
+        <path d="M18.5 11.25C18.5 15.25 12.25 19.5 12.25 19.5C12.25 19.5 6 15.25 6 11.25C6 7.75 8.93629 5 12.25 5C15.5637 5 18.5 7.75 18.5 11.25Z" stroke="${palette.base.color6}" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" mask="url(#path-2-inside-1_6447_126159)"/>
+        <path d="M14.5 11.25C14.5 12.4926 13.4926 13.5 12.25 13.5C11.0074 13.5 10 12.4926 10 11.25C10 10.0074 11.0074 9 12.25 9C13.4926 9 14.5 10.0074 14.5 11.25Z" stroke="${palette.base.color6}" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" mask="url(#path-2-inside-1_6447_126159)"/>
     </svg>
 `;

src/lib/map/map-controls/help-control/help-control.ts

@@ -1,19 +1,35 @@
-import { Theme } from '@mui/material';
+import { Palette } from '@mui/material/styles';
 import { locationSvg, trackerSvg } from './help-control-svg';
 
 /** Control кнопки с вопросом на карте */
 export class HelpControl {
     container: HTMLDivElement | undefined;
     map: mapboxgl.Map | undefined;
-    theme: Theme;
+    palette: Palette;
+    locationItem: HTMLDivElement | undefined;
+    trackerItem: HTMLDivElement | undefined;
 
-    constructor(theme: Theme) {
-        this.theme = theme;
+    constructor(palette: Palette) {
+        this.palette = palette;
+    }
+
+    updatePalette(palette: Palette) {
+        this.palette = palette;
+
+        // Перерисовать иконки
+        if (this.locationItem) {
+            this.locationItem.innerHTML = locationSvg(this.palette);
+            this.locationItem.insertAdjacentText('beforeend', 'Your location');
+        }
+
+        if (this.trackerItem) {
+            this.trackerItem.innerHTML = trackerSvg(this.palette);
+            this.trackerItem.insertAdjacentText('beforeend', 'GPS tracker');
+        }
     }
 
     onAdd(map: mapboxgl.Map) {
         this.map = map;
-
         this.container = document.createElement('div');
         this.container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group';
         this.container.style.position = 'relative';
@@ -30,21 +46,21 @@ export class HelpControl {
         const menu = document.createElement('div');
         menu.className = 'help-menu';
 
-        const locationItem = document.createElement('div');
-        locationItem.className = 'help-menu-item';
-        locationItem.innerHTML = locationSvg(this.theme.palette);
-        locationItem.insertAdjacentText('beforeend', 'Your location');
-        menu.appendChild(locationItem);
+        this.locationItem = document.createElement('div');
+        this.locationItem.className = 'help-menu-item';
+        this.locationItem.innerHTML = locationSvg(this.palette);
+        this.locationItem.insertAdjacentText('beforeend', 'Your location');
+        menu.appendChild(this.locationItem);
 
         const divider = document.createElement('div');
         divider.className = 'help-menu-divider';
         menu.appendChild(divider);
 
-        const trackerItem = document.createElement('div');
-        trackerItem.className = 'help-menu-item';
-        trackerItem.innerHTML = trackerSvg(this.theme.palette);
-        trackerItem.insertAdjacentText('beforeend', 'GPS tracker');
-        menu.appendChild(trackerItem);
+        this.trackerItem = document.createElement('div');
+        this.trackerItem.className = 'help-menu-item';
+        this.trackerItem.innerHTML = trackerSvg(this.palette);
+        this.trackerItem.insertAdjacentText('beforeend', 'GPS tracker');
+        menu.appendChild(this.trackerItem);
 
         this.container.appendChild(menu);
 
@@ -64,5 +80,7 @@ export class HelpControl {
             this.container.parentNode.removeChild(this.container);
         }
         this.map = undefined;
+        this.locationItem = undefined;
+        this.trackerItem = undefined;
     }
 }

src/lib/map/trip-map/index.tsx

@@ -12,7 +12,7 @@ import { mapMarkerArrowSvgString } from '../mp-marker-string';
 import { createPopupsForLineString, renderLineStringPoints, ZOOM_BREAKPOINTS } from './utils';
 import { BaseMap, IBaseMapProps } from '../base-map';
 import { customDrawStyles } from '../constance';
-import { useTheme } from '@mui/material';
+import { debounce, useTheme } from '@mui/material';
 
 mapboxgl.accessToken = import.meta.env.VITE_UI_MAPBOX_TOKEN || '';
 
@@ -27,6 +27,7 @@ interface IFeatureMapProps extends Omit<IBaseMapProps, 'mapRef' | 'onMapLoad'> {
     isPaused: boolean;
     onAnimationEnd?: () => void;
 }
+type DataType = GeoJSON.GeoJSON<GeoJSON.Geometry, GeoJSON.GeoJsonProperties> | null;
 
 export const TripMap: React.FC<IFeatureMapProps> = ({
     data,
@@ -49,8 +50,9 @@ export const TripMap: React.FC<IFeatureMapProps> = ({
     const map = useRef<mapboxgl.Map>(null);
     const animationMarkerRef = useRef<mapboxgl.Marker | null>(null);
     const drawRef = useRef<MapboxDraw | null>(null);
+    const themeRef = useRef(theme);
 
-    const onMapLoad = () => {
+    const onMapLoad = (localData?: DataType) => {
         if (!map.current) return;
 
         arrowRef.current = document.createElement('div');
@@ -73,55 +75,81 @@ export const TripMap: React.FC<IFeatureMapProps> = ({
         drawRef.current = draw;
         map.current.addControl(draw);
 
-        addDataToMap();
+        addDataToMap(localData);
     };
 
-    const clearMap = useCallback(() => {
+    const clearMap = () => {
         if (!map.current) return;
 
         // Удаление всех маркеров
         markersRef.current.forEach((marker) => marker.remove());
         markersRef.current = []; // Очистка массива маркеров после их удаления
 
         drawRef.current && drawRef.current.deleteAll();
-    }, []);
+    };
 
-    const addDataToMap = useCallback(() => {
-        if (!map.current) return;
+    const addDataToMap = useCallback(
+        (localData?: DataType) => {
+            if (!map.current) return;
 
-        clearMap();
+            clearMap();
 
-        if (!data) {
-            (map.current?.getSource('mapbox-gl-draw-cold') as mapboxgl.GeoJSONSource)?.setData({
-                type: 'FeatureCollection',
-                features: [],
-            });
+            if (!localData) {
+                (map.current?.getSource('mapbox-gl-draw-cold') as mapboxgl.GeoJSONSource)?.setData({
+                    type: 'FeatureCollection',
+                    features: [],
+                });
 
-            return;
-        }
+                return;
+            }
 
-        if (data.type === 'FeatureCollection') {
-            for (const feature of data.features) {
-                const geometry = feature.geometry;
+            if (localData.type === 'FeatureCollection') {
+                for (const feature of localData.features) {
+                    const geometry = feature.geometry;
 
-                if (geometry.type === 'LineString') {
-                    // Отрисовка маркеров на линии
-                    renderLineStringPoints(geometry, map, markersRef, isLineMarkersNeeded, theme);
+                    if (geometry.type === 'LineString') {
+                        // Отрисовка маркеров на линии
+                        renderLineStringPoints(geometry, map, markersRef, isLineMarkersNeeded, themeRef.current);
+                    }
                 }
+                (map.current?.getSource('mapbox-gl-draw-cold') as mapboxgl.GeoJSONSource)?.setData({
+                    type: 'FeatureCollection',
+                    features: localData.features,
+                });
+            } else {
+                (map.current?.getSource('mapbox-gl-draw-cold') as mapboxgl.GeoJSONSource)?.setData(localData);
             }
-            (map.current?.getSource('mapbox-gl-draw-cold') as mapboxgl.GeoJSONSource)?.setData({
-                type: 'FeatureCollection',
-                features: data.features,
-            });
-        } else {
-            (map.current?.getSource('mapbox-gl-draw-cold') as mapboxgl.GeoJSONSource)?.setData(data);
-        }
 
-        // bbox logic
-        const bbox = bboxTurf(data, { recompute: true });
-        const [west, south, east, north] = bbox;
-        map.current.fitBounds([west, south, east, north], { padding: 50 });
-    }, [data]);
+            // bbox logic
+            const bbox = bboxTurf(localData, { recompute: true });
+            const [west, south, east, north] = bbox;
+            map.current.fitBounds([west, south, east, north], { padding: 50 });
+        },
+        [theme],
+    );
+
+    useEffect(() => {
+        themeRef.current = theme;
+    }, [theme]);
+
+    useEffect(() => {
+        if (!map.current) return;
+
+        const updateMap = debounce(() => {
+            if (map.current?.isStyleLoaded()) {
+                addDataToMap(data);
+            }
+
+            map.current?.on('style.load', () => addDataToMap(data));
+        }, 100);
+
+        updateMap();
+
+        return () => {
+            updateMap?.clear();
+            if (map.current) map.current.stop();
+        };
+    }, [data, theme]);
 
     useEffect(() => {
         if (!map.current) return;
@@ -131,14 +159,6 @@ export const TripMap: React.FC<IFeatureMapProps> = ({
         map.current.on('zoom', handleZoomChange);
         map.current.on('move', updatePopups);
 
-        if (map.current.isStyleLoaded()) {
-            addDataToMap();
-        } else {
-            map.current.on('style.load', () => {
-                addDataToMap();
-            });
-        }
-
         return () => {
             map.current?.off('zoom', handleZoomChange);
             map.current?.off('move', updatePopups);
@@ -302,5 +322,5 @@ export const TripMap: React.FC<IFeatureMapProps> = ({
         }
     }, [centeringCoordinates]);
 
-    return <BaseMap {...baseProps} mapRef={map} onMapLoad={() => onMapLoad()} />;
+    return <BaseMap {...baseProps} mapRef={map} onMapLoad={() => onMapLoad(data)} />;
 };