@macrostrat/column-components/dist/lithology/patterns.cjs

React rendering primitives for stratigraphic columns

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const React = require("react");
const h = require("@macrostrat/hyper");
const uiComponents = require("@macrostrat/ui-components");
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
const h__default = /* @__PURE__ */ _interopDefault(h);
const GeologicPatternContext = React.createContext(null);
const GeologicPatternProvider = (props) => {
  const { resolvePattern, children } = props;
  return h__default.default(GeologicPatternContext.Provider, {
    value: { resolvePattern },
    children
  });
};
var PatternType = /* @__PURE__ */ ((PatternType2) => {
  PatternType2["Vector"] = "vector";
  PatternType2["Raster"] = "raster";
  return PatternType2;
})(PatternType || {});
const RasterGeologicPattern = (props) => {
  const { resolvePattern } = React.useContext(GeologicPatternContext);
  let { prefix, backgroundColor, color, width, height, id, name, ...rest } = props;
  const patternSize = { width, height };
  const patternID = `${prefix}-${name ?? id}`;
  const ref = React.useRef();
  uiComponents.useAsyncEffect(async () => {
    const { current: img } = ref;
    if (img == null) return;
    try {
      const uri = await uiComponents.geologyPatternURL(id, backgroundColor, color);
      img.crossOrigin = "anonymous";
      img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", uri);
    } catch (err) {
      console.error(err);
    }
  }, [id, ref]);
  return h__default.default(
    "pattern",
    {
      id: patternID,
      patternUnits: "userSpaceOnUse",
      ...patternSize,
      ...rest
    },
    h__default.default("image", { ref, ...patternSize })
  );
};
const VectorGeologicPattern = (props) => {
  const { resolvePattern } = React.useContext(GeologicPatternContext) ?? {};
  if (resolvePattern == null) return null;
  let {
    prefix,
    backgroundColor,
    color,
    width = 100,
    height = 100,
    id,
    name,
    ...rest
  } = props;
  const patternSize = { width, height };
  const patternBounds = { x: 0, y: 0, ...patternSize };
  const href = resolvePattern(id);
  if (href == null) {
    return null;
  }
  const patternID = `${prefix}-${name ?? id}`;
  const maskID = `${patternID}-mask`;
  return h__default.default(
    "pattern",
    {
      id: patternID,
      patternUnits: "userSpaceOnUse",
      shapeRendering: "crispEdges",
      ...patternSize,
      ...rest
    },
    [
      h__default.default("g", { style: { isolation: "isolate" } }, [
        // Mask, if required
        h__default.default.if(color != null && id != null)("mask", { id: maskID }, [
          h__default.default("image", {
            xlinkHref: href,
            ...patternBounds
          })
        ]),
        h__default.default.if(backgroundColor != null)("rect", {
          ...patternBounds,
          fill: backgroundColor
        }),
        // Render a masked colored image
        h__default.default.if(color != null)("rect", {
          ...patternBounds,
          fill: color,
          mask: `url(#${maskID})`
        }),
        // Or render the image as normal
        h__default.default.if(id != null && color == null)("image", {
          xlinkHref: href,
          ...patternBounds
        })
      ])
    ]
  );
};
const GeologicPattern = (props) => {
  let { type = "vector", invert, ...rest } = props;
  if (invert ?? false) {
    rest.color = props.backgroundColor;
    rest.backgroundColor = props.color;
  }
  switch (type) {
    case "vector":
      return h__default.default(VectorGeologicPattern, rest);
    case "raster":
      return h__default.default(RasterGeologicPattern, rest);
  }
};
exports.GeologicPattern = GeologicPattern;
exports.GeologicPatternContext = GeologicPatternContext;
exports.GeologicPatternProvider = GeologicPatternProvider;
exports.PatternType = PatternType;
//# sourceMappingURL=patterns.cjs.map