diff --git a/packages/map-interface/src/helpers.ts b/packages/map-interface/src/helpers.ts index 3e38a253..ef6344b6 100644 --- a/packages/map-interface/src/helpers.ts +++ b/packages/map-interface/src/helpers.ts @@ -4,7 +4,7 @@ import { useMapDispatch, useMapStatus, } from "@macrostrat/mapbox-react"; -import { useRef } from "react"; +import { useMemo, useRef } from "react"; import { debounce } from "underscore"; import useResizeObserver from "use-resize-observer"; @@ -34,12 +34,14 @@ interface MapPaddingManagerProps { containerRef: React.RefObject; parentRef: React.RefObject; infoMarkerPosition: mapboxgl.LngLatLike; + debounceTime?: number; } export function MapPaddingManager({ containerRef, parentRef, infoMarkerPosition, + debounceTime = 200, }: MapPaddingManagerProps) { const mapRef = useMapRef(); @@ -47,11 +49,16 @@ export function MapPaddingManager({ getMapPadding(containerRef, parentRef) ); - const updateMapPadding = useCallback(() => { + const _updateMapPadding = useCallback(() => { const newPadding = getMapPadding(containerRef, parentRef); setPadding(newPadding); }, [containerRef.current, parentRef.current]); + const updateMapPadding = useMemo( + () => debounce(_updateMapPadding, debounceTime), + [_updateMapPadding, debounceTime] + ); + useEffect(() => { const map = mapRef.current; if (map == null) return; @@ -64,6 +71,9 @@ export function MapPaddingManager({ onResize(sz) { updateMapPadding(); }, + round(n) { + return Math.round(n); + }, }); // Ideally, we would not have to do this when we know the infobox is loaded