@macrostrat/map-interface 1.0.12 → 1.2.0

package/src/helpers.ts

@@ -3,6 +3,7 @@ import {
   useMapEaseTo,
   useMapDispatch,
   useMapStatus,
+  useMapInitialized,
 } from "@macrostrat/mapbox-react";
 import { useMemo, useRef } from "react";
 import { debounce } from "underscore";
@@ -86,6 +87,7 @@ export function MapPaddingManager({
 export function MapMovedReporter({ onMapMoved = null }) {
   const mapRef = useMapRef();
   const dispatch = useMapDispatch();
+  const isInitialized = useMapInitialized();
 
   const mapMovedCallback = useCallback(() => {
     const map = mapRef.current;
@@ -93,7 +95,7 @@ export function MapMovedReporter({ onMapMoved = null }) {
     const mapPosition = getMapPosition(map);
     dispatch({ type: "map-moved", payload: mapPosition });
     onMapMoved?.(mapPosition, map);
-  }, [mapRef.current, onMapMoved, dispatch]);
+  }, [onMapMoved, dispatch, isInitialized]);
 
   useEffect(() => {
     // Get the current value of the map. Useful for gradually moving away
@@ -120,6 +122,7 @@ export function MapLoadingReporter({
   const mapRef = useMapRef();
   const loadingRef = useRef(false);
   const dispatch = useMapDispatch();
+  const isInitialized = useMapInitialized();
 
   useEffect(() => {
     const map = mapRef.current;
@@ -148,36 +151,35 @@ export function MapLoadingReporter({
       map?.off("sourcedataloading", loadingCallback);
       map?.off("idle", idleCallback);
     };
-  }, [ignoredSources, mapRef.current, mapIsLoading]);
+  }, [ignoredSources, mapIsLoading, isInitialized]);
   return null;
 }
 
 export function MapMarker({ position, setPosition, centerMarker = true }) {
   const mapRef = useMapRef();
   const markerRef = useRef(null);
+  const isInitialized = useMapInitialized();
 
   useMapMarker(mapRef, markerRef, position);
 
-  const handleMapClick = useCallback(
-    (event: mapboxgl.MapMouseEvent) => {
+  useEffect(() => {
+    const map = mapRef.current;
+    if (map == null || setPosition == null) return;
+
+    const handleMapClick = (event: mapboxgl.MapMouseEvent) => {
       setPosition(event.lngLat, event, mapRef.current);
       // We should integrate this with the "easeToCenter" hook
       if (centerMarker) {
         mapRef.current?.flyTo({ center: event.lngLat, duration: 800 });
       }
-    }, // eslint-disable-next-line react-hooks/exhaustive-deps
-    [mapRef.current, setPosition]
-  );
+    };
+
+    map.on("click", handleMapClick);
 
-  useEffect(() => {
-    const map = mapRef.current;
-    if (map != null && setPosition != null) {
-      map.on("click", handleMapClick);
-    }
     return () => {
       map?.off("click", handleMapClick);
     };
-  }, [mapRef.current, setPosition]);
+  }, [setPosition, isInitialized]);
 
   return null;
 }

package/src/location-panel/header.ts

@@ -11,14 +11,16 @@ import {
 
 const h = hyper.styled(styles);
 
-function PositionButton({ position, showCopyLink = false }) {
+function PositionButton({ position, bounds, showCopyLink = false }) {
   const focusState = useFocusState(position);
 
   const copyLinkIsVisible = isCentered(focusState) && showCopyLink;
 
   return h("div.position-controls", [
-    h(LocationFocusButton, { location: position, focusState }, []),
-    h.if(copyLinkIsVisible)(CopyLinkButton, { itemName: "position" }),
+    h(LocationFocusButton, { location: position, bounds, focusState }, []),
+    h.if(copyLinkIsVisible && position != null)(CopyLinkButton, {
+      itemName: "position",
+    }),
   ]);
 }
 
@@ -66,26 +68,39 @@ function CopyLinkButton({ itemName, children, onClick, ...rest }) {
 }
 
 export interface InfoDrawerHeaderProps {
-  onClose: () => void;
-  position: mapboxgl.LngLat;
+  onClose?: () => void;
+  position?: mapboxgl.LngLat;
   zoom?: number;
   elevation?: number;
   showCopyPositionButton?: boolean;
+  bounds?: mapboxgl.LngLatBounds;
 }
 
 export function InfoDrawerHeader(props: InfoDrawerHeaderProps) {
   const {
     onClose,
     position,
+    bounds,
     zoom = 7,
     elevation,
     showCopyPositionButton,
+    children,
   } = props;
 
+  let leftButton = null;
+  if (bounds != null || position != null) {
+    leftButton = h(PositionButton, {
+      position,
+      bounds,
+      showCopyLink: showCopyPositionButton,
+    });
+  }
+
   return h("header.location-panel-header", [
-    h(PositionButton, { position, showCopyLink: showCopyPositionButton }),
+    leftButton,
+    children,
     h("div.spacer"),
-    h(LngLatCoords, {
+    h.if(position != null)(LngLatCoords, {
       position,
       zoom,
       className: "infodrawer-header-item",
@@ -94,6 +109,10 @@ export function InfoDrawerHeader(props: InfoDrawerHeaderProps) {
       elevation,
       className: "infodrawer-header-item",
     }),
-    h(Button, { minimal: true, icon: "cross", onClick: onClose }),
+    h.if(onClose != null)(Button, {
+      minimal: true,
+      icon: "cross",
+      onClick: onClose,
+    }),
   ]);
 }

package/src/location-panel/index.ts

@@ -1,15 +1,15 @@
-import { Card } from "@blueprintjs/core";
 import hyper from "@macrostrat/hyper";
 import { InfoDrawerHeader, InfoDrawerHeaderProps } from "./header";
 import classNames from "classnames";
 import styles from "./main.module.sass";
 import { ErrorBoundary } from "@macrostrat/ui-components";
+import { PanelCard } from "../container";
 
 const h = hyper.styled(styles);
 
 export function InfoDrawerContainer(props) {
   const className = classNames("infodrawer", props.className);
-  return h(Card, { ...props, className });
+  return h(PanelCard, { ...props, className });
 }
 
 interface BaseInfoDrawerProps extends InfoDrawerHeaderProps {
@@ -42,6 +42,8 @@ export function BaseInfoDrawer(props: BaseInfoDrawerProps) {
   ]);
 }
 
+export const DetailsPanel = BaseInfoDrawer;
+
 export function LocationPanel(props) {
   const { children, className, loading = false, ...rest } = props;
   const cls = classNames("location-panel", className, { loading });

package/src/location-panel/main.module.sass

@@ -10,6 +10,7 @@
   flex-direction: row
   align-items: center
   gap: 1em
+  min-height: 40px
   border-bottom: 1px solid var(--panel-rule-color)
 
   .spacer
@@ -21,6 +22,12 @@
   .position-controls :global(.bp5-button)
     font-size: 12px !important
 
+  // Text elements should
+  h1, h2, h3, h4, h5, h6, p
+    margin: 0
+    &:first-child
+      margin-left: 10px
+
 .infodrawer-header-item
   font-size: 12px
 

package/src/main.module.sass

@@ -5,6 +5,7 @@
   width: 100%
   height: 100%
   overflow: hidden
+  --map-panel-border-radius: 4px
 
   &.show-panel-outlines
     .map-view-container
@@ -101,7 +102,7 @@
     position: absolute
 
 
-.context-panel-holder>:global(.bp5-card)
+.context-panel-holder > :global(.bp5-card)
   padding: 10px
   background-color: var(--panel-background-color)
 
@@ -109,6 +110,7 @@
   padding: 10px
   background-color: var(--panel-background-color)
   overflow: hidden
+  border-radius: var(--map-panel-border-radius)
 
   & > :last-child
     margin-bottom: 0
@@ -394,6 +396,7 @@
     display: flex
     flex-direction: column
 
+
     &.adaptive-width
       width: var(--map-context-stack-width, none)
       max-width: var(--map-context-stack-max-width, none)

package/src/map-view/index.ts

@@ -116,45 +116,41 @@ export function MapView(props: MapViewProps) {
   const ref = useRef<HTMLDivElement>();
   const parentRef = useRef<HTMLDivElement>();
 
-  // Keep track of map position for reloads
-  useEffect(() => {
-    console.log("Map updated", mapRef.current);
-  }, [mapRef.current]);
-
   useEffect(() => {
     if (style == null) return;
-    if (mapRef.current != null) {
+    let map = mapRef.current;
+    if (map != null) {
       console.log("Setting style", style);
-      mapRef.current.setStyle(style);
-      return;
+      map.setStyle(style);
+    } else {
+      console.log("Initializing map", style);
+      const map = initializeMap(ref.current, {
+        style,
+        projection,
+        mapPosition,
+        transformRequest,
+        ...rest,
+      });
+      dispatch({ type: "set-map", payload: map });
+      map.setPadding(getMapPadding(ref, parentRef), { animate: false });
+      onMapLoaded?.(map);
     }
-    const map = initializeMap(ref.current, {
-      style,
-      projection,
-      mapPosition,
-      ...rest,
-    });
-    map.setPadding(getMapPadding(ref, parentRef), { animate: false });
-    map.on("style.load", () => {
+
+    const loadCallback = () => {
       onStyleLoaded?.(map);
       dispatch({ type: "set-style-loaded", payload: true });
-    });
-    onMapLoaded?.(map);
-    dispatch({ type: "set-map", payload: map });
-  }, [style]);
+    };
 
-  // Map style updating
-  // useEffect(() => {
-  //   if (mapRef?.current == null || style == null) return;
-  //   mapRef?.current?.setStyle(style);
-  // }, [mapRef.current, style]);
-
-  // Set map position if it changes
-  // useEffect(() => {
-  //   const map = mapRef.current;
-  //   if (map == null || mapPosition == null) return;
-  //   setMapPosition(map, mapPosition);
-  // }, [mapPosition]);
+    map = mapRef.current;
+    if (map.isStyleLoaded()) {
+      // Catch a race condition where the style is loaded before the callback is set
+      loadCallback();
+    }
+    map.on("style.load", loadCallback);
+    return () => {
+      map.off("style.load", loadCallback);
+    };
+  }, [style]);
 
   const _computedMapPosition = useMapPosition();
   const { mapUse3D, mapIsRotated } = mapViewInfo(_computedMapPosition);