@empoleon/solid-measure/src/get-content-rect.ts

Compute measurements of SolidJS components

export interface ClientRect {
  top: number;
  left: number;
  width: number;
  height: number;
}

export interface OffsetRect {
  top: number;
  left: number;
  width: number;
  height: number;
}

export interface ScrollRect {
  top: number;
  left: number;
  width: number;
  height: number;
}

export interface BoundsRect {
  top: number;
  right: number;
  bottom: number;
  left: number;
  width: number;
  height: number;
}

export interface MarginRect {
  top: number;
  right: number;
  bottom: number;
  left: number;
}

export interface ContentRectCalculations {
  client?: ClientRect;
  offset?: OffsetRect;
  scroll?: ScrollRect;
  bounds?: BoundsRect;
  margin?: MarginRect;
}

export type MeasurementType =
  | "client"
  | "offset"
  | "scroll"
  | "bounds"
  | "margin";

function getContentRect(
  node: Element,
  types: MeasurementType[]
): ContentRectCalculations {
  const calculations: ContentRectCalculations = {};

  if (types.indexOf("client") > -1) {
    const element = node as HTMLElement;
    calculations.client = {
      top: element.clientTop,
      left: element.clientLeft,
      width: element.clientWidth,
      height: element.clientHeight,
    };
  }

  if (types.indexOf("offset") > -1) {
    const element = node as HTMLElement;
    calculations.offset = {
      top: element.offsetTop,
      left: element.offsetLeft,
      width: element.offsetWidth,
      height: element.offsetHeight,
    };
  }

  if (types.indexOf("scroll") > -1) {
    const element = node as HTMLElement;
    calculations.scroll = {
      top: element.scrollTop,
      left: element.scrollLeft,
      width: element.scrollWidth,
      height: element.scrollHeight,
    };
  }

  if (types.indexOf("bounds") > -1) {
    const rect = node.getBoundingClientRect();
    calculations.bounds = {
      top: rect.top,
      right: rect.right,
      bottom: rect.bottom,
      left: rect.left,
      width: rect.width,
      height: rect.height,
    };
  }

  if (types.indexOf("margin") > -1) {
    const styles = getComputedStyle(node as HTMLElement);
    calculations.margin = {
      top: styles ? parseInt(styles.marginTop) : 0,
      right: styles ? parseInt(styles.marginRight) : 0,
      bottom: styles ? parseInt(styles.marginBottom) : 0,
      left: styles ? parseInt(styles.marginLeft) : 0,
    };
  }

  return calculations;
}

export default getContentRect;