@macrostrat/column-views 3.2.2 → 3.3.0

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

@@ -3,175 +3,213 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const mapboxReact = require("@macrostrat/mapbox-react");
 const h = require("@macrostrat/hyper");
 const React = require("react");
-const mapboxUtils = require("@macrostrat/mapbox-utils");
 const state = require("./state.cjs");
+const index = require("../../inset-map/index.cjs");
 const d3Geo = require("d3-geo");
 const keyboardNavigation = require("./keyboard-navigation.cjs");
-const styles = require("../../_shared/styles.cjs");
-const insetMap = require("../../_shared/inset-map.cjs");
+const columns = require("../../layers/columns.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const h__default = /* @__PURE__ */ _interopDefault(h);
 function ColumnNavigationMap(props) {
   const {
-    columns,
+    padding = 50,
+    children,
+    columnColor,
+    showTriangulation,
+    triangulationColor,
+    keyboardNavigation: keyboardNavigation2 = true,
+    columns: columns2,
     columnIDs,
     onSelectColumn,
     onHoverColumn,
     selectedColumn,
     hoveredColumn,
     projectID,
-    children,
     inProcess,
     ...rest
   } = props;
   return h__default.default(
-    state.ColumnNavigationProvider,
+    index.InsetMap,
     {
-      columns,
-      columnIDs,
-      onSelectColumn,
-      onHoverColumn,
-      selectedColumn,
-      hoveredColumn,
-      projectID,
-      inProcess
+      ...rest,
+      boxZoom: false,
+      dragRotate: false
     },
-    h__default.default(_ColumnNavigationMap, props)
+    [
+      h__default.default(ColumnsNavigationLayer, {
+        color: columnColor,
+        columns: columns2,
+        columnIDs,
+        onSelectColumn,
+        onHoverColumn,
+        selectedColumn,
+        hoveredColumn,
+        projectID,
+        inProcess,
+        keyboardNavigation: keyboardNavigation2,
+        showTriangulation,
+        triangulationColor
+      }),
+      children
+    ]
   );
 }
-function _ColumnNavigationMap(props) {
+function ColumnsNavigationLayer(props) {
   const {
-    padding = 50,
-    children,
-    columnColor,
+    enabled,
+    color,
+    keyboardNavigation: keyboardNavigation$1,
     showTriangulation,
     triangulationColor,
-    keyboardNavigation: keyboardNavigation$1 = true,
-    ...rest
+    ...providerProps
   } = props;
-  const overlayStyles = React.useMemo(() => {
-    let styles$1 = [styles.buildColumnsStyle(columnColor)];
-    if (showTriangulation) {
-      styles$1.push(keyboardNavigation.buildKeyboardNavigationStyle(triangulationColor));
-    }
-    return styles$1;
-  }, [columnColor, showTriangulation, triangulationColor]);
-  return h__default.default(
-    insetMap.InsetMap,
-    {
-      ...rest,
-      boxZoom: false,
-      dragRotate: false,
-      overlayStyles
-    },
-    [
-      h__default.default(ColumnsLayer),
-      children,
-      h__default.default.if(keyboardNavigation$1)(keyboardNavigation.ColumnKeyboardNavigation, { showTriangulation })
-    ]
-  );
+  return h__default.default(state.ColumnNavigationProvider, providerProps, [
+    h__default.default(_ColumnsNavigationLayer, { enabled, color }),
+    h__default.default.if(keyboardNavigation$1)(keyboardNavigation.ColumnKeyboardNavigation, {
+      showTriangulation,
+      triangulationColor
+    })
+  ]);
 }
-function ColumnsLayer({ enabled = true }) {
-  const columns = state.useColumnNavigationStore((state2) => state2.columns);
-  const selectedColumn = state.useColumnNavigationStore(
+const columnLayers = ["columns-points", "columns-fill"];
+function _ColumnsNavigationLayer({ enabled = true, color }) {
+  const columns$1 = state.useColumnNavigationStore((state2) => state2.columns);
+  const selectedColumnID = state.useColumnNavigationStore(
     (state2) => state2.selectedColumn
   );
-  const hoveredColumn = state.useColumnNavigationStore(
-    (state2) => state2.hoveredColumn
-  );
   const selectColumn = state.useColumnNavigationStore((state2) => state2.selectColumn);
   const setHoveredColumn = state.useColumnNavigationStore(
     (state2) => state2.setHoveredColumn
   );
+  const onHover = React.useCallback(
+    (event) => setHoveredColumn(event.features?.[0]?.id),
+    [setHoveredColumn]
+  );
+  const onSelectColumn = React.useCallback(
+    (column) => selectColumn(column.id),
+    [selectColumn]
+  );
+  const selectedColumnFeature = React.useMemo(() => {
+    if (columns$1 == null || selectedColumnID == null) return null;
+    return columns$1.find((d) => d.id == selectedColumnID);
+  }, [selectedColumnID, columns$1]);
+  return h__default.default([
+    h__default.default(columns.BaseColumnsLayer, { enabled, color, columns: columns$1 }),
+    h__default.default(ColumnSelectionManager, {
+      selectedColumn: selectedColumnFeature,
+      onSelectColumn
+    }),
+    h__default.default(ColumnHoverInteraction, { onHover })
+  ]);
+}
+function ColumnSelectionManager({
+  selectedColumn,
+  onSelectColumn,
+  centerOnSelect = true
+}) {
+  const onClick = React.useCallback(
+    (event) => {
+      if (event.features.length == 0) return;
+      const selectedColumn2 = event.features[0];
+      onSelectColumn(selectedColumn2);
+    },
+    [onSelectColumn]
+  );
+  return h__default.default([
+    h__default.default.if(centerOnSelect)(SelectedColumnCenterer, {
+      selectedColumn
+    }),
+    h__default.default(columns.SelectedColumnOverlay, { selectedColumn }),
+    h__default.default(ClickInteraction, {
+      onClick,
+      layers: columnLayers
+    })
+  ]);
+}
+function ColumnHoverInteraction({ onHover }) {
+  return h__default.default(HoverInteraction, { onHover, layers: columnLayers });
+}
+function ClickInteraction({ onClick, layers }) {
   mapboxReact.useMapStyleOperator(
     (map) => {
-      if (columns == null) {
-        return;
-      }
-      const data = {
-        type: "FeatureCollection",
-        features: columns
+      map.on("click", layers, onClick);
+      return () => {
+        map.off("click", layers, onClick);
       };
-      mapboxUtils.setGeoJSON(map, "columns", data);
+    },
+    [layers, onClick]
+  );
+  return null;
+}
+function HoverInteraction({ onHover, layers }) {
+  const hoveredFeaturesRef = React.useRef([]);
+  const updateFeatureState = React.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;
+  }, []);
+  mapboxReact.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 = React.useRef(null);
-  mapboxReact.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 = React.useRef(null);
+  return null;
+}
+function SelectedColumnCenterer({
+  selectedColumn,
+  easeDuration = 500
+}) {
+  const columnCenter = React.useMemo(() => {
+    const columnGeometry = selectedColumn?.geometry;
+    if (columnGeometry == null) return null;
+    return d3Geo.geoCentroid(columnGeometry);
+  }, [selectedColumn]);
+  const mapRef = mapboxReact.useMapRef();
+  const map = mapRef.current;
   const initialRenderRef = React.useRef(true);
-  mapboxReact.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 = d3Geo.geoCentroid(columnGeometry);
-      const isInitialRender = initialRenderRef.current;
-      map.easeTo({ center }, { duration: isInitialRender ? 0 : 500 });
-      if (isInitialRender) {
-        initialRenderRef.current = false;
-      }
-    },
-    [selectedColumn, columns]
-  );
+  React.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;
 }
+exports.ColumnHoverInteraction = ColumnHoverInteraction;
 exports.ColumnNavigationMap = ColumnNavigationMap;
+exports.ColumnSelectionManager = ColumnSelectionManager;
+exports.ColumnsNavigationLayer = ColumnsNavigationLayer;
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","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":["h","ColumnNavigationProvider","keyboardNavigation","useMemo","styles","buildColumnsStyle","buildKeyboardNavigationStyle","InsetMap","ColumnKeyboardNavigation","useColumnNavigationStore","state","useMapStyleOperator","setGeoJSON","selectedColumn","useRef","geoCentroid"],"mappings":"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"}
+{"version":3,"file":"index.cjs","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":["keyboardNavigation","columns","h","InsetMap","ColumnNavigationProvider","ColumnKeyboardNavigation","useColumnNavigationStore","state","useCallback","useMemo","BaseColumnsLayer","selectedColumn","SelectedColumnOverlay","useMapStyleOperator","useRef","geoCentroid","useMapRef","useEffect"],"mappings":"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"}

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

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
-import { InsetMapProps } from '../../_shared';
 import { NavigationProviderProps } from './state';
+import { InsetMapProps } from '../../inset-map';
+import { ColumnFeature } from '../../layers';
 export interface ColumnNavigationMapProps extends InsetMapProps {
     padding?: number;
     children?: ReactNode;
@@ -11,7 +12,27 @@ export interface ColumnNavigationMapProps extends InsetMapProps {
     onHoverColumn?: (colID: number | null) => void;
     showTriangulation?: boolean;
     columnColor?: string;
+}
+export declare function ColumnNavigationMap(props: ColumnNavigationMapProps & NavigationProviderProps): import('react').FunctionComponentElement<InsetMapProps>;
+interface ColumnLayerProps {
+    enabled?: boolean;
+    color?: string;
+}
+interface ColumnKeyboardNavigationProps {
     triangulationColor?: string;
     keyboardNavigation?: boolean;
+    showTriangulation?: boolean;
 }
-export declare function ColumnNavigationMap(props: ColumnNavigationMapProps & NavigationProviderProps): import('react').FunctionComponentElement<NavigationProviderProps>;
+export declare function ColumnsNavigationLayer(props: NavigationProviderProps & ColumnLayerProps & ColumnKeyboardNavigationProps): import('react').FunctionComponentElement<NavigationProviderProps>;
+export declare function ColumnSelectionManager({ selectedColumn, onSelectColumn, centerOnSelect, }: {
+    selectedColumn: ColumnFeature;
+    onSelectColumn: (column: ColumnFeature) => void;
+    centerOnSelect?: boolean;
+}): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare function ColumnHoverInteraction({ onHover }: {
+    onHover: any;
+}): import('react').FunctionComponentElement<{
+    onHover: any;
+    layers: any;
+}>;
+export {};