@macrostrat/column-components/dist/context/layout.cjs

React rendering primitives for stratigraphic columns

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const d3Scale = require("d3-scale");
const React = require("react");
const h = require("@macrostrat/hyper");
const column = require("./column.cjs");
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
const h__default = /* @__PURE__ */ _interopDefault(h);
const ColumnLayoutContext = React.createContext({
  scale: d3Scale.scaleLinear(),
  scaleClamped: d3Scale.scaleLinear().clamp(true),
  width: 0,
  divisions: [],
  grainSizes: [],
  grainsizeScale: (d) => 40,
  xScale: null,
  widthForDivision: (d) => 0,
  pixelsPerMeter: 1,
  zoom: 1
});
function ColumnLayoutProvider({
  children,
  width,
  grainSizes = [],
  grainsizeScale = (d) => 40,
  xScale
}) {
  const ctx = React.useContext(column.ColumnContext);
  return h__default.default(
    ColumnLayoutContext.Provider,
    {
      value: {
        ...ctx,
        width,
        grainSizes,
        grainsizeScale,
        xScale,
        widthForDivision: (d) => width
      }
    },
    children
  );
}
class CrossAxisLayoutProvider extends React.Component {
  static contextType = column.ColumnContext;
  render() {
    let { domain, range, width, children } = this.props;
    if (range == null) {
      range = [0, width];
    }
    const xScale = d3Scale.scaleLinear().domain(domain).range(range);
    return h__default.default(ColumnLayoutProvider, {
      ...this.context,
      xScale,
      width,
      children
    });
  }
}
function GrainsizeLayoutProvider({
  width,
  grainSizes = ["ms", "s", "vf", "f", "m", "c", "vc", "p"],
  grainsizeScaleStart = 50,
  grainsizeScaleRange,
  tickPositions,
  children
}) {
  if (grainsizeScaleRange == null) {
    console.warn(
      "GrainsizeLayoutProvider: grainsizeScaleStart and width are deprecated in favor of grainsizeScaleRange"
    );
  }
  grainsizeScaleRange ??= [grainsizeScaleStart, width];
  const divisions = column.useColumnDivisions();
  const grainsizeScale = React.useMemo(() => {
    const scale = d3Scale.scaleLinear().domain([0, grainSizes.length - 1]).range(grainsizeScaleRange);
    tickPositions ??= grainSizes.map((d, i) => scale(i));
    return d3Scale.scaleOrdinal().domain(grainSizes).range(tickPositions);
  }, [grainSizes, grainsizeScaleRange, tickPositions]);
  const grainsizeForDivision = React.useCallback(
    (division) => {
      let ix = divisions.indexOf(division);
      while (ix > 0) {
        const { grainsize } = divisions[ix];
        if (grainsize != null) {
          return grainsize;
        }
        ix -= 1;
      }
    },
    [divisions]
  );
  const widthForDivision = React.useCallback(
    (division) => {
      if (division == null) {
        return width;
      }
      return grainsizeScale(grainsizeForDivision(division));
    },
    [grainsizeForDivision, grainsizeScale, width]
  );
  return h__default.default(
    ColumnLayoutProvider,
    {
      width,
      grainSizes,
      grainsizeScale,
      grainsizeScaleStart,
      grainsizeScaleRange,
      grainsizeForDivision,
      widthForDivision
    },
    children
  );
}
function useColumnLayout() {
  const ctx = React.useContext(ColumnLayoutContext);
  if (ctx == null) {
    throw new Error(
      "useColumnLayout must be used within a ColumnLayoutProvider"
    );
  }
  return ctx;
}
exports.ColumnLayoutContext = ColumnLayoutContext;
exports.ColumnLayoutProvider = ColumnLayoutProvider;
exports.CrossAxisLayoutProvider = CrossAxisLayoutProvider;
exports.GrainsizeLayoutProvider = GrainsizeLayoutProvider;
exports.useColumnLayout = useColumnLayout;
//# sourceMappingURL=layout.cjs.map