Get the screen frame of an element.

getScreenFrame.tsx

function getScreenFrame(el: HTMLElement) {
  var rect = el.getBoundingClientRect(),
    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
    scrollTop = window.pageYOffset || document.documentElement.scrollTop

  const x = rect.left + scrollLeft,
    y = rect.top + scrollTop,
    w = rect.width,
    h = rect.height

  return {
    x,
    y,
    midX: x + w / 2,
    midY: y + h / 2,
    maxX: x + w,
    maxY: y + h,
    width: w,
    height: h,
    center: { x: x + w / 2, y: y + h / 2 },
    corners: {
      topLeft: { x: x, y: y },
      topRight: { x: x + w, y: y },
      bottomRight: { x: x + w, y: y + h },
      bottomLeft: { x: x, y: y + h },
    },
    midPoints: {
      top: { x: x + w / 2, y: y },
      right: { x: x + w, y: y + h / 2 },
      bottom: { x: x + w / 2, y: y },
      left: { x: x, y: y + h / 2 },
    },
  }
}