@macrostrat/column-views 2.4.3 → 3.0.0

package/dist/maps/column-correlation/state.js

@@ -0,0 +1,129 @@
+import { create, useStore } from "zustand";
+import { lineIntersect } from "@turf/line-intersect";
+import distance from "@turf/distance";
+import { nearestPointOnLine } from "@turf/nearest-point-on-line";
+import { centroid } from "@turf/centroid";
+import { useState, useEffect, useContext, createContext } from "react";
+import h from "@macrostrat/hyper";
+import { createComputed } from "zustand-computed";
+import { useMacrostratColumns } from "../../data-provider/base.js";
+import { buffer } from "@turf/buffer";
+import { booleanPointInPolygon } from "@turf/boolean-point-in-polygon";
+const CorrelationStoreContext = createContext(null);
+const computed = createComputed((state) => {
+  return {
+    // We compute the focused columns based on columns and focusedLine
+    focusedColumns: buildCorrelationColumns(state.columns, state.focusedLine)
+  };
+});
+function ColumnCorrelationProvider({
+  children,
+  columns,
+  projectID,
+  inProcess,
+  focusedLine,
+  onSelectColumns
+}) {
+  const [store] = useState(() => {
+    return create(
+      computed((set, get) => {
+        return {
+          focusedLine,
+          projectID,
+          columns: null,
+          onClickMap(event, point) {
+            const state = get();
+            const shiftKeyPressed = event.originalEvent.shiftKey;
+            let existingCoords = state.focusedLine?.coordinates ?? [];
+            if (existingCoords.length >= 2 && !shiftKeyPressed) {
+              existingCoords = [];
+            }
+            set({
+              focusedLine: {
+                type: "LineString",
+                coordinates: [...existingCoords, point.coordinates]
+              }
+            });
+          }
+        };
+      })
+    );
+  });
+  const _columns = useMacrostratColumns(projectID, inProcess);
+  useEffect(() => {
+    if (_columns != null) {
+      store.setState({ columns: _columns });
+    }
+  }, [_columns]);
+  const focusedColumns = useStore(store, (state) => state.focusedColumns);
+  const _focusedLine = useStore(store, (state) => state.focusedLine);
+  useEffect(() => {
+    onSelectColumns?.(focusedColumns, _focusedLine);
+  }, [focusedColumns, _focusedLine]);
+  return h(CorrelationStoreContext.Provider, { value: store }, children);
+}
+function useCorrelationMapStore(selector) {
+  const storeApi = useContext(CorrelationStoreContext);
+  if (storeApi == null) {
+    throw new Error("Missing CorrelationMapProvider");
+  }
+  return useStore(storeApi, selector);
+}
+function buildCorrelationColumns(columns, line) {
+  if (columns == null || line == null || line.coordinates.length < 2) {
+    return [];
+  }
+  return orderColumnsByDistance(
+    computeIntersectingColumns(columns, line),
+    line
+  );
+}
+function computeIntersectingColumns(columns, line) {
+  if (columns == null || line == null) {
+    return [];
+  }
+  const bufferedLine = buffer(line, 1, { units: "degrees" });
+  const nearbyPoints = columns.filter((col) => {
+    if (col.geometry?.type != "Point") {
+      return false;
+    }
+    return booleanPointInPolygon(col.geometry, bufferedLine);
+  });
+  const intersectingPolygons = columns.filter((col) => {
+    const poly = col.geometry;
+    if (poly == null) return false;
+    if (poly.type != "Polygon" && poly.type != "MultiPolygon") return false;
+    const intersection = lineIntersect(line, poly);
+    return intersection.features.length > 0;
+  });
+  return [...intersectingPolygons, ...nearbyPoints];
+}
+function orderColumnsByDistance(columns, line) {
+  const centroids = columns.map((col) => centroid(col.geometry));
+  const projectedPoints = centroids.map(
+    (point) => nearestPointOnLine(line, point)
+  );
+  const distances = projectedPoints.map(
+    (point) => distance(point.geometry.coordinates, line.coordinates[0])
+  );
+  let newColumns = columns.map((col, i) => {
+    return {
+      ...col,
+      properties: {
+        ...col.properties,
+        centroid: centroids[i],
+        nearestPointOnLine: projectedPoints[i],
+        distanceAlongLine: distances[i]
+      }
+    };
+  });
+  return sorted(newColumns, (d) => d.properties.distanceAlongLine);
+}
+function sorted(data, accessor) {
+  return data.sort((a, b) => accessor(a) - accessor(b));
+}
+export {
+  ColumnCorrelationProvider,
+  useCorrelationMapStore
+};
+//# sourceMappingURL=state.js.map

package/dist/maps/column-correlation/state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"state.js","sources":["../../../src/maps/column-correlation/state.ts"],"sourcesContent":["import { LineString, Point } from \"geojson\";\nimport { create, StoreApi, useStore } from \"zustand\";\nimport type { ColumnGeoJSONRecord } from \"@macrostrat/api-types\";\n// Turf intersection\nimport { lineIntersect } from \"@turf/line-intersect\";\nimport distance from \"@turf/distance\";\nimport { nearestPointOnLine } from \"@turf/nearest-point-on-line\";\nimport { centroid } from \"@turf/centroid\";\nimport {\n  createContext,\n  useState,\n  useContext,\n  ReactNode,\n  useEffect,\n} from \"react\";\nimport h from \"@macrostrat/hyper\";\nimport { createComputed } from \"zustand-computed\";\nimport { useMacrostratColumns } from \"../../data-provider/base\";\nimport { buffer } from \"@turf/buffer\";\nimport { booleanPointInPolygon } from \"@turf/boolean-point-in-polygon\";\n\nexport interface CorrelationMapInput {\n  columns: ColumnGeoJSONRecord[];\n  focusedLine: LineString | null;\n}\n\nexport interface CorrelationMapStore extends CorrelationMapInput {\n  onClickMap: (event: mapboxgl.MapMouseEvent, point: Point) => void;\n}\n\nexport interface CorrelationProviderProps extends CorrelationMapInput {\n  projectID?: number;\n  inProcess?: boolean;\n  columns: ColumnGeoJSONRecord[] | null;\n  children: ReactNode;\n  onSelectColumns?: (\n    columns: FocusedColumnGeoJSONRecord[],\n    line: LineString | null,\n  ) => void;\n}\n\nconst CorrelationStoreContext =\n  createContext<StoreApi<CorrelationMapStore> | null>(null);\n\ntype ComputedStore = {\n  focusedColumns: FocusedColumnGeoJSONRecord[];\n};\n\n/** A computed store that will automatically update when the state changes */\nconst computed = createComputed((state: CorrelationMapStore): ComputedStore => {\n  return {\n    // We compute the focused columns based on columns and focusedLine\n    focusedColumns: buildCorrelationColumns(state.columns, state.focusedLine),\n  };\n}) as any;\n\nexport function ColumnCorrelationProvider({\n  children,\n  columns,\n  projectID,\n  inProcess,\n  focusedLine,\n  onSelectColumns,\n}: CorrelationProviderProps) {\n  const [store] = useState(() => {\n    return create<CorrelationMapStore & ComputedStore>(\n      computed((set, get): CorrelationMapStore => {\n        return {\n          focusedLine,\n          projectID,\n          columns: null,\n          onClickMap(event: mapboxgl.MapMouseEvent, point: Point) {\n            const state = get();\n            // Check if shift key is pressed\n            const shiftKeyPressed = event.originalEvent.shiftKey;\n            let existingCoords = state.focusedLine?.coordinates ?? [];\n\n            if (existingCoords.length >= 2 && !shiftKeyPressed) {\n              // Reset the line to zero length\n              existingCoords = [];\n            }\n            set({\n              focusedLine: {\n                type: \"LineString\",\n                coordinates: [...existingCoords, point.coordinates],\n              },\n            });\n          },\n        };\n      }),\n    );\n  });\n\n  // Set up the store\n  /** TODO: move the fetching of all columns to within the map */\n  const _columns = useMacrostratColumns(projectID, inProcess);\n  useEffect(() => {\n    if (_columns != null) {\n      store.setState({ columns: _columns });\n    }\n  }, [_columns]);\n\n  // Kind of an awkward way to do this but we need to allow the selector to run\n  const focusedColumns = useStore(store, (state) => state.focusedColumns);\n  const _focusedLine = useStore(store, (state) => state.focusedLine);\n\n  useEffect(() => {\n    onSelectColumns?.(focusedColumns, _focusedLine);\n  }, [focusedColumns, _focusedLine]);\n\n  return h(CorrelationStoreContext.Provider, { value: store }, children);\n}\n\nexport function useCorrelationMapStore(\n  selector: (state: CorrelationMapStore & ComputedStore) => any,\n) {\n  const storeApi = useContext(CorrelationStoreContext);\n  if (storeApi == null) {\n    throw new Error(\"Missing CorrelationMapProvider\");\n  }\n  return useStore(storeApi, selector);\n}\n\nfunction buildCorrelationColumns(\n  columns: ColumnGeoJSONRecord[],\n  line: LineString,\n): FocusedColumnGeoJSONRecord[] {\n  if (columns == null || line == null || line.coordinates.length < 2) {\n    return [];\n  }\n  return orderColumnsByDistance(\n    computeIntersectingColumns(columns, line),\n    line,\n  );\n}\n\nfunction computeIntersectingColumns(\n  columns: ColumnGeoJSONRecord[],\n  line: LineString,\n): ColumnGeoJSONRecord[] {\n  if (columns == null || line == null) {\n    return [];\n  }\n\n  /** eODP-focused process. Find buffers around line and then find columns intersecting that buffer */\n  const bufferedLine = buffer(line, 1, { units: \"degrees\" });\n\n  const nearbyPoints = columns.filter((col) => {\n    if (col.geometry?.type != \"Point\") {\n      return false;\n    }\n    return booleanPointInPolygon(col.geometry, bufferedLine);\n  });\n\n  const intersectingPolygons = columns.filter((col) => {\n    const poly = col.geometry;\n\n    // Some in-process datasets seem to have null geometries\n    if (poly == null) return false;\n    if (poly.type != \"Polygon\" && poly.type != \"MultiPolygon\") return false;\n\n    const intersection = lineIntersect(line, poly);\n    return intersection.features.length > 0;\n  });\n\n  return [...intersectingPolygons, ...nearbyPoints];\n}\n\ninterface FocusedColumnGeoJSONRecord extends ColumnGeoJSONRecord {\n  properties: {\n    centroid: Point;\n    nearestPointOnLine: Point;\n    distanceAlongLine: number;\n  } & ColumnGeoJSONRecord[\"properties\"];\n}\n\nfunction orderColumnsByDistance(\n  columns: ColumnGeoJSONRecord[],\n  line: LineString,\n): FocusedColumnGeoJSONRecord[] {\n  const centroids = columns.map((col) => centroid(col.geometry));\n  const projectedPoints = centroids.map((point) =>\n    nearestPointOnLine(line, point),\n  );\n  const distances = projectedPoints.map((point) =>\n    distance(point.geometry.coordinates, line.coordinates[0]),\n  );\n\n  let newColumns = columns.map((col, i) => {\n    return {\n      ...col,\n      properties: {\n        ...col.properties,\n        centroid: centroids[i],\n        nearestPointOnLine: projectedPoints[i],\n        distanceAlongLine: distances[i],\n      },\n    };\n  });\n\n  return sorted(newColumns, (d) => d.properties.distanceAlongLine);\n}\n\nfunction sorted(data, accessor: (d) => number) {\n  return data.sort((a, b) => accessor(a) - accessor(b));\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+export * from './mapbox';
+export * from './svg';

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

@@ -0,0 +1,175 @@
+"use strict";
+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 d3Geo = require("d3-geo");
+const keyboardNavigation = require("./keyboard-navigation.cjs");
+const styles = require("../../_shared/styles.cjs");
+const insetMap = require("../../_shared/inset-map.cjs");
+function ColumnNavigationMap(props) {
+  const {
+    columns,
+    columnIDs,
+    onSelectColumn,
+    onHoverColumn,
+    selectedColumn,
+    hoveredColumn,
+    projectID,
+    children,
+    inProcess,
+    ...rest
+  } = props;
+  return h(
+    state.ColumnNavigationProvider,
+    {
+      columns,
+      columnIDs,
+      onSelectColumn,
+      onHoverColumn,
+      selectedColumn,
+      hoveredColumn,
+      projectID,
+      inProcess
+    },
+    h(_ColumnNavigationMap, props)
+  );
+}
+function _ColumnNavigationMap(props) {
+  const {
+    padding = 50,
+    children,
+    columnColor,
+    showTriangulation,
+    triangulationColor,
+    keyboardNavigation: keyboardNavigation$1 = true,
+    ...rest
+  } = 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(
+    insetMap.InsetMap,
+    {
+      ...rest,
+      boxZoom: false,
+      dragRotate: false,
+      overlayStyles
+    },
+    [
+      h(ColumnsLayer),
+      children,
+      h.if(keyboardNavigation$1)(keyboardNavigation.ColumnKeyboardNavigation, { showTriangulation })
+    ]
+  );
+}
+function ColumnsLayer({ enabled = true }) {
+  const columns = state.useColumnNavigationStore((state2) => state2.columns);
+  const selectedColumn = 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
+  );
+  mapboxReact.useMapStyleOperator(
+    (map) => {
+      if (columns == null) {
+        return;
+      }
+      const data = {
+        type: "FeatureCollection",
+        features: columns
+      };
+      mapboxUtils.setGeoJSON(map, "columns", data);
+      const mouseMove = (event) => {
+        if (event.features.length == 0) return;
+        const hoveredFeature = event.features[0];
+        setHoveredColumn(hoveredFeature.id);
+        map.getCanvas().style.cursor = "pointer";
+      };
+      const mouseLeave = () => {
+        setHoveredColumn(null);
+        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]
+  );
+  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);
+  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]
+  );
+  return null;
+}
+exports.ColumnNavigationMap = ColumnNavigationMap;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +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":["ColumnNavigationProvider","keyboardNavigation","useMemo","styles","buildColumnsStyle","buildKeyboardNavigationStyle","InsetMap","ColumnKeyboardNavigation","useColumnNavigationStore","state","useMapStyleOperator","setGeoJSON","selectedColumn","useRef","geoCentroid"],"mappings":"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"}

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

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { InsetMapProps } from '../../_shared';
+import { NavigationProviderProps } from './state';
+export interface ColumnNavigationMapProps extends InsetMapProps {
+    padding?: number;
+    children?: ReactNode;
+    accessToken?: string;
+    selectedColumn?: number;
+    hoveredColumn?: number;
+    onSelectColumn?: (colID: number | null) => void;
+    onHoverColumn?: (colID: number | null) => void;
+    showTriangulation?: boolean;
+    columnColor?: string;
+    triangulationColor?: string;
+    keyboardNavigation?: boolean;
+}
+export declare function ColumnNavigationMap(props: ColumnNavigationMapProps & NavigationProviderProps): import('react').FunctionComponentElement<NavigationProviderProps>;

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

@@ -0,0 +1,175 @@
+import { useMapStyleOperator } from "@macrostrat/mapbox-react";
+import h from "@macrostrat/hyper";
+import { useMemo, useRef } from "react";
+import { setGeoJSON } from "@macrostrat/mapbox-utils";
+import { ColumnNavigationProvider, useColumnNavigationStore } from "./state.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";
+function ColumnNavigationMap(props) {
+  const {
+    columns,
+    columnIDs,
+    onSelectColumn,
+    onHoverColumn,
+    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
+    },
+    [
+      h(ColumnsLayer),
+      children,
+      h.if(keyboardNavigation)(ColumnKeyboardNavigation, { showTriangulation })
+    ]
+  );
+}
+function ColumnsLayer({ enabled = true }) {
+  const columns = useColumnNavigationStore((state) => state.columns);
+  const selectedColumn = useColumnNavigationStore(
+    (state) => state.selectedColumn
+  );
+  const hoveredColumn = useColumnNavigationStore(
+    (state) => state.hoveredColumn
+  );
+  const selectColumn = useColumnNavigationStore((state) => state.selectColumn);
+  const setHoveredColumn = useColumnNavigationStore(
+    (state) => state.setHoveredColumn
+  );
+  useMapStyleOperator(
+    (map) => {
+      if (columns == null) {
+        return;
+      }
+      const data = {
+        type: "FeatureCollection",
+        features: columns
+      };
+      setGeoJSON(map, "columns", data);
+      const mouseMove = (event) => {
+        if (event.features.length == 0) return;
+        const hoveredFeature = event.features[0];
+        setHoveredColumn(hoveredFeature.id);
+        map.getCanvas().style.cursor = "pointer";
+      };
+      const mouseLeave = () => {
+        setHoveredColumn(null);
+        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]
+  );
+  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);
+  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]
+  );
+  return null;
+}
+export {
+  ColumnNavigationMap
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,99 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const mapboxUtils = require("@macrostrat/mapbox-utils");
+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 columns = state.useColumnNavigationStore((state2) => state2.columns);
+  const col_id = state.useColumnNavigationStore((state2) => state2.selectedColumn);
+  const selectColumn = state.useColumnNavigationStore((state2) => state2.selectColumn);
+  const voronoi = React.useMemo(() => {
+    if (!columns || columns.length == 0) return null;
+    return keyboardNavigation.buildTriangulation(columns);
+  }, [columns]);
+  const mapRef = mapboxReact.useMapRef();
+  const map = mapRef.current;
+  const keyMapping = React.useMemo(() => {
+    if (columns == null || voronoi == null || map == null) return null;
+    const projection = (d) => {
+      const pt = map.project(d);
+      return [pt.x, pt.y];
+    };
+    const currentIndex = columns.findIndex(
+      (d) => d.properties.col_id == col_id
+    );
+    const neighbors = voronoi.tri.delaunay.neighbors[currentIndex];
+    return keyboardNavigation.buildKeyMapping(
+      neighbors,
+      voronoi.centroids,
+      currentIndex,
+      projection
+    );
+  }, [col_id, columns, voronoi, map]);
+  const onKeyDown = React.useCallback(
+    (event) => {
+      if (keyMapping == null) return;
+      const nextColumnIx = keyMapping[event.which];
+      if (nextColumnIx == null) return;
+      event.preventDefault();
+      event.stopPropagation();
+      selectColumn(columns[nextColumnIx].id);
+      return false;
+    },
+    [keyMapping, selectColumn]
+  );
+  React.useEffect(() => {
+    if (map == null) return;
+    const canvas = map.getCanvas();
+    canvas.addEventListener("keydown", onKeyDown);
+    return () => {
+      canvas.removeEventListener("keydown", onKeyDown);
+    };
+  }, [map, onKeyDown]);
+  mapboxReact.useMapStyleOperator(
+    (map2) => {
+      if (voronoi == null || !showTriangulation) return;
+      const { features } = voronoi.tri.links();
+      mapboxUtils.setGeoJSON(map2, "column-links", {
+        type: "FeatureCollection",
+        features
+      });
+    },
+    [voronoi, showTriangulation]
+  );
+  return null;
+}
+function buildKeyboardNavigationStyle(color = "purple") {
+  return {
+    sources: {
+      "column-links": mapboxUtils.buildGeoJSONSource()
+      //neighbors: buildGeoJSONSource(),
+    },
+    layers: [
+      {
+        id: "column-links",
+        type: "line",
+        source: "column-links",
+        paint: {
+          "line-color": color,
+          "line-width": 1.5
+        }
+      },
+      {
+        id: "column-centers",
+        type: "circle",
+        source: "column-links",
+        paint: {
+          "circle-radius": 2,
+          "circle-color": color
+        }
+      }
+    ]
+  };
+}
+exports.ColumnKeyboardNavigation = ColumnKeyboardNavigation;
+exports.buildKeyboardNavigationStyle = buildKeyboardNavigationStyle;
+//# sourceMappingURL=keyboard-navigation.cjs.map