Merge remote-tracking branch 'origin/macrostrat-ui-updates'

* origin/macrostrat-ui-updates: Update useMapEaseTo to avoid randomly flying back to map positions Some updates to styles
UW-Macrostrat · Nov 5, 2024 · decb6a2 · decb6a2
2 parents 186a4cf + 8cd20bf
commit decb6a2
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 32 deletions.
diff --git a/packages/map-interface/src/container.ts b/packages/map-interface/src/container.ts
@@ -32,6 +32,9 @@ export enum DetailPanelStyle {
   FLOATING = "floating",
 }
 
+export const MapAreaContainer = (props) =>
+  h(MapProviders, h(_MapAreaContainer, props));
+
 function _MapAreaContainer({
   children,
   className,
@@ -144,9 +147,6 @@ function ContextStack(props: ContextStackProps) {
 const MapProviders = ({ children }) =>
   h(ToasterContext, h(MapboxMapProvider, children));
 
-export const MapAreaContainer = (props) =>
-  h(MapProviders, h(_MapAreaContainer, props));
-
 interface MapContainerProps {
   className?: string;
   children?: ReactNode;

diff --git a/packages/map-interface/src/context-panel/main.module.sass b/packages/map-interface/src/context-panel/main.module.sass
@@ -3,9 +3,11 @@
   display: flex
   flex-direction: column
   margin: 0
+
   .navbar-holder
     display: flex
     flex-direction: row
+
   .searchbar
     width: 100%
     background-color: var(--panel-background-color)
@@ -15,20 +17,22 @@
     flex-direction: row
     align-items: center
     gap: 5px
+
     :global(.bp5-input-group)
       flex-grow: 1
       cursor: text
 
 .navbar
   min-height: 50px
 
-:global(.bp5-navbar)>.loading-button
+:global(.bp5-navbar) > .loading-button
   width: 40px
   height: 40px
 
 .status-tongue
   background-color: var(--panel-background-color)
   margin: 5px
+  margin-bottom: 0
   margin-top: -12px
   padding: 0
   padding-top: 12px

diff --git a/packages/mapbox-react/src/focus-state.ts b/packages/mapbox-react/src/focus-state.ts
@@ -63,6 +63,9 @@ export function useMapEaseToCenter(position, padding) {
   const prevPadding = useRef<any>(null);
   // Handle map position easing (for both map padding and markers)
   useEffect(() => {
+    console.warn(
+      "Using deprecated function useMapEaseToCenter, consider using useMapEaseTo instead"
+    );
     const map = mapRef.current;
     if (map == null) return;
     let opts: mapboxgl.FlyToOptions = null;
@@ -105,6 +108,9 @@ export function useMapEaseToBounds(
   const prevPadding = useRef<any>(null);
   // Handle map position easing (for both map padding and markers)
   useEffect(() => {
+    console.warn(
+      "Using deprecated function useMapEaseToBounds, consider using useMapEaseTo instead"
+    );
     const map = mapRef.current;
     if (map == null) return;
     if (bounds == prevPosition.current || padding == prevPadding.current) {
@@ -126,11 +132,14 @@ export function useMapEaseToBounds(
   }, [bounds, padding, mapRef.current]);
 }
 
-type MapEaseToProps = {
+type MapEaseToState = {
   bounds?: LngLatBoundsLike;
   padding?: PaddingOptions | number;
   center?: LngLatLike;
   zoom?: number;
+};
+
+type MapEaseToProps = MapEaseToState & {
   duration?: number;
   trackResize?: boolean;
 };
@@ -145,51 +154,82 @@ export function useMapEaseTo(props: MapEaseToProps) {
     duration = 800,
     trackResize = false,
   } = props;
-  const initialized = useRef<boolean>(false);
-  const [resizeCounter, setResizeCounter] = useState(0);
+  const prevState = useRef<MapEaseToState | null>(null);
 
+  /** Handle changes to any map props */
   useEffect(() => {
     const map = mapRef.current;
     if (map == null) return;
 
+    const initialized = prevState.current != null;
+
     let opts: mapboxgl.FlyToOptions = {
       padding,
-      duration: initialized.current ? duration : 0,
+      duration: initialized ? duration : 0,
     };
 
-    if (bounds != null) {
-      map.fitBounds(bounds, opts);
-    } else if (center != null || zoom != null || padding != null) {
-      let props = { ...opts };
-      if (center != null) {
-        props.center = center;
-      }
-      if (zoom != null) {
-        props.zoom = zoom;
-      }
-      map.flyTo(props);
-    }
+    const state = { bounds, padding, center, zoom };
 
+    moveMap(map, filterChanges(state, prevState.current), opts);
     map.once("moveend", () => {
-      initialized.current = true;
+      prevState.current = state;
     });
-  }, [bounds, padding, center, zoom, mapRef.current, resizeCounter]);
+  }, [bounds, padding, center, zoom, mapRef.current]);
 
+  /** Handle map resize events */
   useEffect(() => {
     const map = mapRef.current;
-    if (map == null) return;
-    if (props.trackResize) {
-      const cb = () => {
-        setResizeCounter((x) => x + 1);
-      };
-      map.on("resize", cb);
-      return () => {
-        map.off("resize", cb);
-      };
-    }
+    if (map == null || !props.trackResize) return;
+    const cb = () => {
+      if (prevState.current == null) return;
+      moveMap(map, prevState.current, { duration: 0 });
+    };
+    map.on("resize", cb);
+    return () => {
+      map.off("resize", cb);
+    };
   }, [trackResize, mapRef.current]);
 }
 
+function filterChanges(
+  a: MapEaseToState,
+  b: MapEaseToState | null
+): Partial<MapEaseToState> {
+  if (b == null) return a;
+  return getChangedKeys(a, b);
+}
+
+function getChangedKeys<T = object>(a: T, b: T): Partial<T> {
+  /** Find the keys of an object that have changed */
+  const keys = Object.keys(a) as (keyof T)[];
+  return keys.reduce((acc, key) => {
+    if (a[key] !== b[key]) {
+      acc[key] = a[key];
+    }
+    return acc;
+  }, {} as Partial<T>);
+}
+
+function moveMap(
+  map: mapboxgl.Map,
+  state: MapEaseToState,
+  opts: mapboxgl.FlyToOptions
+) {
+  const { bounds, center, zoom, padding } = state;
+  if (bounds != null) {
+    map.fitBounds(bounds, opts);
+  } else if (center != null || zoom != null || padding != null) {
+    let props = { ...opts };
+    if (center != null) {
+      props.center = center;
+    }
+    if (zoom != null) {
+      props.zoom = zoom;
+    }
+    map.flyTo(props);
+  }
+}
+
 function greatCircleDistance(
   l1: mapboxgl.LngLatLike,
   l2: mapboxgl.LngLatLike