@macrostrat/column-views 2.4.4 → 3.0.0

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

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

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

@@ -0,0 +1,31 @@
+interface KeyboardNavProps {
+    showTriangulation: boolean;
+}
+export declare function ColumnKeyboardNavigation(props: KeyboardNavProps): any;
+export declare function buildKeyboardNavigationStyle(color?: string): {
+    sources: {
+        "column-links": GeoJSONSourceRaw;
+    };
+    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 {};

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

@@ -0,0 +1,99 @@
+import { useMemo, useCallback, useEffect } from "react";
+import { buildGeoJSONSource, setGeoJSON } from "@macrostrat/mapbox-utils";
+import { useMapRef, 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 columns = useColumnNavigationStore((state) => state.columns);
+  const col_id = useColumnNavigationStore((state) => state.selectedColumn);
+  const selectColumn = useColumnNavigationStore((state) => state.selectColumn);
+  const voronoi = useMemo(() => {
+    if (!columns || columns.length == 0) return null;
+    return buildTriangulation(columns);
+  }, [columns]);
+  const mapRef = useMapRef();
+  const map = mapRef.current;
+  const keyMapping = 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 buildKeyMapping(
+      neighbors,
+      voronoi.centroids,
+      currentIndex,
+      projection
+    );
+  }, [col_id, columns, voronoi, map]);
+  const onKeyDown = 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]
+  );
+  useEffect(() => {
+    if (map == null) return;
+    const canvas = map.getCanvas();
+    canvas.addEventListener("keydown", onKeyDown);
+    return () => {
+      canvas.removeEventListener("keydown", onKeyDown);
+    };
+  }, [map, onKeyDown]);
+  useMapStyleOperator(
+    (map2) => {
+      if (voronoi == null || !showTriangulation) return;
+      const { features } = voronoi.tri.links();
+      setGeoJSON(map2, "column-links", {
+        type: "FeatureCollection",
+        features
+      });
+    },
+    [voronoi, showTriangulation]
+  );
+  return null;
+}
+function buildKeyboardNavigationStyle(color = "purple") {
+  return {
+    sources: {
+      "column-links": 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
+        }
+      }
+    ]
+  };
+}
+export {
+  ColumnKeyboardNavigation,
+  buildKeyboardNavigationStyle
+};
+//# sourceMappingURL=keyboard-navigation.js.map

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

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

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

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const zustand = require("zustand");
+const React = require("react");
+const h = require("@macrostrat/hyper");
+const base = require("../../../data-provider/base.cjs");
+const NavigationStoreContext = React.createContext(
+  null
+);
+function ColumnNavigationProvider({
+  children,
+  columns,
+  columnIDs,
+  selectedColumn,
+  projectID,
+  inProcess,
+  onSelectColumn,
+  onHoverColumn
+}) {
+  base.useMacrostratStore((s) => s.getColumns);
+  const [store] = React.useState(() => {
+    return zustand.create((set, get) => {
+      return {
+        columns: null,
+        selectedColumn: null,
+        hoveredColumn: null,
+        selectColumn(columnID) {
+          set({ selectedColumn: columnID, hoveredColumn: null });
+          const { columns: columns2 } = get();
+          const column = columns2?.find((d) => d.id == columnID);
+          onSelectColumn?.(columnID, column);
+        },
+        setHoveredColumn(columnID) {
+          set({ hoveredColumn: columnID });
+          const { columns: columns2 } = get();
+          const column = columns2?.find((d) => d.id == columnID);
+          onHoverColumn?.(columnID, column);
+        }
+      };
+    });
+  });
+  let _columns = columns ?? base.useMacrostratColumns(projectID, inProcess);
+  if (columnIDs?.length > 0) {
+    _columns = React.useMemo(() => {
+      return _columns?.filter((d) => columnIDs.includes(d.properties.col_id));
+    }, [columnIDs, _columns]);
+  }
+  React.useEffect(() => {
+    if (_columns?.length > 0) {
+      store.setState({ columns: _columns, selectedColumn });
+    }
+  }, [_columns]);
+  React.useEffect(() => {
+    const { selectColumn, selectedColumn: _internalSelectedColumn } = store.getState();
+    if (selectedColumn == _internalSelectedColumn) {
+      return;
+    }
+    selectColumn(selectedColumn);
+  }, [selectedColumn]);
+  return h(NavigationStoreContext.Provider, { value: store }, children);
+}
+function useColumnNavigationStore(selector) {
+  const storeApi = React.useContext(NavigationStoreContext);
+  if (storeApi == null) {
+    throw new Error("Missing ColumnNavigationProvider");
+  }
+  return zustand.useStore(storeApi, selector);
+}
+exports.ColumnNavigationProvider = ColumnNavigationProvider;
+exports.useColumnNavigationStore = useColumnNavigationStore;
+//# sourceMappingURL=state.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"state.cjs","sources":["../../../../src/maps/column-navigation/mapbox/state.ts"],"sourcesContent":["import { create, StoreApi, useStore } from \"zustand\";\nimport type { ColumnGeoJSONRecordWithID } from \"@macrostrat/api-types\";\nimport {\n  createContext,\n  useState,\n  useContext,\n  ReactNode,\n  useEffect,\n  useMemo,\n} from \"react\";\nimport h from \"@macrostrat/hyper\";\nimport {\n  useMacrostratColumns,\n  useMacrostratStore,\n} from \"../../../data-provider\";\n\nexport interface NavigationStore {\n  columns: ColumnGeoJSONRecordWithID[];\n  selectedColumn: number | null;\n  hoveredColumn: number | null;\n  selectColumn: (columnID: number | null) => void;\n  setHoveredColumn: (columnID: number | null) => void;\n}\n\nexport interface NavigationProviderProps {\n  projectID?: number;\n  inProcess?: boolean;\n  selectedColumn?: number | null;\n  hoveredColumn?: number | null;\n  columns?: ColumnGeoJSONRecordWithID[] | null;\n  columnIDs?: number[] | null;\n  children: ReactNode;\n  onSelectColumn?: (col_id: number | null, column: any) => void;\n  onHoverColumn?: (col_id: number | null, column: any) => void;\n}\n\nconst NavigationStoreContext = createContext<StoreApi<NavigationStore> | null>(\n  null,\n);\n\nexport function ColumnNavigationProvider({\n  children,\n  columns,\n  columnIDs,\n  selectedColumn,\n  projectID,\n  inProcess,\n  onSelectColumn,\n  onHoverColumn,\n}: NavigationProviderProps) {\n  const getColumns = useMacrostratStore((s) => s.getColumns);\n\n  const [store] = useState(() => {\n    return create<NavigationStore>((set, get): NavigationStore => {\n      return {\n        columns: null,\n        selectedColumn: null,\n        hoveredColumn: null,\n        selectColumn(columnID: number | null) {\n          set({ selectedColumn: columnID, hoveredColumn: null });\n          const { columns } = get();\n          const column = columns?.find((d) => d.id == columnID);\n          onSelectColumn?.(columnID, column);\n        },\n        setHoveredColumn(columnID: number | null) {\n          set({ hoveredColumn: columnID });\n          const { columns } = get();\n          const column = columns?.find((d) => d.id == columnID);\n          onHoverColumn?.(columnID, column);\n        },\n      };\n    });\n  });\n\n  // Set up the store\n  /** TODO: unify handling of columns between parts of application */\n  // useAsyncEffect(async () => {\n  //   let _columns = columns ?? (await getColumns(projectID, inProcess));\n  //   store.setState({ columns: _columns, selectedColumn });\n  // }, [projectID, inProcess, columns, getColumns]);\n\n  let _columns = columns ?? useMacrostratColumns(projectID, inProcess);\n\n  // filter columns if specified\n  if (columnIDs?.length > 0) {\n    _columns = useMemo(() => {\n      return _columns?.filter((d) => columnIDs.includes(d.properties.col_id));\n    }, [columnIDs, _columns]);\n  }\n\n  useEffect(() => {\n    if (_columns?.length > 0) {\n      store.setState({ columns: _columns, selectedColumn });\n    }\n  }, [_columns]);\n  // Update selected column if it is changed externally\n\n  // Kind of an awkward way to do this but we need to allow the selector to run\n  useEffect(() => {\n    const { selectColumn, selectedColumn: _internalSelectedColumn } =\n      store.getState();\n    if (selectedColumn == _internalSelectedColumn) {\n      return;\n    }\n    selectColumn(selectedColumn);\n  }, [selectedColumn]);\n\n  return h(NavigationStoreContext.Provider, { value: store }, children);\n}\n\nexport function useColumnNavigationStore(\n  selector: (state: NavigationStore) => any,\n) {\n  const storeApi = useContext(NavigationStoreContext);\n  if (storeApi == null) {\n    throw new Error(\"Missing ColumnNavigationProvider\");\n  }\n  return useStore(storeApi, selector);\n}\n"],"names":["createContext","useMacrostratStore","useState","create","columns","useMacrostratColumns","useMemo","useEffect","useContext","useStore"],"mappings":";;;;;;AAoCA,MAAM,yBAAyBA,MAAAA;AAAAA,EAC7B;AACF;AAEO,SAAS,yBAAyB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AACPC,0BAAmB,CAAC,MAAM,EAAE,UAAU;AAEzD,QAAM,CAAC,KAAK,IAAIC,MAAAA,SAAS,MAAM;AAC7B,WAAOC,QAAAA,OAAwB,CAAC,KAAK,QAAyB;AAC5D,aAAO;AAAA,QACL,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,eAAe;AAAA,QACf,aAAa,UAAyB;AACpC,cAAI,EAAE,gBAAgB,UAAU,eAAe,MAAM;AACrD,gBAAM,EAAE,SAAAC,SAAAA,IAAY,IAAA;AACpB,gBAAM,SAASA,UAAS,KAAK,CAAC,MAAM,EAAE,MAAM,QAAQ;AACpD,2BAAiB,UAAU,MAAM;AAAA,QACnC;AAAA,QACA,iBAAiB,UAAyB;AACxC,cAAI,EAAE,eAAe,UAAU;AAC/B,gBAAM,EAAE,SAAAA,SAAAA,IAAY,IAAA;AACpB,gBAAM,SAASA,UAAS,KAAK,CAAC,MAAM,EAAE,MAAM,QAAQ;AACpD,0BAAgB,UAAU,MAAM;AAAA,QAClC;AAAA,MAAA;AAAA,IAEJ,CAAC;AAAA,EACH,CAAC;AASD,MAAI,WAAW,WAAWC,0BAAqB,WAAW,SAAS;AAGnE,MAAI,WAAW,SAAS,GAAG;AACzB,eAAWC,MAAAA,QAAQ,MAAM;AACvB,aAAO,UAAU,OAAO,CAAC,MAAM,UAAU,SAAS,EAAE,WAAW,MAAM,CAAC;AAAA,IACxE,GAAG,CAAC,WAAW,QAAQ,CAAC;AAAA,EAC1B;AAEAC,QAAAA,UAAU,MAAM;AACd,QAAI,UAAU,SAAS,GAAG;AACxB,YAAM,SAAS,EAAE,SAAS,UAAU,gBAAgB;AAAA,IACtD;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAIbA,QAAAA,UAAU,MAAM;AACd,UAAM,EAAE,cAAc,gBAAgB,wBAAA,IACpC,MAAM,SAAA;AACR,QAAI,kBAAkB,yBAAyB;AAC7C;AAAA,IACF;AACA,iBAAa,cAAc;AAAA,EAC7B,GAAG,CAAC,cAAc,CAAC;AAEnB,SAAO,EAAE,uBAAuB,UAAU,EAAE,OAAO,MAAA,GAAS,QAAQ;AACtE;AAEO,SAAS,yBACd,UACA;AACA,QAAM,WAAWC,MAAAA,WAAW,sBAAsB;AAClD,MAAI,YAAY,MAAM;AACpB,UAAM,IAAI,MAAM,kCAAkC;AAAA,EACpD;AACA,SAAOC,QAAAA,SAAS,UAAU,QAAQ;AACpC;;;"}

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

@@ -0,0 +1,23 @@
+import { StoreApi } from 'zustand';
+import { ColumnGeoJSONRecordWithID } from '@macrostrat/api-types';
+import { ReactNode } from 'react';
+export interface NavigationStore {
+    columns: ColumnGeoJSONRecordWithID[];
+    selectedColumn: number | null;
+    hoveredColumn: number | null;
+    selectColumn: (columnID: number | null) => void;
+    setHoveredColumn: (columnID: number | null) => void;
+}
+export interface NavigationProviderProps {
+    projectID?: number;
+    inProcess?: boolean;
+    selectedColumn?: number | null;
+    hoveredColumn?: number | null;
+    columns?: ColumnGeoJSONRecordWithID[] | null;
+    columnIDs?: number[] | null;
+    children: ReactNode;
+    onSelectColumn?: (col_id: number | null, column: any) => void;
+    onHoverColumn?: (col_id: number | null, column: any) => void;
+}
+export declare function ColumnNavigationProvider({ children, columns, columnIDs, selectedColumn, projectID, inProcess, onSelectColumn, onHoverColumn, }: NavigationProviderProps): import('react').FunctionComponentElement<import('react').ProviderProps<StoreApi<NavigationStore>>>;
+export declare function useColumnNavigationStore(selector: (state: NavigationStore) => any): any;

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

@@ -0,0 +1,71 @@
+import { create, useStore } from "zustand";
+import { useState, useMemo, useEffect, createContext, useContext } from "react";
+import h from "@macrostrat/hyper";
+import { useMacrostratStore, useMacrostratColumns } from "../../../data-provider/base.js";
+const NavigationStoreContext = createContext(
+  null
+);
+function ColumnNavigationProvider({
+  children,
+  columns,
+  columnIDs,
+  selectedColumn,
+  projectID,
+  inProcess,
+  onSelectColumn,
+  onHoverColumn
+}) {
+  useMacrostratStore((s) => s.getColumns);
+  const [store] = useState(() => {
+    return create((set, get) => {
+      return {
+        columns: null,
+        selectedColumn: null,
+        hoveredColumn: null,
+        selectColumn(columnID) {
+          set({ selectedColumn: columnID, hoveredColumn: null });
+          const { columns: columns2 } = get();
+          const column = columns2?.find((d) => d.id == columnID);
+          onSelectColumn?.(columnID, column);
+        },
+        setHoveredColumn(columnID) {
+          set({ hoveredColumn: columnID });
+          const { columns: columns2 } = get();
+          const column = columns2?.find((d) => d.id == columnID);
+          onHoverColumn?.(columnID, column);
+        }
+      };
+    });
+  });
+  let _columns = columns ?? useMacrostratColumns(projectID, inProcess);
+  if (columnIDs?.length > 0) {
+    _columns = useMemo(() => {
+      return _columns?.filter((d) => columnIDs.includes(d.properties.col_id));
+    }, [columnIDs, _columns]);
+  }
+  useEffect(() => {
+    if (_columns?.length > 0) {
+      store.setState({ columns: _columns, selectedColumn });
+    }
+  }, [_columns]);
+  useEffect(() => {
+    const { selectColumn, selectedColumn: _internalSelectedColumn } = store.getState();
+    if (selectedColumn == _internalSelectedColumn) {
+      return;
+    }
+    selectColumn(selectedColumn);
+  }, [selectedColumn]);
+  return h(NavigationStoreContext.Provider, { value: store }, children);
+}
+function useColumnNavigationStore(selector) {
+  const storeApi = useContext(NavigationStoreContext);
+  if (storeApi == null) {
+    throw new Error("Missing ColumnNavigationProvider");
+  }
+  return useStore(storeApi, selector);
+}
+export {
+  ColumnNavigationProvider,
+  useColumnNavigationStore
+};
+//# sourceMappingURL=state.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"state.js","sources":["../../../../src/maps/column-navigation/mapbox/state.ts"],"sourcesContent":["import { create, StoreApi, useStore } from \"zustand\";\nimport type { ColumnGeoJSONRecordWithID } from \"@macrostrat/api-types\";\nimport {\n  createContext,\n  useState,\n  useContext,\n  ReactNode,\n  useEffect,\n  useMemo,\n} from \"react\";\nimport h from \"@macrostrat/hyper\";\nimport {\n  useMacrostratColumns,\n  useMacrostratStore,\n} from \"../../../data-provider\";\n\nexport interface NavigationStore {\n  columns: ColumnGeoJSONRecordWithID[];\n  selectedColumn: number | null;\n  hoveredColumn: number | null;\n  selectColumn: (columnID: number | null) => void;\n  setHoveredColumn: (columnID: number | null) => void;\n}\n\nexport interface NavigationProviderProps {\n  projectID?: number;\n  inProcess?: boolean;\n  selectedColumn?: number | null;\n  hoveredColumn?: number | null;\n  columns?: ColumnGeoJSONRecordWithID[] | null;\n  columnIDs?: number[] | null;\n  children: ReactNode;\n  onSelectColumn?: (col_id: number | null, column: any) => void;\n  onHoverColumn?: (col_id: number | null, column: any) => void;\n}\n\nconst NavigationStoreContext = createContext<StoreApi<NavigationStore> | null>(\n  null,\n);\n\nexport function ColumnNavigationProvider({\n  children,\n  columns,\n  columnIDs,\n  selectedColumn,\n  projectID,\n  inProcess,\n  onSelectColumn,\n  onHoverColumn,\n}: NavigationProviderProps) {\n  const getColumns = useMacrostratStore((s) => s.getColumns);\n\n  const [store] = useState(() => {\n    return create<NavigationStore>((set, get): NavigationStore => {\n      return {\n        columns: null,\n        selectedColumn: null,\n        hoveredColumn: null,\n        selectColumn(columnID: number | null) {\n          set({ selectedColumn: columnID, hoveredColumn: null });\n          const { columns } = get();\n          const column = columns?.find((d) => d.id == columnID);\n          onSelectColumn?.(columnID, column);\n        },\n        setHoveredColumn(columnID: number | null) {\n          set({ hoveredColumn: columnID });\n          const { columns } = get();\n          const column = columns?.find((d) => d.id == columnID);\n          onHoverColumn?.(columnID, column);\n        },\n      };\n    });\n  });\n\n  // Set up the store\n  /** TODO: unify handling of columns between parts of application */\n  // useAsyncEffect(async () => {\n  //   let _columns = columns ?? (await getColumns(projectID, inProcess));\n  //   store.setState({ columns: _columns, selectedColumn });\n  // }, [projectID, inProcess, columns, getColumns]);\n\n  let _columns = columns ?? useMacrostratColumns(projectID, inProcess);\n\n  // filter columns if specified\n  if (columnIDs?.length > 0) {\n    _columns = useMemo(() => {\n      return _columns?.filter((d) => columnIDs.includes(d.properties.col_id));\n    }, [columnIDs, _columns]);\n  }\n\n  useEffect(() => {\n    if (_columns?.length > 0) {\n      store.setState({ columns: _columns, selectedColumn });\n    }\n  }, [_columns]);\n  // Update selected column if it is changed externally\n\n  // Kind of an awkward way to do this but we need to allow the selector to run\n  useEffect(() => {\n    const { selectColumn, selectedColumn: _internalSelectedColumn } =\n      store.getState();\n    if (selectedColumn == _internalSelectedColumn) {\n      return;\n    }\n    selectColumn(selectedColumn);\n  }, [selectedColumn]);\n\n  return h(NavigationStoreContext.Provider, { value: store }, children);\n}\n\nexport function useColumnNavigationStore(\n  selector: (state: NavigationStore) => any,\n) {\n  const storeApi = useContext(NavigationStoreContext);\n  if (storeApi == null) {\n    throw new Error(\"Missing ColumnNavigationProvider\");\n  }\n  return useStore(storeApi, selector);\n}\n"],"names":["columns"],"mappings":";;;;AAoCA,MAAM,yBAAyB;AAAA,EAC7B;AACF;AAEO,SAAS,yBAAyB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AACP,qBAAmB,CAAC,MAAM,EAAE,UAAU;AAEzD,QAAM,CAAC,KAAK,IAAI,SAAS,MAAM;AAC7B,WAAO,OAAwB,CAAC,KAAK,QAAyB;AAC5D,aAAO;AAAA,QACL,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,eAAe;AAAA,QACf,aAAa,UAAyB;AACpC,cAAI,EAAE,gBAAgB,UAAU,eAAe,MAAM;AACrD,gBAAM,EAAE,SAAAA,SAAAA,IAAY,IAAA;AACpB,gBAAM,SAASA,UAAS,KAAK,CAAC,MAAM,EAAE,MAAM,QAAQ;AACpD,2BAAiB,UAAU,MAAM;AAAA,QACnC;AAAA,QACA,iBAAiB,UAAyB;AACxC,cAAI,EAAE,eAAe,UAAU;AAC/B,gBAAM,EAAE,SAAAA,SAAAA,IAAY,IAAA;AACpB,gBAAM,SAASA,UAAS,KAAK,CAAC,MAAM,EAAE,MAAM,QAAQ;AACpD,0BAAgB,UAAU,MAAM;AAAA,QAClC;AAAA,MAAA;AAAA,IAEJ,CAAC;AAAA,EACH,CAAC;AASD,MAAI,WAAW,WAAW,qBAAqB,WAAW,SAAS;AAGnE,MAAI,WAAW,SAAS,GAAG;AACzB,eAAW,QAAQ,MAAM;AACvB,aAAO,UAAU,OAAO,CAAC,MAAM,UAAU,SAAS,EAAE,WAAW,MAAM,CAAC;AAAA,IACxE,GAAG,CAAC,WAAW,QAAQ,CAAC;AAAA,EAC1B;AAEA,YAAU,MAAM;AACd,QAAI,UAAU,SAAS,GAAG;AACxB,YAAM,SAAS,EAAE,SAAS,UAAU,gBAAgB;AAAA,IACtD;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAIb,YAAU,MAAM;AACd,UAAM,EAAE,cAAc,gBAAgB,wBAAA,IACpC,MAAM,SAAA;AACR,QAAI,kBAAkB,yBAAyB;AAC7C;AAAA,IACF;AACA,iBAAa,cAAc;AAAA,EAC7B,GAAG,CAAC,cAAc,CAAC;AAEnB,SAAO,EAAE,uBAAuB,UAAU,EAAE,OAAO,MAAA,GAAS,QAAQ;AACtE;AAEO,SAAS,yBACd,UACA;AACA,QAAM,WAAW,WAAW,sBAAsB;AAClD,MAAI,YAAY,MAAM;AACpB,UAAM,IAAI,MAAM,kCAAkC;AAAA,EACpD;AACA,SAAO,SAAS,UAAU,QAAQ;AACpC;"}

package/dist/maps/column-navigation/svg/animated.d.ts

@@ -0,0 +1 @@
+export declare const AnimatedMapView: (props: any) => import('react').FunctionComponentElement<any>;

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

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const h = require("@macrostrat/hyper");
+const svgMapComponents = require("@macrostrat/svg-map-components");
+const d3Geo = require("d3-geo");
+const uiComponents = require("@macrostrat/ui-components");
+const layers = require("./layers.cjs");
+function ResizableMapFrame(props) {
+  const { center, children, style, margin, className, allowZoom, ...rest } = props;
+  let { scale } = props;
+  const ref = React.useRef(null);
+  const sz = uiComponents.useElementSize(ref);
+  const { width, height } = sz ?? { width: 0, height: 0 };
+  if (scale == null) {
+    scale = Math.min(width, height) + 2 * margin;
+  }
+  let zoomScaleExtent = null;
+  if (allowZoom) {
+    zoomScaleExtent = [
+      0.1 * Math.min(width, height),
+      2 * Math.max(width, height)
+    ];
+  }
+  return h("div.map-area", { ref, style, className }, [
+    h(
+      svgMapComponents.Globe,
+      {
+        width,
+        height,
+        margin,
+        center,
+        allowDrag: true,
+        allowZoom,
+        keepNorthUp: true,
+        zoomScaleExtent,
+        ...rest,
+        scale
+      },
+      [h(svgMapComponents.LandLayer), children]
+    )
+  ]);
+}
+function ColumnNavigationSVGMap(props) {
+  const {
+    currentColumn,
+    setCurrentColumn,
+    children,
+    style,
+    margin = 10,
+    scale,
+    className,
+    showInProcessColumns = false,
+    showDebugLayers = false,
+    center,
+    ...rest
+  } = props;
+  let _center = center ?? [-100, 38];
+  if (currentColumn != null) {
+    _center = d3Geo.geoCentroid(currentColumn);
+  }
+  return h(
+    ResizableMapFrame,
+    { center: _center, style, margin, scale, className },
+    [
+      children,
+      h(layers.Columns, {
+        onChange: setCurrentColumn,
+        col_id: currentColumn?.properties.col_id,
+        showDebugLayers,
+        ...rest
+      }),
+      h.if(showInProcessColumns)(layers.Columns, {
+        onChange: setCurrentColumn,
+        col_id: currentColumn?.properties.col_id,
+        status_code: "in process",
+        color: "rgba(200,150,150, 0.5)",
+        ...rest
+      }),
+      h.if(currentColumn != null)(layers.CurrentColumn, { feature: currentColumn })
+    ]
+  );
+}
+exports.ColumnCenters = layers.ColumnCenters;
+exports.ColumnFeatures = layers.ColumnFeatures;
+exports.ColumnKeyboardNavigation = layers.ColumnKeyboardNavigation;
+exports.Columns = layers.Columns;
+exports.CurrentColumn = layers.CurrentColumn;
+exports.MeasurementsLayer = layers.MeasurementsLayer;
+exports.ColumnNavigationSVGMap = ColumnNavigationSVGMap;
+exports.ResizableMapFrame = ResizableMapFrame;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/maps/column-navigation/svg/index.ts"],"sourcesContent":["import { useRef } from \"react\";\nimport h from \"@macrostrat/hyper\";\nimport { Globe, LandLayer } from \"@macrostrat/svg-map-components\";\nimport { geoCentroid } from \"d3-geo\";\nimport { useElementSize } from \"@macrostrat/ui-components\";\nimport { Columns, CurrentColumn } from \"./layers\";\nimport type { LngLatLike } from \"mapbox-gl\";\n\nexport function ResizableMapFrame(props) {\n  const { center, children, style, margin, className, allowZoom, ...rest } =\n    props;\n  let { scale } = props;\n  const ref = useRef(null);\n  const sz = useElementSize(ref);\n  const { width, height } = sz ?? { width: 0, height: 0 };\n  if (scale == null) {\n    scale = Math.min(width, height) + 2 * margin;\n  }\n\n  let zoomScaleExtent = null;\n\n  if (allowZoom) {\n    zoomScaleExtent = [\n      0.1 * Math.min(width, height),\n      2 * Math.max(width, height),\n    ];\n  }\n\n  return h(\"div.map-area\", { ref, style, className }, [\n    h(\n      Globe,\n      {\n        width,\n        height,\n        margin,\n        center,\n        allowDrag: true,\n        allowZoom,\n        keepNorthUp: true,\n        zoomScaleExtent,\n        ...rest,\n        scale,\n      },\n      [h(LandLayer), children],\n    ),\n  ]);\n}\n\ntype ColumnNavigationSVGMapProps = any;\nexport type { ColumnNavigationSVGMapProps };\n\nexport function ColumnNavigationSVGMap(props) {\n  const {\n    currentColumn,\n    setCurrentColumn,\n    children,\n    style,\n    margin = 10,\n    scale,\n    className,\n    showInProcessColumns = false,\n    showDebugLayers = false,\n    center,\n    ...rest\n  } = props;\n\n  let _center: LngLatLike | null = center ?? [-100, 38];\n  // Override center if currentColumn is set\n  if (currentColumn != null) {\n    _center = geoCentroid(currentColumn);\n  }\n\n  return h(\n    ResizableMapFrame,\n    { center: _center, style, margin, scale, className },\n    [\n      children,\n      h(Columns, {\n        onChange: setCurrentColumn,\n        col_id: currentColumn?.properties.col_id,\n        showDebugLayers,\n        ...rest,\n      }),\n      h.if(showInProcessColumns)(Columns, {\n        onChange: setCurrentColumn,\n        col_id: currentColumn?.properties.col_id,\n        status_code: \"in process\",\n        color: \"rgba(200,150,150, 0.5)\",\n        ...rest,\n      }),\n      h.if(currentColumn != null)(CurrentColumn, { feature: currentColumn }),\n    ],\n  );\n}\n\nexport * from \"./layers\";\n"],"names":["useRef","useElementSize","Globe","LandLayer","geoCentroid","Columns","CurrentColumn"],"mappings":";;;;;;;;AAQO,SAAS,kBAAkB,OAAO;AACvC,QAAM,EAAE,QAAQ,UAAU,OAAO,QAAQ,WAAW,WAAW,GAAG,KAAA,IAChE;AACF,MAAI,EAAE,UAAU;AAChB,QAAM,MAAMA,MAAAA,OAAO,IAAI;AACvB,QAAM,KAAKC,aAAAA,eAAe,GAAG;AAC7B,QAAM,EAAE,OAAO,WAAW,MAAM,EAAE,OAAO,GAAG,QAAQ,EAAA;AACpD,MAAI,SAAS,MAAM;AACjB,YAAQ,KAAK,IAAI,OAAO,MAAM,IAAI,IAAI;AAAA,EACxC;AAEA,MAAI,kBAAkB;AAEtB,MAAI,WAAW;AACb,sBAAkB;AAAA,MAChB,MAAM,KAAK,IAAI,OAAO,MAAM;AAAA,MAC5B,IAAI,KAAK,IAAI,OAAO,MAAM;AAAA,IAAA;AAAA,EAE9B;AAEA,SAAO,EAAE,gBAAgB,EAAE,KAAK,OAAO,aAAa;AAAA,IAClD;AAAA,MACEC,iBAAAA;AAAAA,MACA;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX;AAAA,QACA,aAAa;AAAA,QACb;AAAA,QACA,GAAG;AAAA,QACH;AAAA,MAAA;AAAA,MAEF,CAAC,EAAEC,iBAAAA,SAAS,GAAG,QAAQ;AAAA,IAAA;AAAA,EACzB,CACD;AACH;AAKO,SAAS,uBAAuB,OAAO;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,uBAAuB;AAAA,IACvB,kBAAkB;AAAA,IAClB;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AAEJ,MAAI,UAA6B,UAAU,CAAC,MAAM,EAAE;AAEpD,MAAI,iBAAiB,MAAM;AACzB,cAAUC,MAAAA,YAAY,aAAa;AAAA,EACrC;AAEA,SAAO;AAAA,IACL;AAAA,IACA,EAAE,QAAQ,SAAS,OAAO,QAAQ,OAAO,UAAA;AAAA,IACzC;AAAA,MACE;AAAA,MACA,EAAEC,OAAAA,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,eAAe,WAAW;AAAA,QAClC;AAAA,QACA,GAAG;AAAA,MAAA,CACJ;AAAA,MACD,EAAE,GAAG,oBAAoB,EAAEA,gBAAS;AAAA,QAClC,UAAU;AAAA,QACV,QAAQ,eAAe,WAAW;AAAA,QAClC,aAAa;AAAA,QACb,OAAO;AAAA,QACP,GAAG;AAAA,MAAA,CACJ;AAAA,MACD,EAAE,GAAG,iBAAiB,IAAI,EAAEC,sBAAe,EAAE,SAAS,cAAA,CAAe;AAAA,IAAA;AAAA,EACvE;AAEJ;;;;;;;;;"}

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

@@ -0,0 +1,9 @@
+export declare function ResizableMapFrame(props: any): import('react').ReactElement<{
+    ref: import('react').MutableRefObject<any>;
+    style: any;
+    className: any;
+}, string | import('react').JSXElementConstructor<any>>;
+type ColumnNavigationSVGMapProps = any;
+export type { ColumnNavigationSVGMapProps };
+export declare function ColumnNavigationSVGMap(props: any): import('react').FunctionComponentElement<any>;
+export * from './layers';

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

@@ -0,0 +1,93 @@
+import { useRef } from "react";
+import h from "@macrostrat/hyper";
+import { Globe, LandLayer } from "@macrostrat/svg-map-components";
+import { geoCentroid } from "d3-geo";
+import { useElementSize } from "@macrostrat/ui-components";
+import { Columns, CurrentColumn } from "./layers.js";
+import { ColumnCenters, ColumnFeatures, ColumnKeyboardNavigation, MeasurementsLayer } from "./layers.js";
+function ResizableMapFrame(props) {
+  const { center, children, style, margin, className, allowZoom, ...rest } = props;
+  let { scale } = props;
+  const ref = useRef(null);
+  const sz = useElementSize(ref);
+  const { width, height } = sz ?? { width: 0, height: 0 };
+  if (scale == null) {
+    scale = Math.min(width, height) + 2 * margin;
+  }
+  let zoomScaleExtent = null;
+  if (allowZoom) {
+    zoomScaleExtent = [
+      0.1 * Math.min(width, height),
+      2 * Math.max(width, height)
+    ];
+  }
+  return h("div.map-area", { ref, style, className }, [
+    h(
+      Globe,
+      {
+        width,
+        height,
+        margin,
+        center,
+        allowDrag: true,
+        allowZoom,
+        keepNorthUp: true,
+        zoomScaleExtent,
+        ...rest,
+        scale
+      },
+      [h(LandLayer), children]
+    )
+  ]);
+}
+function ColumnNavigationSVGMap(props) {
+  const {
+    currentColumn,
+    setCurrentColumn,
+    children,
+    style,
+    margin = 10,
+    scale,
+    className,
+    showInProcessColumns = false,
+    showDebugLayers = false,
+    center,
+    ...rest
+  } = props;
+  let _center = center ?? [-100, 38];
+  if (currentColumn != null) {
+    _center = geoCentroid(currentColumn);
+  }
+  return h(
+    ResizableMapFrame,
+    { center: _center, style, margin, scale, className },
+    [
+      children,
+      h(Columns, {
+        onChange: setCurrentColumn,
+        col_id: currentColumn?.properties.col_id,
+        showDebugLayers,
+        ...rest
+      }),
+      h.if(showInProcessColumns)(Columns, {
+        onChange: setCurrentColumn,
+        col_id: currentColumn?.properties.col_id,
+        status_code: "in process",
+        color: "rgba(200,150,150, 0.5)",
+        ...rest
+      }),
+      h.if(currentColumn != null)(CurrentColumn, { feature: currentColumn })
+    ]
+  );
+}
+export {
+  ColumnCenters,
+  ColumnFeatures,
+  ColumnKeyboardNavigation,
+  ColumnNavigationSVGMap,
+  Columns,
+  CurrentColumn,
+  MeasurementsLayer,
+  ResizableMapFrame
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/maps/column-navigation/svg/index.ts"],"sourcesContent":["import { useRef } from \"react\";\nimport h from \"@macrostrat/hyper\";\nimport { Globe, LandLayer } from \"@macrostrat/svg-map-components\";\nimport { geoCentroid } from \"d3-geo\";\nimport { useElementSize } from \"@macrostrat/ui-components\";\nimport { Columns, CurrentColumn } from \"./layers\";\nimport type { LngLatLike } from \"mapbox-gl\";\n\nexport function ResizableMapFrame(props) {\n  const { center, children, style, margin, className, allowZoom, ...rest } =\n    props;\n  let { scale } = props;\n  const ref = useRef(null);\n  const sz = useElementSize(ref);\n  const { width, height } = sz ?? { width: 0, height: 0 };\n  if (scale == null) {\n    scale = Math.min(width, height) + 2 * margin;\n  }\n\n  let zoomScaleExtent = null;\n\n  if (allowZoom) {\n    zoomScaleExtent = [\n      0.1 * Math.min(width, height),\n      2 * Math.max(width, height),\n    ];\n  }\n\n  return h(\"div.map-area\", { ref, style, className }, [\n    h(\n      Globe,\n      {\n        width,\n        height,\n        margin,\n        center,\n        allowDrag: true,\n        allowZoom,\n        keepNorthUp: true,\n        zoomScaleExtent,\n        ...rest,\n        scale,\n      },\n      [h(LandLayer), children],\n    ),\n  ]);\n}\n\ntype ColumnNavigationSVGMapProps = any;\nexport type { ColumnNavigationSVGMapProps };\n\nexport function ColumnNavigationSVGMap(props) {\n  const {\n    currentColumn,\n    setCurrentColumn,\n    children,\n    style,\n    margin = 10,\n    scale,\n    className,\n    showInProcessColumns = false,\n    showDebugLayers = false,\n    center,\n    ...rest\n  } = props;\n\n  let _center: LngLatLike | null = center ?? [-100, 38];\n  // Override center if currentColumn is set\n  if (currentColumn != null) {\n    _center = geoCentroid(currentColumn);\n  }\n\n  return h(\n    ResizableMapFrame,\n    { center: _center, style, margin, scale, className },\n    [\n      children,\n      h(Columns, {\n        onChange: setCurrentColumn,\n        col_id: currentColumn?.properties.col_id,\n        showDebugLayers,\n        ...rest,\n      }),\n      h.if(showInProcessColumns)(Columns, {\n        onChange: setCurrentColumn,\n        col_id: currentColumn?.properties.col_id,\n        status_code: \"in process\",\n        color: \"rgba(200,150,150, 0.5)\",\n        ...rest,\n      }),\n      h.if(currentColumn != null)(CurrentColumn, { feature: currentColumn }),\n    ],\n  );\n}\n\nexport * from \"./layers\";\n"],"names":[],"mappings":";;;;;;;AAQO,SAAS,kBAAkB,OAAO;AACvC,QAAM,EAAE,QAAQ,UAAU,OAAO,QAAQ,WAAW,WAAW,GAAG,KAAA,IAChE;AACF,MAAI,EAAE,UAAU;AAChB,QAAM,MAAM,OAAO,IAAI;AACvB,QAAM,KAAK,eAAe,GAAG;AAC7B,QAAM,EAAE,OAAO,WAAW,MAAM,EAAE,OAAO,GAAG,QAAQ,EAAA;AACpD,MAAI,SAAS,MAAM;AACjB,YAAQ,KAAK,IAAI,OAAO,MAAM,IAAI,IAAI;AAAA,EACxC;AAEA,MAAI,kBAAkB;AAEtB,MAAI,WAAW;AACb,sBAAkB;AAAA,MAChB,MAAM,KAAK,IAAI,OAAO,MAAM;AAAA,MAC5B,IAAI,KAAK,IAAI,OAAO,MAAM;AAAA,IAAA;AAAA,EAE9B;AAEA,SAAO,EAAE,gBAAgB,EAAE,KAAK,OAAO,aAAa;AAAA,IAClD;AAAA,MACE;AAAA,MACA;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX;AAAA,QACA,aAAa;AAAA,QACb;AAAA,QACA,GAAG;AAAA,QACH;AAAA,MAAA;AAAA,MAEF,CAAC,EAAE,SAAS,GAAG,QAAQ;AAAA,IAAA;AAAA,EACzB,CACD;AACH;AAKO,SAAS,uBAAuB,OAAO;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,uBAAuB;AAAA,IACvB,kBAAkB;AAAA,IAClB;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AAEJ,MAAI,UAA6B,UAAU,CAAC,MAAM,EAAE;AAEpD,MAAI,iBAAiB,MAAM;AACzB,cAAU,YAAY,aAAa;AAAA,EACrC;AAEA,SAAO;AAAA,IACL;AAAA,IACA,EAAE,QAAQ,SAAS,OAAO,QAAQ,OAAO,UAAA;AAAA,IACzC;AAAA,MACE;AAAA,MACA,EAAE,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,eAAe,WAAW;AAAA,QAClC;AAAA,QACA,GAAG;AAAA,MAAA,CACJ;AAAA,MACD,EAAE,GAAG,oBAAoB,EAAE,SAAS;AAAA,QAClC,UAAU;AAAA,QACV,QAAQ,eAAe,WAAW;AAAA,QAClC,aAAa;AAAA,QACb,OAAO;AAAA,QACP,GAAG;AAAA,MAAA,CACJ;AAAA,MACD,EAAE,GAAG,iBAAiB,IAAI,EAAE,eAAe,EAAE,SAAS,cAAA,CAAe;AAAA,IAAA;AAAA,EACvE;AAEJ;"}