@macrostrat/column-components/dist/util/column-box.js

React rendering primitives for stratigraphic columns

import h from "@macrostrat/hyper";
import { useContext } from "react";
import classNames from "classnames";
import { Box } from "@macrostrat/ui-components";
import { path } from "d3-path";
import { ColumnContext } from "../context/column.js";
function ColumnBox(props) {
  const { offsetTop, absolutePosition, className, ...rest } = props;
  const { pixelsPerMeter, zoom } = useContext(ColumnContext);
  const marginTop = offsetTop * pixelsPerMeter * zoom;
  let pos = { marginTop };
  if (absolutePosition) {
    pos = {
      position: "absolute",
      top: marginTop
    };
  }
  return h(Box, {
    className: classNames("column-box", className),
    ...pos,
    ...rest
  });
}
function zigZagBoxPath(x, y, width, height, top, bottom) {
  const d = path();
  const x1 = x + width;
  d.moveTo(x, y);
  if (top) {
    drawZigZagAtConstantHeight(d, x, x1, y);
  } else {
    d.lineTo(x1, y);
  }
  const yBottom = y + height;
  d.lineTo(x1, yBottom);
  if (bottom) {
    drawZigZagAtConstantHeight(d, x1, x, yBottom);
  } else {
    d.lineTo(x, yBottom);
  }
  d.closePath();
  return d.toString();
}
function drawZigZagAtConstantHeight(d, x0, x1, y) {
  const zigZagWidth = 10;
  const zigZagHeight = 4;
  const deltaX = x1 - x0;
  const width = Math.abs(deltaX);
  const nZigZags = Math.floor(width / zigZagWidth - 0.5);
  const _zigZagWidth = width / (nZigZags + 0.5);
  let dy = zigZagHeight / 2;
  let dx = _zigZagWidth / 4;
  let cx = x0;
  let cy = y;
  if (deltaX < 0) {
    dx = -dx;
    dy = -dy;
  }
  const doZigZag = (last = false) => {
    cx += dx;
    cy -= dy;
    d.lineTo(cx, cy);
    let scalar = last ? 1 : 2;
    cx += dx * scalar;
    cy += dy * scalar;
    d.lineTo(cx, cy);
    cx += dx;
    cy -= dy;
  };
  d.lineTo(x0, y);
  for (let i = 0; i < nZigZags; i++) {
    doZigZag();
  }
  doZigZag(true);
  d.lineTo(x1, y);
}
export {
  ColumnBox,
  drawZigZagAtConstantHeight,
  zigZagBoxPath
};
//# sourceMappingURL=column-box.js.map