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

React rendering primitives for stratigraphic columns

import { createContext, useContext, useRef } from "react";
import h from "@macrostrat/hyper";
import { useAsyncEffect, geologyPatternURL } from "@macrostrat/ui-components";
const GeologicPatternContext = createContext(null);
const GeologicPatternProvider = (props) => {
  const { resolvePattern, children } = props;
  return h(GeologicPatternContext.Provider, {
    value: { resolvePattern },
    children
  });
};
var PatternType = /* @__PURE__ */ ((PatternType2) => {
  PatternType2["Vector"] = "vector";
  PatternType2["Raster"] = "raster";
  return PatternType2;
})(PatternType || {});
const RasterGeologicPattern = (props) => {
  const { resolvePattern } = useContext(GeologicPatternContext);
  let { prefix, backgroundColor, color, width, height, id, name, ...rest } = props;
  const patternSize = { width, height };
  const patternID = `${prefix}-${name ?? id}`;
  const ref = useRef();
  useAsyncEffect(async () => {
    const { current: img } = ref;
    if (img == null) return;
    try {
      const uri = await 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(
    "pattern",
    {
      id: patternID,
      patternUnits: "userSpaceOnUse",
      ...patternSize,
      ...rest
    },
    h("image", { ref, ...patternSize })
  );
};
const VectorGeologicPattern = (props) => {
  const { resolvePattern } = 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(
    "pattern",
    {
      id: patternID,
      patternUnits: "userSpaceOnUse",
      shapeRendering: "crispEdges",
      ...patternSize,
      ...rest
    },
    [
      h("g", { style: { isolation: "isolate" } }, [
        // Mask, if required
        h.if(color != null && id != null)("mask", { id: maskID }, [
          h("image", {
            xlinkHref: href,
            ...patternBounds
          })
        ]),
        h.if(backgroundColor != null)("rect", {
          ...patternBounds,
          fill: backgroundColor
        }),
        // Render a masked colored image
        h.if(color != null)("rect", {
          ...patternBounds,
          fill: color,
          mask: `url(#${maskID})`
        }),
        // Or render the image as normal
        h.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(VectorGeologicPattern, rest);
    case "raster":
      return h(RasterGeologicPattern, rest);
  }
};
export {
  GeologicPattern,
  GeologicPatternContext,
  GeologicPatternProvider,
  PatternType
};
//# sourceMappingURL=patterns.js.map