@macrostrat/column-views 3.2.2 → 3.3.0

package/dist/maps/column-navigation/mapbox/index.js

@@ -1,14 +1,19 @@
-import { useMapStyleOperator } from "@macrostrat/mapbox-react";
+import { useMapStyleOperator, useMapRef } from "@macrostrat/mapbox-react";
 import h from "@macrostrat/hyper";
-import { useMemo, useRef } from "react";
-import { setGeoJSON } from "@macrostrat/mapbox-utils";
+import { useCallback, useRef, useMemo, useEffect } from "react";
 import { ColumnNavigationProvider, useColumnNavigationStore } from "./state.js";
+import { InsetMap } from "../../inset-map/index.js";
 import { geoCentroid } from "d3-geo";
-import { buildKeyboardNavigationStyle, ColumnKeyboardNavigation } from "./keyboard-navigation.js";
-import { buildColumnsStyle } from "../../_shared/styles.js";
-import { InsetMap } from "../../_shared/inset-map.js";
+import { ColumnKeyboardNavigation } from "./keyboard-navigation.js";
+import { SelectedColumnOverlay, BaseColumnsLayer } from "../../layers/columns.js";
 function ColumnNavigationMap(props) {
   const {
+    padding = 50,
+    children,
+    columnColor,
+    showTriangulation,
+    triangulationColor,
+    keyboardNavigation = true,
     columns,
     columnIDs,
     onSelectColumn,
@@ -16,160 +21,193 @@ function ColumnNavigationMap(props) {
     selectedColumn,
     hoveredColumn,
     projectID,
-    children,
     inProcess,
     ...rest
   } = props;
-  return h(
-    ColumnNavigationProvider,
-    {
-      columns,
-      columnIDs,
-      onSelectColumn,
-      onHoverColumn,
-      selectedColumn,
-      hoveredColumn,
-      projectID,
-      inProcess
-    },
-    h(_ColumnNavigationMap, props)
-  );
-}
-function _ColumnNavigationMap(props) {
-  const {
-    padding = 50,
-    children,
-    columnColor,
-    showTriangulation,
-    triangulationColor,
-    keyboardNavigation = true,
-    ...rest
-  } = props;
-  const overlayStyles = useMemo(() => {
-    let styles = [buildColumnsStyle(columnColor)];
-    if (showTriangulation) {
-      styles.push(buildKeyboardNavigationStyle(triangulationColor));
-    }
-    return styles;
-  }, [columnColor, showTriangulation, triangulationColor]);
   return h(
     InsetMap,
     {
       ...rest,
       boxZoom: false,
-      dragRotate: false,
-      overlayStyles
+      dragRotate: false
     },
     [
-      h(ColumnsLayer),
-      children,
-      h.if(keyboardNavigation)(ColumnKeyboardNavigation, { showTriangulation })
+      h(ColumnsNavigationLayer, {
+        color: columnColor,
+        columns,
+        columnIDs,
+        onSelectColumn,
+        onHoverColumn,
+        selectedColumn,
+        hoveredColumn,
+        projectID,
+        inProcess,
+        keyboardNavigation,
+        showTriangulation,
+        triangulationColor
+      }),
+      children
     ]
   );
 }
-function ColumnsLayer({ enabled = true }) {
+function ColumnsNavigationLayer(props) {
+  const {
+    enabled,
+    color,
+    keyboardNavigation,
+    showTriangulation,
+    triangulationColor,
+    ...providerProps
+  } = props;
+  return h(ColumnNavigationProvider, providerProps, [
+    h(_ColumnsNavigationLayer, { enabled, color }),
+    h.if(keyboardNavigation)(ColumnKeyboardNavigation, {
+      showTriangulation,
+      triangulationColor
+    })
+  ]);
+}
+const columnLayers = ["columns-points", "columns-fill"];
+function _ColumnsNavigationLayer({ enabled = true, color }) {
   const columns = useColumnNavigationStore((state) => state.columns);
-  const selectedColumn = useColumnNavigationStore(
+  const selectedColumnID = useColumnNavigationStore(
     (state) => state.selectedColumn
   );
-  const hoveredColumn = useColumnNavigationStore(
-    (state) => state.hoveredColumn
-  );
   const selectColumn = useColumnNavigationStore((state) => state.selectColumn);
   const setHoveredColumn = useColumnNavigationStore(
     (state) => state.setHoveredColumn
   );
+  const onHover = useCallback(
+    (event) => setHoveredColumn(event.features?.[0]?.id),
+    [setHoveredColumn]
+  );
+  const onSelectColumn = useCallback(
+    (column) => selectColumn(column.id),
+    [selectColumn]
+  );
+  const selectedColumnFeature = useMemo(() => {
+    if (columns == null || selectedColumnID == null) return null;
+    return columns.find((d) => d.id == selectedColumnID);
+  }, [selectedColumnID, columns]);
+  return h([
+    h(BaseColumnsLayer, { enabled, color, columns }),
+    h(ColumnSelectionManager, {
+      selectedColumn: selectedColumnFeature,
+      onSelectColumn
+    }),
+    h(ColumnHoverInteraction, { onHover })
+  ]);
+}
+function ColumnSelectionManager({
+  selectedColumn,
+  onSelectColumn,
+  centerOnSelect = true
+}) {
+  const onClick = useCallback(
+    (event) => {
+      if (event.features.length == 0) return;
+      const selectedColumn2 = event.features[0];
+      onSelectColumn(selectedColumn2);
+    },
+    [onSelectColumn]
+  );
+  return h([
+    h.if(centerOnSelect)(SelectedColumnCenterer, {
+      selectedColumn
+    }),
+    h(SelectedColumnOverlay, { selectedColumn }),
+    h(ClickInteraction, {
+      onClick,
+      layers: columnLayers
+    })
+  ]);
+}
+function ColumnHoverInteraction({ onHover }) {
+  return h(HoverInteraction, { onHover, layers: columnLayers });
+}
+function ClickInteraction({ onClick, layers }) {
   useMapStyleOperator(
     (map) => {
-      if (columns == null) {
-        return;
-      }
-      const data = {
-        type: "FeatureCollection",
-        features: columns
+      map.on("click", layers, onClick);
+      return () => {
+        map.off("click", layers, onClick);
       };
-      setGeoJSON(map, "columns", data);
+    },
+    [layers, onClick]
+  );
+  return null;
+}
+function HoverInteraction({ onHover, layers }) {
+  const hoveredFeaturesRef = useRef([]);
+  const updateFeatureState = useCallback((map, features) => {
+    for (const f of hoveredFeaturesRef.current) {
+      map.setFeatureState(
+        { source: f.source, id: f.id, sourceLayer: f.sourceLayer },
+        { hover: false }
+      );
+    }
+    for (const f of features) {
+      map.setFeatureState(
+        { source: f.source, id: f.id, sourceLayer: f.sourceLayer },
+        { hover: true }
+      );
+    }
+    hoveredFeaturesRef.current = features;
+  }, []);
+  useMapStyleOperator(
+    (map) => {
       const mouseMove = (event) => {
         if (event.features.length == 0) return;
-        const hoveredFeature = event.features[0];
-        setHoveredColumn(hoveredFeature.id);
+        onHover?.(event);
+        updateFeatureState(map, event.features);
         map.getCanvas().style.cursor = "pointer";
       };
-      const mouseLeave = () => {
-        setHoveredColumn(null);
+      const mouseLeave = (event) => {
+        onHover?.(event);
+        updateFeatureState(map, event.features ?? []);
         map.getCanvas().style.cursor = "";
       };
-      const clickHandler = (event) => {
-        if (event.features.length == 0) return;
-        const selectedColumn2 = event.features[0];
-        const id = selectedColumn2.id;
-        selectColumn(id);
-      };
-      const layers = ["columns-points", "columns-fill"];
       map.on("mousemove", layers, mouseMove);
       map.on("mouseleave", layers, mouseLeave);
-      map.on("click", layers, clickHandler);
       return () => {
         map.off("mouseenter", layers, mouseMove);
         map.off("mouseleave", layers, mouseLeave);
-        map.off("click", layers, clickHandler);
       };
     },
-    [columns, enabled]
+    [layers, onHover]
   );
-  const hoveredColumnRef = useRef(null);
-  useMapStyleOperator(
-    (map) => {
-      const prevHoveredColumn = hoveredColumnRef.current;
-      if (hoveredColumn == prevHoveredColumn) return;
-      if (prevHoveredColumn != null) {
-        map.setFeatureState(
-          { source: "columns", id: prevHoveredColumn },
-          { hover: false }
-        );
-      }
-      hoveredColumnRef.current = hoveredColumn;
-      map.setFeatureState(
-        { source: "columns", id: hoveredColumn },
-        { hover: true }
-      );
-    },
-    [hoveredColumn, columns]
-  );
-  const selectedColumnRef = useRef(null);
+  return null;
+}
+function SelectedColumnCenterer({
+  selectedColumn,
+  easeDuration = 500
+}) {
+  const columnCenter = useMemo(() => {
+    const columnGeometry = selectedColumn?.geometry;
+    if (columnGeometry == null) return null;
+    return geoCentroid(columnGeometry);
+  }, [selectedColumn]);
+  const mapRef = useMapRef();
+  const map = mapRef.current;
   const initialRenderRef = useRef(true);
-  useMapStyleOperator(
-    (map) => {
-      if (columns == null) return;
-      const prevSelectedColumn = selectedColumnRef.current;
-      if (selectedColumn == prevSelectedColumn) return;
-      if (prevSelectedColumn != null) {
-        map.setFeatureState(
-          { source: "columns", id: prevSelectedColumn },
-          { selected: false }
-        );
-      }
-      selectedColumnRef.current = selectedColumn;
-      map.setFeatureState(
-        { source: "columns", id: selectedColumn },
-        { selected: true }
-      );
-      const columnGeometry = columns.find(
-        (d) => d.id == selectedColumn
-      )?.geometry;
-      if (columnGeometry == null) return;
-      const center = geoCentroid(columnGeometry);
-      const isInitialRender = initialRenderRef.current;
-      map.easeTo({ center }, { duration: isInitialRender ? 0 : 500 });
-      if (isInitialRender) {
-        initialRenderRef.current = false;
-      }
-    },
-    [selectedColumn, columns]
-  );
+  useEffect(() => {
+    if (map == null) return;
+    const isInitialRender = initialRenderRef.current;
+    if (isInitialRender) initialRenderRef.current = false;
+    if (columnCenter == null) return;
+    if (isInitialRender) {
+      map.setCenter(columnCenter);
+      initialRenderRef.current = false;
+    } else {
+      map.easeTo({ center: columnCenter }, { duration: easeDuration });
+    }
+  }, [mapRef.current, columnCenter]);
   return null;
 }
 export {
-  ColumnNavigationMap
+  ColumnHoverInteraction,
+  ColumnNavigationMap,
+  ColumnSelectionManager,
+  ColumnsNavigationLayer
 };
 //# sourceMappingURL=index.js.map

package/dist/maps/column-navigation/mapbox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/maps/column-navigation/mapbox/index.ts"],"sourcesContent":["import { useMapStyleOperator } from \"@macrostrat/mapbox-react\";\nimport h from \"@macrostrat/hyper\";\nimport { FeatureCollection } from \"geojson\";\nimport { ReactNode, useMemo, useRef } from \"react\";\nimport { buildColumnsStyle, InsetMapProps } from \"../../_shared\";\nimport { setGeoJSON } from \"@macrostrat/mapbox-utils\";\n\nimport {\n  ColumnNavigationProvider,\n  NavigationProviderProps,\n  useColumnNavigationStore,\n} from \"./state\";\nimport { InsetMap } from \"../../_shared\";\nimport { geoCentroid } from \"d3-geo\";\nimport {\n  ColumnKeyboardNavigation,\n  buildKeyboardNavigationStyle,\n} from \"./keyboard-navigation\";\n\nexport interface ColumnNavigationMapProps extends InsetMapProps {\n  padding?: number;\n  children?: ReactNode;\n  accessToken?: string;\n  selectedColumn?: number;\n  hoveredColumn?: number;\n  onSelectColumn?: (colID: number | null) => void;\n  onHoverColumn?: (colID: number | null) => void;\n  showTriangulation?: boolean;\n  columnColor?: string;\n  triangulationColor?: string;\n  keyboardNavigation?: boolean;\n}\n\nexport function ColumnNavigationMap(\n  props: ColumnNavigationMapProps & NavigationProviderProps,\n) {\n  const {\n    columns,\n    columnIDs,\n    onSelectColumn,\n    onHoverColumn,\n    selectedColumn,\n    hoveredColumn,\n    projectID,\n    children,\n    inProcess,\n    ...rest\n  } = props;\n\n  return h(\n    ColumnNavigationProvider,\n    {\n      columns,\n      columnIDs,\n      onSelectColumn,\n      onHoverColumn,\n      selectedColumn,\n      hoveredColumn,\n      projectID,\n      inProcess,\n    },\n    h(_ColumnNavigationMap, props),\n  );\n}\n\nfunction _ColumnNavigationMap(props: ColumnNavigationMapProps) {\n  const {\n    padding = 50,\n    children,\n    columnColor,\n    showTriangulation,\n    triangulationColor,\n    keyboardNavigation = true,\n    ...rest\n  } = props;\n\n  const overlayStyles = useMemo(() => {\n    let styles: any[] = [buildColumnsStyle(columnColor)];\n    if (showTriangulation) {\n      styles.push(buildKeyboardNavigationStyle(triangulationColor));\n    }\n    return styles;\n  }, [columnColor, showTriangulation, triangulationColor]);\n\n  return h(\n    InsetMap,\n    {\n      ...rest,\n      boxZoom: false,\n      dragRotate: false,\n      overlayStyles,\n    },\n    [\n      h(ColumnsLayer),\n      children,\n      h.if(keyboardNavigation)(ColumnKeyboardNavigation, { showTriangulation }),\n    ],\n  );\n}\n\nfunction ColumnsLayer({ enabled = true }) {\n  const columns = useColumnNavigationStore((state) => state.columns);\n  const selectedColumn = useColumnNavigationStore(\n    (state) => state.selectedColumn,\n  );\n  const hoveredColumn = useColumnNavigationStore(\n    (state) => state.hoveredColumn,\n  );\n  const selectColumn = useColumnNavigationStore((state) => state.selectColumn);\n  const setHoveredColumn = useColumnNavigationStore(\n    (state) => state.setHoveredColumn,\n  );\n\n  useMapStyleOperator(\n    (map) => {\n      if (columns == null) {\n        return;\n      }\n      const data: FeatureCollection = {\n        type: \"FeatureCollection\",\n        features: columns,\n      };\n\n      setGeoJSON(map, \"columns\", data);\n\n      const mouseMove = (event) => {\n        if (event.features.length == 0) return;\n        const hoveredFeature = event.features[0];\n        setHoveredColumn(hoveredFeature.id);\n        map.getCanvas().style.cursor = \"pointer\";\n      };\n      const mouseLeave = () => {\n        setHoveredColumn(null);\n        map.getCanvas().style.cursor = \"\";\n      };\n\n      const clickHandler = (event) => {\n        if (event.features.length == 0) return;\n        const selectedColumn = event.features[0];\n        const id = selectedColumn.id;\n        selectColumn(id);\n      };\n\n      // Setup hover styles on map\n      const layers = [\"columns-points\", \"columns-fill\"];\n      map.on(\"mousemove\", layers, mouseMove);\n      map.on(\"mouseleave\", layers, mouseLeave);\n      map.on(\"click\", layers, clickHandler);\n\n      return () => {\n        map.off(\"mouseenter\", layers, mouseMove);\n        map.off(\"mouseleave\", layers, mouseLeave);\n        map.off(\"click\", layers, clickHandler);\n      };\n    },\n    [columns, enabled],\n  );\n\n  const hoveredColumnRef = useRef(null);\n  useMapStyleOperator(\n    (map) => {\n      const prevHoveredColumn = hoveredColumnRef.current;\n      if (hoveredColumn == prevHoveredColumn) return;\n      if (prevHoveredColumn != null) {\n        // Deselect previous column\n        map.setFeatureState(\n          { source: \"columns\", id: prevHoveredColumn },\n          { hover: false },\n        );\n      }\n      hoveredColumnRef.current = hoveredColumn;\n      // Select the current column\n      map.setFeatureState(\n        { source: \"columns\", id: hoveredColumn },\n        { hover: true },\n      );\n    },\n    [hoveredColumn, columns],\n  );\n\n  /** Set feature state for selected columns */\n  const selectedColumnRef = useRef(null);\n  const initialRenderRef = useRef(true);\n  useMapStyleOperator(\n    (map) => {\n      if (columns == null) return;\n      const prevSelectedColumn = selectedColumnRef.current;\n      if (selectedColumn == prevSelectedColumn) return;\n      if (prevSelectedColumn != null) {\n        // Deselect previous column\n        map.setFeatureState(\n          { source: \"columns\", id: prevSelectedColumn },\n          { selected: false },\n        );\n      }\n\n      selectedColumnRef.current = selectedColumn;\n\n      // Select the current column\n      map.setFeatureState(\n        { source: \"columns\", id: selectedColumn },\n        { selected: true },\n      );\n\n      // Center the selected column\n      const columnGeometry = columns.find(\n        (d) => d.id == selectedColumn,\n      )?.geometry;\n      if (columnGeometry == null) return;\n      const center = geoCentroid(columnGeometry);\n\n      const isInitialRender = initialRenderRef.current;\n\n      map.easeTo({ center }, { duration: isInitialRender ? 0 : 500 });\n      if (isInitialRender) {\n        initialRenderRef.current = false;\n      }\n    },\n    [selectedColumn, columns],\n  );\n\n  return null;\n}\n"],"names":["selectedColumn"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/maps/column-navigation/mapbox/index.ts"],"sourcesContent":["import { useMapRef, useMapStyleOperator } from \"@macrostrat/mapbox-react\";\nimport h from \"@macrostrat/hyper\";\nimport { ReactNode, useCallback, useEffect, useMemo, useRef } from \"react\";\n\nimport {\n  ColumnNavigationProvider,\n  NavigationProviderProps,\n  useColumnNavigationStore,\n} from \"./state\";\nimport { InsetMap, type InsetMapProps } from \"../../inset-map\";\nimport { geoCentroid } from \"d3-geo\";\nimport { BaseColumnsLayer, SelectedColumnOverlay } from \"../../layers\";\nimport { ColumnKeyboardNavigation } from \"./keyboard-navigation\";\nimport type { ColumnFeature } from \"../../layers\";\n\nexport interface ColumnNavigationMapProps extends InsetMapProps {\n  padding?: number;\n  children?: ReactNode;\n  accessToken?: string;\n  selectedColumn?: number;\n  hoveredColumn?: number;\n  onSelectColumn?: (colID: number | null) => void;\n  onHoverColumn?: (colID: number | null) => void;\n  showTriangulation?: boolean;\n  columnColor?: string;\n}\n\nexport function ColumnNavigationMap(\n  props: ColumnNavigationMapProps & NavigationProviderProps,\n) {\n  const {\n    padding = 50,\n    children,\n    columnColor,\n    showTriangulation,\n    triangulationColor,\n    keyboardNavigation = true,\n    columns,\n    columnIDs,\n    onSelectColumn,\n    onHoverColumn,\n    selectedColumn,\n    hoveredColumn,\n    projectID,\n    inProcess,\n    ...rest\n  } = props;\n\n  return h(\n    InsetMap,\n    {\n      ...rest,\n      boxZoom: false,\n      dragRotate: false,\n    },\n    [\n      h(ColumnsNavigationLayer, {\n        color: columnColor,\n        columns,\n        columnIDs,\n        onSelectColumn,\n        onHoverColumn,\n        selectedColumn,\n        hoveredColumn,\n        projectID,\n        inProcess,\n        keyboardNavigation,\n        showTriangulation,\n        triangulationColor,\n      }),\n      children,\n    ],\n  );\n}\n\ninterface ColumnLayerProps {\n  enabled?: boolean;\n  color?: string;\n}\n\ninterface ColumnKeyboardNavigationProps {\n  triangulationColor?: string;\n  keyboardNavigation?: boolean;\n  showTriangulation?: boolean;\n}\n\nexport function ColumnsNavigationLayer(\n  props: NavigationProviderProps &\n    ColumnLayerProps &\n    ColumnKeyboardNavigationProps,\n) {\n  const {\n    enabled,\n    color,\n    keyboardNavigation,\n    showTriangulation,\n    triangulationColor,\n    ...providerProps\n  } = props;\n\n  return h(ColumnNavigationProvider, providerProps, [\n    h(_ColumnsNavigationLayer, { enabled, color }),\n    h.if(keyboardNavigation)(ColumnKeyboardNavigation, {\n      showTriangulation,\n      triangulationColor,\n    }),\n  ]);\n}\n\nconst columnLayers = [\"columns-points\", \"columns-fill\"];\n\nfunction _ColumnsNavigationLayer({ enabled = true, color }) {\n  const columns = useColumnNavigationStore((state) => state.columns);\n  const selectedColumnID = useColumnNavigationStore(\n    (state) => state.selectedColumn,\n  );\n  const selectColumn = useColumnNavigationStore((state) => state.selectColumn);\n  const setHoveredColumn = useColumnNavigationStore(\n    (state) => state.setHoveredColumn,\n  );\n\n  const onHover = useCallback(\n    (event) => setHoveredColumn(event.features?.[0]?.id),\n    [setHoveredColumn],\n  );\n\n  /** Convert features into column IDs to pass to the selection manager */\n  const onSelectColumn = useCallback(\n    (column) => selectColumn(column.id),\n    [selectColumn],\n  );\n\n  const selectedColumnFeature = useMemo(() => {\n    if (columns == null || selectedColumnID == null) return null;\n    return columns.find((d) => d.id == selectedColumnID);\n  }, [selectedColumnID, columns]);\n\n  return h([\n    h(BaseColumnsLayer, { enabled, color, columns }),\n    h(ColumnSelectionManager, {\n      selectedColumn: selectedColumnFeature,\n      onSelectColumn,\n    }),\n    h(ColumnHoverInteraction, { onHover }),\n  ]);\n}\n\nexport function ColumnSelectionManager({\n  selectedColumn,\n  onSelectColumn,\n  centerOnSelect = true,\n}: {\n  selectedColumn: ColumnFeature;\n  onSelectColumn: (column: ColumnFeature) => void;\n  centerOnSelect?: boolean;\n}) {\n  const onClick = useCallback(\n    (event) => {\n      if (event.features.length == 0) return;\n      const selectedColumn = event.features[0];\n      onSelectColumn(selectedColumn);\n    },\n    [onSelectColumn],\n  );\n\n  return h([\n    h.if(centerOnSelect)(SelectedColumnCenterer, {\n      selectedColumn,\n    }),\n    h(SelectedColumnOverlay, { selectedColumn }),\n    h(ClickInteraction, {\n      onClick,\n      layers: columnLayers,\n    }),\n  ]);\n}\n\nexport function ColumnHoverInteraction({ onHover }) {\n  return h(HoverInteraction, { onHover, layers: columnLayers });\n}\n\nfunction ClickInteraction({ onClick, layers }) {\n  useMapStyleOperator(\n    (map) => {\n      // Setup hover styles on map\n      map.on(\"click\", layers, onClick);\n      return () => {\n        map.off(\"click\", layers, onClick);\n      };\n    },\n    [layers, onClick],\n  );\n  return null;\n}\n\nfunction HoverInteraction({ onHover, layers }) {\n  const hoveredFeaturesRef = useRef([]);\n  const updateFeatureState = useCallback((map, features) => {\n    // Reset hover state for previously hovered features\n    for (const f of hoveredFeaturesRef.current) {\n      map.setFeatureState(\n        { source: f.source, id: f.id, sourceLayer: f.sourceLayer },\n        { hover: false },\n      );\n    }\n    // Set hover state for new features\n    for (const f of features) {\n      map.setFeatureState(\n        { source: f.source, id: f.id, sourceLayer: f.sourceLayer },\n        { hover: true },\n      );\n    }\n    hoveredFeaturesRef.current = features;\n  }, []);\n\n  useMapStyleOperator(\n    (map) => {\n      const mouseMove = (event) => {\n        if (event.features.length == 0) return;\n        onHover?.(event);\n        updateFeatureState(map, event.features);\n        map.getCanvas().style.cursor = \"pointer\";\n      };\n      const mouseLeave = (event) => {\n        onHover?.(event);\n        updateFeatureState(map, event.features ?? []);\n        map.getCanvas().style.cursor = \"\";\n      };\n\n      // Setup hover styles on map\n      map.on(\"mousemove\", layers, mouseMove);\n      map.on(\"mouseleave\", layers, mouseLeave);\n\n      return () => {\n        map.off(\"mouseenter\", layers, mouseMove);\n        map.off(\"mouseleave\", layers, mouseLeave);\n      };\n    },\n    [layers, onHover],\n  );\n  return null;\n}\n\nfunction SelectedColumnCenterer({\n  selectedColumn,\n  easeDuration = 500,\n}: {\n  selectedColumn: ColumnFeature;\n  easeDuration?: number;\n}) {\n  const columnCenter = useMemo(() => {\n    const columnGeometry = selectedColumn?.geometry;\n    if (columnGeometry == null) return null;\n    return geoCentroid(columnGeometry);\n  }, [selectedColumn]);\n\n  const mapRef = useMapRef();\n  const map = mapRef.current;\n  const initialRenderRef = useRef(true);\n  // Center the map on the selected column when it changes\n  useEffect(() => {\n    if (map == null) return;\n    const isInitialRender = initialRenderRef.current;\n    if (isInitialRender) initialRenderRef.current = false;\n    // If this is the first render of the map, jump to the location. Otherwise, ease to it.\n    if (columnCenter == null) return;\n    if (isInitialRender) {\n      map.setCenter(columnCenter);\n      initialRenderRef.current = false;\n    } else {\n      map.easeTo({ center: columnCenter }, { duration: easeDuration });\n    }\n  }, [mapRef.current, columnCenter]);\n\n  return null;\n}\n"],"names":["selectedColumn"],"mappings":"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"}

package/dist/maps/column-navigation/mapbox/keyboard-navigation.cjs

@@ -6,7 +6,7 @@ const mapboxReact = require("@macrostrat/mapbox-react");
 const state = require("./state.cjs");
 const keyboardNavigation = require("../utils/keyboard-navigation.cjs");
 function ColumnKeyboardNavigation(props) {
-  const { showTriangulation = false } = props;
+  const { showTriangulation = false, triangulationColor } = props;
   const columns = state.useColumnNavigationStore((state2) => state2.columns);
   const col_id = state.useColumnNavigationStore((state2) => state2.selectedColumn);
   const selectColumn = state.useColumnNavigationStore((state2) => state2.selectColumn);
@@ -16,6 +16,12 @@ function ColumnKeyboardNavigation(props) {
   }, [columns]);
   const mapRef = mapboxReact.useMapRef();
   const map = mapRef.current;
+  mapboxReact.useOverlayStyle(() => {
+    if (!showTriangulation) return null;
+    return buildKeyboardNavigationStyle(
+      triangulationColor
+    );
+  }, [triangulationColor, showTriangulation]);
   const keyMapping = React.useMemo(() => {
     if (columns == null || voronoi == null || map == null) return null;
     const projection = (d) => {

package/dist/maps/column-navigation/mapbox/keyboard-navigation.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard-navigation.cjs","sources":["../../../../src/maps/column-navigation/mapbox/keyboard-navigation.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo } from \"react\";\nimport { buildGeoJSONSource, setGeoJSON } from \"@macrostrat/mapbox-utils\";\nimport { useMapRef, useMapStyleOperator } from \"@macrostrat/mapbox-react\";\nimport { useColumnNavigationStore } from \"./state\";\nimport {\n  buildTriangulation,\n  buildKeyMapping,\n} from \"../utils/keyboard-navigation\";\n\ninterface KeyboardNavProps {\n  showTriangulation: boolean;\n}\n\nexport function ColumnKeyboardNavigation(props: KeyboardNavProps) {\n  /** Keyboard navigation of columns using a Delaunay triangulation */\n  const { showTriangulation = false } = props;\n  const columns = useColumnNavigationStore((state) => state.columns);\n  const col_id = useColumnNavigationStore((state) => state.selectedColumn);\n  const selectColumn = useColumnNavigationStore((state) => state.selectColumn);\n\n  const voronoi = useMemo(() => {\n    if (!columns || columns.length == 0) return null;\n    return buildTriangulation(columns);\n  }, [columns]);\n\n  const mapRef = useMapRef();\n  const map = mapRef.current;\n\n  const keyMapping = useMemo(() => {\n    if (columns == null || voronoi == null || map == null) return null;\n\n    const projection = (d) => {\n      const pt = map.project(d);\n      return [pt.x, pt.y];\n    };\n\n    const currentIndex = columns.findIndex(\n      (d) => d.properties.col_id == col_id,\n    );\n\n    const neighbors = voronoi.tri.delaunay.neighbors[currentIndex];\n    return buildKeyMapping(\n      neighbors,\n      voronoi.centroids,\n      currentIndex,\n      projection,\n    );\n  }, [col_id, columns, voronoi, map]);\n\n  const onKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (keyMapping == null) return;\n      const nextColumnIx = keyMapping[event.which];\n      if (nextColumnIx == null) return;\n      event.preventDefault();\n      event.stopPropagation();\n      // @ts-ignore\n      selectColumn(columns[nextColumnIx].id);\n      return false;\n    },\n    [keyMapping, selectColumn],\n  );\n\n  useEffect(() => {\n    if (map == null) return;\n    const canvas = map.getCanvas();\n    canvas.addEventListener(\"keydown\", onKeyDown);\n    return () => {\n      canvas.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [map, onKeyDown]);\n\n  useMapStyleOperator(\n    (map) => {\n      if (voronoi == null || !showTriangulation) return;\n      const { features } = voronoi.tri.links();\n\n      setGeoJSON(map, \"column-links\", {\n        type: \"FeatureCollection\",\n        features,\n      });\n    },\n    [voronoi, showTriangulation],\n  );\n\n  //if (neighbors == null) return null;\n  //const neighborFeatures = neighbors.map((d) => features[d]);\n\n  return null;\n}\n\nexport function buildKeyboardNavigationStyle(color: string = \"purple\") {\n  return {\n    sources: {\n      \"column-links\": buildGeoJSONSource(),\n      //neighbors: buildGeoJSONSource(),\n    },\n    layers: [\n      {\n        id: \"column-links\",\n        type: \"line\",\n        source: \"column-links\",\n        paint: {\n          \"line-color\": color,\n          \"line-width\": 1.5,\n        },\n      },\n      {\n        id: \"column-centers\",\n        type: \"circle\",\n        source: \"column-links\",\n        paint: {\n          \"circle-radius\": 2,\n          \"circle-color\": color,\n        },\n      },\n    ],\n  };\n}\n"],"names":["useColumnNavigationStore","state","useMemo","buildTriangulation","useMapRef","buildKeyMapping","useCallback","useEffect","useMapStyleOperator","map","setGeoJSON","buildGeoJSONSource"],"mappings":";;;;;;;AAaO,SAAS,yBAAyB,OAAyB;AAEhE,QAAM,EAAE,oBAAoB,MAAA,IAAU;AACtC,QAAM,UAAUA,MAAAA,yBAAyB,CAACC,WAAUA,OAAM,OAAO;AACjE,QAAM,SAASD,MAAAA,yBAAyB,CAACC,WAAUA,OAAM,cAAc;AACvE,QAAM,eAAeD,MAAAA,yBAAyB,CAACC,WAAUA,OAAM,YAAY;AAE3E,QAAM,UAAUC,MAAAA,QAAQ,MAAM;AAC5B,QAAI,CAAC,WAAW,QAAQ,UAAU,EAAG,QAAO;AAC5C,WAAOC,mBAAAA,mBAAmB,OAAO;AAAA,EACnC,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,SAASC,YAAAA,UAAA;AACf,QAAM,MAAM,OAAO;AAEnB,QAAM,aAAaF,MAAAA,QAAQ,MAAM;AAC/B,QAAI,WAAW,QAAQ,WAAW,QAAQ,OAAO,KAAM,QAAO;AAE9D,UAAM,aAAa,CAAC,MAAM;AACxB,YAAM,KAAK,IAAI,QAAQ,CAAC;AACxB,aAAO,CAAC,GAAG,GAAG,GAAG,CAAC;AAAA,IACpB;AAEA,UAAM,eAAe,QAAQ;AAAA,MAC3B,CAAC,MAAM,EAAE,WAAW,UAAU;AAAA,IAAA;AAGhC,UAAM,YAAY,QAAQ,IAAI,SAAS,UAAU,YAAY;AAC7D,WAAOG,mBAAAA;AAAAA,MACL;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ,GAAG,CAAC,QAAQ,SAAS,SAAS,GAAG,CAAC;AAElC,QAAM,YAAYC,MAAAA;AAAAA,IAChB,CAAC,UAAyB;AACxB,UAAI,cAAc,KAAM;AACxB,YAAM,eAAe,WAAW,MAAM,KAAK;AAC3C,UAAI,gBAAgB,KAAM;AAC1B,YAAM,eAAA;AACN,YAAM,gBAAA;AAEN,mBAAa,QAAQ,YAAY,EAAE,EAAE;AACrC,aAAO;AAAA,IACT;AAAA,IACA,CAAC,YAAY,YAAY;AAAA,EAAA;AAG3BC,QAAAA,UAAU,MAAM;AACd,QAAI,OAAO,KAAM;AACjB,UAAM,SAAS,IAAI,UAAA;AACnB,WAAO,iBAAiB,WAAW,SAAS;AAC5C,WAAO,MAAM;AACX,aAAO,oBAAoB,WAAW,SAAS;AAAA,IACjD;AAAA,EACF,GAAG,CAAC,KAAK,SAAS,CAAC;AAEnBC,cAAAA;AAAAA,IACE,CAACC,SAAQ;AACP,UAAI,WAAW,QAAQ,CAAC,kBAAmB;AAC3C,YAAM,EAAE,SAAA,IAAa,QAAQ,IAAI,MAAA;AAEjCC,kBAAAA,WAAWD,MAAK,gBAAgB;AAAA,QAC9B,MAAM;AAAA,QACN;AAAA,MAAA,CACD;AAAA,IACH;AAAA,IACA,CAAC,SAAS,iBAAiB;AAAA,EAAA;AAM7B,SAAO;AACT;AAEO,SAAS,6BAA6B,QAAgB,UAAU;AACrE,SAAO;AAAA,IACL,SAAS;AAAA,MACP,gBAAgBE,YAAAA,mBAAA;AAAA;AAAA,IAAmB;AAAA,IAGrC,QAAQ;AAAA,MACN;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,UACL,cAAc;AAAA,UACd,cAAc;AAAA,QAAA;AAAA,MAChB;AAAA,MAEF;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,UACL,iBAAiB;AAAA,UACjB,gBAAgB;AAAA,QAAA;AAAA,MAClB;AAAA,IACF;AAAA,EACF;AAEJ;;;"}
+{"version":3,"file":"keyboard-navigation.cjs","sources":["../../../../src/maps/column-navigation/mapbox/keyboard-navigation.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo } from \"react\";\nimport { buildGeoJSONSource, setGeoJSON } from \"@macrostrat/mapbox-utils\";\nimport {\n  useMapRef,\n  useMapStyleOperator,\n  useOverlayStyle,\n} from \"@macrostrat/mapbox-react\";\nimport { useColumnNavigationStore } from \"./state\";\nimport {\n  buildTriangulation,\n  buildKeyMapping,\n} from \"../utils/keyboard-navigation\";\nimport { StyleSpecification } from \"mapbox-gl\";\n\ninterface KeyboardNavProps {\n  showTriangulation: boolean;\n  triangulationColor?: string;\n}\n\nexport function ColumnKeyboardNavigation(props: KeyboardNavProps) {\n  /** Keyboard navigation of columns using a Delaunay triangulation */\n  const { showTriangulation = false, triangulationColor } = props;\n  const columns = useColumnNavigationStore((state) => state.columns);\n  const col_id = useColumnNavigationStore((state) => state.selectedColumn);\n  const selectColumn = useColumnNavigationStore((state) => state.selectColumn);\n\n  const voronoi = useMemo(() => {\n    if (!columns || columns.length == 0) return null;\n    return buildTriangulation(columns);\n  }, [columns]);\n\n  const mapRef = useMapRef();\n  const map = mapRef.current;\n\n  // Set up overlay style for triangulation\n  useOverlayStyle(() => {\n    if (!showTriangulation) return null;\n    return buildKeyboardNavigationStyle(\n      triangulationColor,\n    ) as Partial<StyleSpecification>;\n  }, [triangulationColor, showTriangulation]);\n\n  const keyMapping = useMemo(() => {\n    if (columns == null || voronoi == null || map == null) return null;\n\n    const projection = (d) => {\n      const pt = map.project(d);\n      return [pt.x, pt.y];\n    };\n\n    const currentIndex = columns.findIndex(\n      (d) => d.properties.col_id == col_id,\n    );\n\n    const neighbors = voronoi.tri.delaunay.neighbors[currentIndex];\n    return buildKeyMapping(\n      neighbors,\n      voronoi.centroids,\n      currentIndex,\n      projection,\n    );\n  }, [col_id, columns, voronoi, map]);\n\n  const onKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (keyMapping == null) return;\n      const nextColumnIx = keyMapping[event.which];\n      if (nextColumnIx == null) return;\n      event.preventDefault();\n      event.stopPropagation();\n      // @ts-ignore\n      selectColumn(columns[nextColumnIx].id);\n      return false;\n    },\n    [keyMapping, selectColumn],\n  );\n\n  useEffect(() => {\n    if (map == null) return;\n    const canvas = map.getCanvas();\n    canvas.addEventListener(\"keydown\", onKeyDown);\n    return () => {\n      canvas.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [map, onKeyDown]);\n\n  useMapStyleOperator(\n    (map) => {\n      if (voronoi == null || !showTriangulation) return;\n      const { features } = voronoi.tri.links();\n\n      setGeoJSON(map, \"column-links\", {\n        type: \"FeatureCollection\",\n        features,\n      });\n    },\n    [voronoi, showTriangulation],\n  );\n\n  //if (neighbors == null) return null;\n  //const neighborFeatures = neighbors.map((d) => features[d]);\n\n  return null;\n}\n\nexport function buildKeyboardNavigationStyle(color: string = \"purple\") {\n  return {\n    sources: {\n      \"column-links\": buildGeoJSONSource(),\n      //neighbors: buildGeoJSONSource(),\n    },\n    layers: [\n      {\n        id: \"column-links\",\n        type: \"line\",\n        source: \"column-links\",\n        paint: {\n          \"line-color\": color,\n          \"line-width\": 1.5,\n        },\n      },\n      {\n        id: \"column-centers\",\n        type: \"circle\",\n        source: \"column-links\",\n        paint: {\n          \"circle-radius\": 2,\n          \"circle-color\": color,\n        },\n      },\n    ],\n  } as Partial<StyleSpecification>;\n}\n"],"names":["useColumnNavigationStore","state","useMemo","buildTriangulation","useMapRef","useOverlayStyle","buildKeyMapping","useCallback","useEffect","useMapStyleOperator","map","setGeoJSON","buildGeoJSONSource"],"mappings":"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"}

package/dist/maps/column-navigation/mapbox/keyboard-navigation.d.ts

@@ -1,31 +1,8 @@
+import { StyleSpecification } from 'mapbox-gl';
 interface KeyboardNavProps {
     showTriangulation: boolean;
+    triangulationColor?: string;
 }
 export declare function ColumnKeyboardNavigation(props: KeyboardNavProps): any;
-export declare function buildKeyboardNavigationStyle(color?: string): {
-    sources: {
-        "column-links": import('mapbox-gl').GeoJSONSourceSpecification;
-    };
-    layers: ({
-        id: string;
-        type: string;
-        source: string;
-        paint: {
-            "line-color": string;
-            "line-width": number;
-            "circle-radius"?: undefined;
-            "circle-color"?: undefined;
-        };
-    } | {
-        id: string;
-        type: string;
-        source: string;
-        paint: {
-            "circle-radius": number;
-            "circle-color": string;
-            "line-color"?: undefined;
-            "line-width"?: undefined;
-        };
-    })[];
-};
+export declare function buildKeyboardNavigationStyle(color?: string): Partial<StyleSpecification>;
 export {};

package/dist/maps/column-navigation/mapbox/keyboard-navigation.js

@@ -1,10 +1,10 @@
 import { useMemo, useCallback, useEffect } from "react";
-import { buildGeoJSONSource, setGeoJSON } from "@macrostrat/mapbox-utils";
-import { useMapRef, useMapStyleOperator } from "@macrostrat/mapbox-react";
+import { setGeoJSON, buildGeoJSONSource } from "@macrostrat/mapbox-utils";
+import { useMapRef, useOverlayStyle, useMapStyleOperator } from "@macrostrat/mapbox-react";
 import { useColumnNavigationStore } from "./state.js";
 import { buildTriangulation, buildKeyMapping } from "../utils/keyboard-navigation.js";
 function ColumnKeyboardNavigation(props) {
-  const { showTriangulation = false } = props;
+  const { showTriangulation = false, triangulationColor } = props;
   const columns = useColumnNavigationStore((state) => state.columns);
   const col_id = useColumnNavigationStore((state) => state.selectedColumn);
   const selectColumn = useColumnNavigationStore((state) => state.selectColumn);
@@ -14,6 +14,12 @@ function ColumnKeyboardNavigation(props) {
   }, [columns]);
   const mapRef = useMapRef();
   const map = mapRef.current;
+  useOverlayStyle(() => {
+    if (!showTriangulation) return null;
+    return buildKeyboardNavigationStyle(
+      triangulationColor
+    );
+  }, [triangulationColor, showTriangulation]);
   const keyMapping = useMemo(() => {
     if (columns == null || voronoi == null || map == null) return null;
     const projection = (d) => {

package/dist/maps/column-navigation/mapbox/keyboard-navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard-navigation.js","sources":["../../../../src/maps/column-navigation/mapbox/keyboard-navigation.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo } from \"react\";\nimport { buildGeoJSONSource, setGeoJSON } from \"@macrostrat/mapbox-utils\";\nimport { useMapRef, useMapStyleOperator } from \"@macrostrat/mapbox-react\";\nimport { useColumnNavigationStore } from \"./state\";\nimport {\n  buildTriangulation,\n  buildKeyMapping,\n} from \"../utils/keyboard-navigation\";\n\ninterface KeyboardNavProps {\n  showTriangulation: boolean;\n}\n\nexport function ColumnKeyboardNavigation(props: KeyboardNavProps) {\n  /** Keyboard navigation of columns using a Delaunay triangulation */\n  const { showTriangulation = false } = props;\n  const columns = useColumnNavigationStore((state) => state.columns);\n  const col_id = useColumnNavigationStore((state) => state.selectedColumn);\n  const selectColumn = useColumnNavigationStore((state) => state.selectColumn);\n\n  const voronoi = useMemo(() => {\n    if (!columns || columns.length == 0) return null;\n    return buildTriangulation(columns);\n  }, [columns]);\n\n  const mapRef = useMapRef();\n  const map = mapRef.current;\n\n  const keyMapping = useMemo(() => {\n    if (columns == null || voronoi == null || map == null) return null;\n\n    const projection = (d) => {\n      const pt = map.project(d);\n      return [pt.x, pt.y];\n    };\n\n    const currentIndex = columns.findIndex(\n      (d) => d.properties.col_id == col_id,\n    );\n\n    const neighbors = voronoi.tri.delaunay.neighbors[currentIndex];\n    return buildKeyMapping(\n      neighbors,\n      voronoi.centroids,\n      currentIndex,\n      projection,\n    );\n  }, [col_id, columns, voronoi, map]);\n\n  const onKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (keyMapping == null) return;\n      const nextColumnIx = keyMapping[event.which];\n      if (nextColumnIx == null) return;\n      event.preventDefault();\n      event.stopPropagation();\n      // @ts-ignore\n      selectColumn(columns[nextColumnIx].id);\n      return false;\n    },\n    [keyMapping, selectColumn],\n  );\n\n  useEffect(() => {\n    if (map == null) return;\n    const canvas = map.getCanvas();\n    canvas.addEventListener(\"keydown\", onKeyDown);\n    return () => {\n      canvas.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [map, onKeyDown]);\n\n  useMapStyleOperator(\n    (map) => {\n      if (voronoi == null || !showTriangulation) return;\n      const { features } = voronoi.tri.links();\n\n      setGeoJSON(map, \"column-links\", {\n        type: \"FeatureCollection\",\n        features,\n      });\n    },\n    [voronoi, showTriangulation],\n  );\n\n  //if (neighbors == null) return null;\n  //const neighborFeatures = neighbors.map((d) => features[d]);\n\n  return null;\n}\n\nexport function buildKeyboardNavigationStyle(color: string = \"purple\") {\n  return {\n    sources: {\n      \"column-links\": buildGeoJSONSource(),\n      //neighbors: buildGeoJSONSource(),\n    },\n    layers: [\n      {\n        id: \"column-links\",\n        type: \"line\",\n        source: \"column-links\",\n        paint: {\n          \"line-color\": color,\n          \"line-width\": 1.5,\n        },\n      },\n      {\n        id: \"column-centers\",\n        type: \"circle\",\n        source: \"column-links\",\n        paint: {\n          \"circle-radius\": 2,\n          \"circle-color\": color,\n        },\n      },\n    ],\n  };\n}\n"],"names":["map"],"mappings":";;;;;AAaO,SAAS,yBAAyB,OAAyB;AAEhE,QAAM,EAAE,oBAAoB,MAAA,IAAU;AACtC,QAAM,UAAU,yBAAyB,CAAC,UAAU,MAAM,OAAO;AACjE,QAAM,SAAS,yBAAyB,CAAC,UAAU,MAAM,cAAc;AACvE,QAAM,eAAe,yBAAyB,CAAC,UAAU,MAAM,YAAY;AAE3E,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI,CAAC,WAAW,QAAQ,UAAU,EAAG,QAAO;AAC5C,WAAO,mBAAmB,OAAO;AAAA,EACnC,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,SAAS,UAAA;AACf,QAAM,MAAM,OAAO;AAEnB,QAAM,aAAa,QAAQ,MAAM;AAC/B,QAAI,WAAW,QAAQ,WAAW,QAAQ,OAAO,KAAM,QAAO;AAE9D,UAAM,aAAa,CAAC,MAAM;AACxB,YAAM,KAAK,IAAI,QAAQ,CAAC;AACxB,aAAO,CAAC,GAAG,GAAG,GAAG,CAAC;AAAA,IACpB;AAEA,UAAM,eAAe,QAAQ;AAAA,MAC3B,CAAC,MAAM,EAAE,WAAW,UAAU;AAAA,IAAA;AAGhC,UAAM,YAAY,QAAQ,IAAI,SAAS,UAAU,YAAY;AAC7D,WAAO;AAAA,MACL;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ,GAAG,CAAC,QAAQ,SAAS,SAAS,GAAG,CAAC;AAElC,QAAM,YAAY;AAAA,IAChB,CAAC,UAAyB;AACxB,UAAI,cAAc,KAAM;AACxB,YAAM,eAAe,WAAW,MAAM,KAAK;AAC3C,UAAI,gBAAgB,KAAM;AAC1B,YAAM,eAAA;AACN,YAAM,gBAAA;AAEN,mBAAa,QAAQ,YAAY,EAAE,EAAE;AACrC,aAAO;AAAA,IACT;AAAA,IACA,CAAC,YAAY,YAAY;AAAA,EAAA;AAG3B,YAAU,MAAM;AACd,QAAI,OAAO,KAAM;AACjB,UAAM,SAAS,IAAI,UAAA;AACnB,WAAO,iBAAiB,WAAW,SAAS;AAC5C,WAAO,MAAM;AACX,aAAO,oBAAoB,WAAW,SAAS;AAAA,IACjD;AAAA,EACF,GAAG,CAAC,KAAK,SAAS,CAAC;AAEnB;AAAA,IACE,CAACA,SAAQ;AACP,UAAI,WAAW,QAAQ,CAAC,kBAAmB;AAC3C,YAAM,EAAE,SAAA,IAAa,QAAQ,IAAI,MAAA;AAEjC,iBAAWA,MAAK,gBAAgB;AAAA,QAC9B,MAAM;AAAA,QACN;AAAA,MAAA,CACD;AAAA,IACH;AAAA,IACA,CAAC,SAAS,iBAAiB;AAAA,EAAA;AAM7B,SAAO;AACT;AAEO,SAAS,6BAA6B,QAAgB,UAAU;AACrE,SAAO;AAAA,IACL,SAAS;AAAA,MACP,gBAAgB,mBAAA;AAAA;AAAA,IAAmB;AAAA,IAGrC,QAAQ;AAAA,MACN;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,UACL,cAAc;AAAA,UACd,cAAc;AAAA,QAAA;AAAA,MAChB;AAAA,MAEF;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,UACL,iBAAiB;AAAA,UACjB,gBAAgB;AAAA,QAAA;AAAA,MAClB;AAAA,IACF;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"keyboard-navigation.js","sources":["../../../../src/maps/column-navigation/mapbox/keyboard-navigation.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo } from \"react\";\nimport { buildGeoJSONSource, setGeoJSON } from \"@macrostrat/mapbox-utils\";\nimport {\n  useMapRef,\n  useMapStyleOperator,\n  useOverlayStyle,\n} from \"@macrostrat/mapbox-react\";\nimport { useColumnNavigationStore } from \"./state\";\nimport {\n  buildTriangulation,\n  buildKeyMapping,\n} from \"../utils/keyboard-navigation\";\nimport { StyleSpecification } from \"mapbox-gl\";\n\ninterface KeyboardNavProps {\n  showTriangulation: boolean;\n  triangulationColor?: string;\n}\n\nexport function ColumnKeyboardNavigation(props: KeyboardNavProps) {\n  /** Keyboard navigation of columns using a Delaunay triangulation */\n  const { showTriangulation = false, triangulationColor } = props;\n  const columns = useColumnNavigationStore((state) => state.columns);\n  const col_id = useColumnNavigationStore((state) => state.selectedColumn);\n  const selectColumn = useColumnNavigationStore((state) => state.selectColumn);\n\n  const voronoi = useMemo(() => {\n    if (!columns || columns.length == 0) return null;\n    return buildTriangulation(columns);\n  }, [columns]);\n\n  const mapRef = useMapRef();\n  const map = mapRef.current;\n\n  // Set up overlay style for triangulation\n  useOverlayStyle(() => {\n    if (!showTriangulation) return null;\n    return buildKeyboardNavigationStyle(\n      triangulationColor,\n    ) as Partial<StyleSpecification>;\n  }, [triangulationColor, showTriangulation]);\n\n  const keyMapping = useMemo(() => {\n    if (columns == null || voronoi == null || map == null) return null;\n\n    const projection = (d) => {\n      const pt = map.project(d);\n      return [pt.x, pt.y];\n    };\n\n    const currentIndex = columns.findIndex(\n      (d) => d.properties.col_id == col_id,\n    );\n\n    const neighbors = voronoi.tri.delaunay.neighbors[currentIndex];\n    return buildKeyMapping(\n      neighbors,\n      voronoi.centroids,\n      currentIndex,\n      projection,\n    );\n  }, [col_id, columns, voronoi, map]);\n\n  const onKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (keyMapping == null) return;\n      const nextColumnIx = keyMapping[event.which];\n      if (nextColumnIx == null) return;\n      event.preventDefault();\n      event.stopPropagation();\n      // @ts-ignore\n      selectColumn(columns[nextColumnIx].id);\n      return false;\n    },\n    [keyMapping, selectColumn],\n  );\n\n  useEffect(() => {\n    if (map == null) return;\n    const canvas = map.getCanvas();\n    canvas.addEventListener(\"keydown\", onKeyDown);\n    return () => {\n      canvas.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [map, onKeyDown]);\n\n  useMapStyleOperator(\n    (map) => {\n      if (voronoi == null || !showTriangulation) return;\n      const { features } = voronoi.tri.links();\n\n      setGeoJSON(map, \"column-links\", {\n        type: \"FeatureCollection\",\n        features,\n      });\n    },\n    [voronoi, showTriangulation],\n  );\n\n  //if (neighbors == null) return null;\n  //const neighborFeatures = neighbors.map((d) => features[d]);\n\n  return null;\n}\n\nexport function buildKeyboardNavigationStyle(color: string = \"purple\") {\n  return {\n    sources: {\n      \"column-links\": buildGeoJSONSource(),\n      //neighbors: buildGeoJSONSource(),\n    },\n    layers: [\n      {\n        id: \"column-links\",\n        type: \"line\",\n        source: \"column-links\",\n        paint: {\n          \"line-color\": color,\n          \"line-width\": 1.5,\n        },\n      },\n      {\n        id: \"column-centers\",\n        type: \"circle\",\n        source: \"column-links\",\n        paint: {\n          \"circle-radius\": 2,\n          \"circle-color\": color,\n        },\n      },\n    ],\n  } as Partial<StyleSpecification>;\n}\n"],"names":["map"],"mappings":";;;;;AAmBO,SAAS,yBAAyB,OAAyB;AAEhE,QAAM,EAAE,oBAAoB,OAAO,mBAAA,IAAuB;AAC1D,QAAM,UAAU,yBAAyB,CAAC,UAAU,MAAM,OAAO;AACjE,QAAM,SAAS,yBAAyB,CAAC,UAAU,MAAM,cAAc;AACvE,QAAM,eAAe,yBAAyB,CAAC,UAAU,MAAM,YAAY;AAE3E,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI,CAAC,WAAW,QAAQ,UAAU,EAAG,QAAO;AAC5C,WAAO,mBAAmB,OAAO;AAAA,EACnC,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,SAAS,UAAA;AACf,QAAM,MAAM,OAAO;AAGnB,kBAAgB,MAAM;AACpB,QAAI,CAAC,kBAAmB,QAAO;AAC/B,WAAO;AAAA,MACL;AAAA,IAAA;AAAA,EAEJ,GAAG,CAAC,oBAAoB,iBAAiB,CAAC;AAE1C,QAAM,aAAa,QAAQ,MAAM;AAC/B,QAAI,WAAW,QAAQ,WAAW,QAAQ,OAAO,KAAM,QAAO;AAE9D,UAAM,aAAa,CAAC,MAAM;AACxB,YAAM,KAAK,IAAI,QAAQ,CAAC;AACxB,aAAO,CAAC,GAAG,GAAG,GAAG,CAAC;AAAA,IACpB;AAEA,UAAM,eAAe,QAAQ;AAAA,MAC3B,CAAC,MAAM,EAAE,WAAW,UAAU;AAAA,IAAA;AAGhC,UAAM,YAAY,QAAQ,IAAI,SAAS,UAAU,YAAY;AAC7D,WAAO;AAAA,MACL;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ,GAAG,CAAC,QAAQ,SAAS,SAAS,GAAG,CAAC;AAElC,QAAM,YAAY;AAAA,IAChB,CAAC,UAAyB;AACxB,UAAI,cAAc,KAAM;AACxB,YAAM,eAAe,WAAW,MAAM,KAAK;AAC3C,UAAI,gBAAgB,KAAM;AAC1B,YAAM,eAAA;AACN,YAAM,gBAAA;AAEN,mBAAa,QAAQ,YAAY,EAAE,EAAE;AACrC,aAAO;AAAA,IACT;AAAA,IACA,CAAC,YAAY,YAAY;AAAA,EAAA;AAG3B,YAAU,MAAM;AACd,QAAI,OAAO,KAAM;AACjB,UAAM,SAAS,IAAI,UAAA;AACnB,WAAO,iBAAiB,WAAW,SAAS;AAC5C,WAAO,MAAM;AACX,aAAO,oBAAoB,WAAW,SAAS;AAAA,IACjD;AAAA,EACF,GAAG,CAAC,KAAK,SAAS,CAAC;AAEnB;AAAA,IACE,CAACA,SAAQ;AACP,UAAI,WAAW,QAAQ,CAAC,kBAAmB;AAC3C,YAAM,EAAE,SAAA,IAAa,QAAQ,IAAI,MAAA;AAEjC,iBAAWA,MAAK,gBAAgB;AAAA,QAC9B,MAAM;AAAA,QACN;AAAA,MAAA,CACD;AAAA,IACH;AAAA,IACA,CAAC,SAAS,iBAAiB;AAAA,EAAA;AAM7B,SAAO;AACT;AAEO,SAAS,6BAA6B,QAAgB,UAAU;AACrE,SAAO;AAAA,IACL,SAAS;AAAA,MACP,gBAAgB,mBAAA;AAAA;AAAA,IAAmB;AAAA,IAGrC,QAAQ;AAAA,MACN;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,UACL,cAAc;AAAA,UACd,cAAc;AAAA,QAAA;AAAA,MAChB;AAAA,MAEF;AAAA,QACE,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,UACL,iBAAiB;AAAA,UACjB,gBAAgB;AAAA,QAAA;AAAA,MAClB;AAAA,IACF;AAAA,EACF;AAEJ;"}

package/dist/maps/index.d.ts

@@ -1,4 +1,4 @@
 export * from './column-navigation';
 export * from './column-correlation';
-export * from './_shared';
-export * from './units-overlay';
+export * from './inset-map';
+export * from './layers';

package/dist/maps/{_shared/inset-map.cjs → inset-map/index.cjs}

@@ -68,4 +68,4 @@ function InsetMap({
   ]);
 }
 exports.InsetMap = InsetMap;
-//# sourceMappingURL=inset-map.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/maps/inset-map/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/maps/inset-map/index.ts"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport {\n  MapView,\n  getBasicMapStyle,\n  MapViewProps,\n} from \"@macrostrat/map-interface\";\nimport h from \"@macrostrat/hyper\";\nimport { MapboxMapProvider } from \"@macrostrat/mapbox-react\";\nimport { useInDarkMode } from \"@macrostrat/ui-components\";\nimport {\n  removeMapLabels,\n  removeSourceFromStyle,\n} from \"@macrostrat/mapbox-utils\";\nimport type { ReactNode, CSSProperties } from \"react\";\n\nexport interface InsetMapProps extends Omit<MapViewProps, \"style\"> {\n  controls?: ReactNode;\n  className?: string;\n  children?: ReactNode;\n  style?: CSSProperties;\n  mapStyle?: mapboxgl.Style | string;\n  showLabels?: boolean;\n  showAdmin?: boolean;\n  showRoads?: boolean;\n}\n\nexport function InsetMap({\n  controls,\n  className,\n  children,\n  style,\n  mapStyle,\n  accessToken,\n  showLabels = false,\n  showAdmin = false,\n  showRoads = false,\n  ...rest\n}: InsetMapProps) {\n  const inDarkMode = useInDarkMode();\n  const _style = useMemo((): mapboxgl.Style | string => {\n    return mapStyle ?? getBasicMapStyle({ inDarkMode });\n  }, [mapStyle, inDarkMode]);\n\n  const transformStyle = useCallback(\n    (style) => {\n      let newStyle = style;\n      if (!showLabels) {\n        newStyle = removeMapLabels(newStyle);\n      }\n      if (!showAdmin) {\n        newStyle = removeSourceFromStyle(newStyle, null, \"admin\");\n      }\n      if (!showRoads) {\n        newStyle = removeSourceFromStyle(newStyle, null, \"road\");\n        newStyle = removeSourceFromStyle(newStyle, null, \"aeroway\");\n      }\n      return newStyle;\n    },\n    [mapStyle, showLabels, showRoads, showAdmin],\n  );\n\n  return h(\"div.inset-map\", { className, style }, [\n    h(MapboxMapProvider, [\n      controls,\n      h(\n        MapView,\n        {\n          style: _style,\n          accessToken,\n          standalone: true,\n          /* Default map position that centers on the bulk of Macrostrat columns\n           */\n          mapPosition: {\n            camera: {\n              lng: -100,\n              lat: 38,\n              altitude: 5000000,\n            },\n          },\n          transformStyle,\n          ...rest,\n        },\n        children,\n      ),\n    ]),\n  ]);\n}\n"],"names":["useInDarkMode","useMemo","getBasicMapStyle","useCallback","style","removeMapLabels","removeSourceFromStyle","h","MapboxMapProvider","MapView"],"mappings":";;;;;;;;;;AA0BO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,GAAG;AACL,GAAkB;AAChB,QAAM,aAAaA,aAAAA,cAAA;AACnB,QAAM,SAASC,MAAAA,QAAQ,MAA+B;AACpD,WAAO,YAAYC,aAAAA,iBAAiB,EAAE,YAAY;AAAA,EACpD,GAAG,CAAC,UAAU,UAAU,CAAC;AAEzB,QAAM,iBAAiBC,MAAAA;AAAAA,IACrB,CAACC,WAAU;AACT,UAAI,WAAWA;AACf,UAAI,CAAC,YAAY;AACf,mBAAWC,YAAAA,gBAAgB,QAAQ;AAAA,MACrC;AACA,UAAI,CAAC,WAAW;AACd,mBAAWC,YAAAA,sBAAsB,UAAU,MAAM,OAAO;AAAA,MAC1D;AACA,UAAI,CAAC,WAAW;AACd,mBAAWA,YAAAA,sBAAsB,UAAU,MAAM,MAAM;AACvD,mBAAWA,YAAAA,sBAAsB,UAAU,MAAM,SAAS;AAAA,MAC5D;AACA,aAAO;AAAA,IACT;AAAA,IACA,CAAC,UAAU,YAAY,WAAW,SAAS;AAAA,EAAA;AAG7C,SAAOC,WAAAA,QAAE,iBAAiB,EAAE,WAAW,SAAS;AAAA,IAC9CA,WAAAA,QAAEC,YAAAA,mBAAmB;AAAA,MACnB;AAAA,MACAD,WAAAA;AAAAA,QACEE,aAAAA;AAAAA,QACA;AAAA,UACE,OAAO;AAAA,UACP;AAAA,UACA,YAAY;AAAA;AAAA;AAAA,UAGZ,aAAa;AAAA,YACX,QAAQ;AAAA,cACN,KAAK;AAAA,cACL,KAAK;AAAA,cACL,UAAU;AAAA,YAAA;AAAA,UACZ;AAAA,UAEF;AAAA,UACA,GAAG;AAAA,QAAA;AAAA,QAEL;AAAA,MAAA;AAAA,IACF,CACD;AAAA,EAAA,CACF;AACH;;"}

package/dist/maps/{_shared/inset-map.js → inset-map/index.js}

@@ -66,4 +66,4 @@ function InsetMap({
 export {
   InsetMap
 };
-//# sourceMappingURL=inset-map.js.map
+//# sourceMappingURL=index.js.map

package/dist/maps/inset-map/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/maps/inset-map/index.ts"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport {\n  MapView,\n  getBasicMapStyle,\n  MapViewProps,\n} from \"@macrostrat/map-interface\";\nimport h from \"@macrostrat/hyper\";\nimport { MapboxMapProvider } from \"@macrostrat/mapbox-react\";\nimport { useInDarkMode } from \"@macrostrat/ui-components\";\nimport {\n  removeMapLabels,\n  removeSourceFromStyle,\n} from \"@macrostrat/mapbox-utils\";\nimport type { ReactNode, CSSProperties } from \"react\";\n\nexport interface InsetMapProps extends Omit<MapViewProps, \"style\"> {\n  controls?: ReactNode;\n  className?: string;\n  children?: ReactNode;\n  style?: CSSProperties;\n  mapStyle?: mapboxgl.Style | string;\n  showLabels?: boolean;\n  showAdmin?: boolean;\n  showRoads?: boolean;\n}\n\nexport function InsetMap({\n  controls,\n  className,\n  children,\n  style,\n  mapStyle,\n  accessToken,\n  showLabels = false,\n  showAdmin = false,\n  showRoads = false,\n  ...rest\n}: InsetMapProps) {\n  const inDarkMode = useInDarkMode();\n  const _style = useMemo((): mapboxgl.Style | string => {\n    return mapStyle ?? getBasicMapStyle({ inDarkMode });\n  }, [mapStyle, inDarkMode]);\n\n  const transformStyle = useCallback(\n    (style) => {\n      let newStyle = style;\n      if (!showLabels) {\n        newStyle = removeMapLabels(newStyle);\n      }\n      if (!showAdmin) {\n        newStyle = removeSourceFromStyle(newStyle, null, \"admin\");\n      }\n      if (!showRoads) {\n        newStyle = removeSourceFromStyle(newStyle, null, \"road\");\n        newStyle = removeSourceFromStyle(newStyle, null, \"aeroway\");\n      }\n      return newStyle;\n    },\n    [mapStyle, showLabels, showRoads, showAdmin],\n  );\n\n  return h(\"div.inset-map\", { className, style }, [\n    h(MapboxMapProvider, [\n      controls,\n      h(\n        MapView,\n        {\n          style: _style,\n          accessToken,\n          standalone: true,\n          /* Default map position that centers on the bulk of Macrostrat columns\n           */\n          mapPosition: {\n            camera: {\n              lng: -100,\n              lat: 38,\n              altitude: 5000000,\n            },\n          },\n          transformStyle,\n          ...rest,\n        },\n        children,\n      ),\n    ]),\n  ]);\n}\n"],"names":["style"],"mappings":";;;;;;AA0BO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,GAAG;AACL,GAAkB;AAChB,QAAM,aAAa,cAAA;AACnB,QAAM,SAAS,QAAQ,MAA+B;AACpD,WAAO,YAAY,iBAAiB,EAAE,YAAY;AAAA,EACpD,GAAG,CAAC,UAAU,UAAU,CAAC;AAEzB,QAAM,iBAAiB;AAAA,IACrB,CAACA,WAAU;AACT,UAAI,WAAWA;AACf,UAAI,CAAC,YAAY;AACf,mBAAW,gBAAgB,QAAQ;AAAA,MACrC;AACA,UAAI,CAAC,WAAW;AACd,mBAAW,sBAAsB,UAAU,MAAM,OAAO;AAAA,MAC1D;AACA,UAAI,CAAC,WAAW;AACd,mBAAW,sBAAsB,UAAU,MAAM,MAAM;AACvD,mBAAW,sBAAsB,UAAU,MAAM,SAAS;AAAA,MAC5D;AACA,aAAO;AAAA,IACT;AAAA,IACA,CAAC,UAAU,YAAY,WAAW,SAAS;AAAA,EAAA;AAG7C,SAAO,EAAE,iBAAiB,EAAE,WAAW,SAAS;AAAA,IAC9C,EAAE,mBAAmB;AAAA,MACnB;AAAA,MACA;AAAA,QACE;AAAA,QACA;AAAA,UACE,OAAO;AAAA,UACP;AAAA,UACA,YAAY;AAAA;AAAA;AAAA,UAGZ,aAAa;AAAA,YACX,QAAQ;AAAA,cACN,KAAK;AAAA,cACL,KAAK;AAAA,cACL,UAAU;AAAA,YAAA;AAAA,UACZ;AAAA,UAEF;AAAA,UACA,GAAG;AAAA,QAAA;AAAA,QAEL;AAAA,MAAA;AAAA,IACF,CACD;AAAA,EAAA,CACF;AACH;"}