@zohodesk/hooks/es/floating/viewport/frameRelativeRects.js

Unified Component Library - Hooks

export default function frameRelativeRects(el, customFrame, documentEle) {
  if (!el) {
    return;
  }

  const rectTemp = el.getBoundingClientRect();
  const rect = {
    height: rectTemp.height || el.clientHeight,
    width: rectTemp.width || el.clientWidth,
    top: rectTemp.top,
    bottom: rectTemp.bottom,
    left: rectTemp.left,
    right: rectTemp.right,
    x: rectTemp.x,
    y: rectTemp.y
  };
  documentEle = documentEle || document.documentElement;
  let customFrameRect = {
    top: 0,
    left: 0,
    right: documentEle.clientWidth,
    bottom: documentEle.clientHeight,
    height: documentEle.clientHeight,
    width: documentEle.clientWidth,
    x: 0,
    y: 0
  };

  if (customFrame) {
    customFrameRect = customFrame.getBoundingClientRect();
  }

  const newRect = {
    top: rect.top - customFrameRect.top,
    left: rect.left - customFrameRect.left,
    height: rect.height,
    width: rect.width
  };
  newRect.bottom = newRect.top + newRect.height;
  newRect.right = newRect.left + newRect.width;
  newRect.x = newRect.left;
  newRect.y = newRect.top;
  const rectGap = {
    top: newRect.top,
    left: newRect.left,
    bottom: customFrameRect.height - newRect.bottom,
    right: customFrameRect.width - newRect.right
  };
  rectGap.center = {
    top: rectGap.top + newRect.height / 2,
    left: rectGap.left + newRect.width / 2,
    bottom: rectGap.bottom + newRect.height / 2,
    right: rectGap.right + newRect.width / 2
  };
  return {
    frameRect: customFrameRect,
    rect: newRect,
    rectGap
  };
}