@deepdub/react-arborist/src/dnd/measure-hover.ts

import { XYCoord } from "react-dnd";
import { bound } from "../utils";

export function measureHover(el: HTMLElement, offset: XYCoord, indent: number) {
  const nextEl = el.nextElementSibling as HTMLElement | null;
  const prevEl = el.previousElementSibling as HTMLElement | null;
  const rect = el.getBoundingClientRect();
  const x = offset.x - Math.round(rect.x);
  const y = offset.y - Math.round(rect.y);
  const height = rect.height;
  const inTopHalf = y < height / 2;
  const inBottomHalf = !inTopHalf;
  const pad = height / 4;
  const inMiddle = y > pad && y < height - pad;
  const maxLevel = Number(
    inBottomHalf ? el.dataset.level : prevEl ? prevEl.dataset.level : 0
  );
  const minLevel = Number(
    inTopHalf ? el.dataset.level : nextEl ? nextEl.dataset.level : 0
  );
  const level = bound(Math.floor(x / indent), minLevel, maxLevel);

  return { level, inTopHalf, inBottomHalf, inMiddle };
}

export type HoverData = ReturnType<typeof measureHover>;