Function scrollIntoView

apps/client/src/code/utils/scroll-into-view.ts:17–126

(
  target: Element,
  params?: { animate?: boolean; centerCamera?: boolean },
)

}

export function scrollIntoView(
  target: Element,
  params?: { animate?: boolean; centerCamera?: boolean },
) {
  let ancestor: Element | null = target.parentElement;

  const targetRect = domRectScreenToWorld(target.getBoundingClientRect());

  const scrollElems: { elem: Element; from: IVec2; to: IVec2 }[] = [];

  while (ancestor != null) {
    if (hasScrollbar(ancestor as HTMLElement)) {
      const ancestorRect = domRectScreenToWorld(
        ancestor.getBoundingClientRect(),
      );

      const ancestorClientRight = ancestorRect.x + ancestor.clientWidth;
      const ancestorClientBottom = ancestorRect.y + ancestor.clientHeight;

      let offsetX =
        targetRect.x < ancestorRect.x
          ? targetRect.x - ancestorRect.x
          : targetRect.right > ancestorClientRight
          ? targetRect.right - ancestorClientRight
          : 0;
      let offsetY =
        targetRect.y < ancestorRect.y
          ? targetRect.y - ancestorRect.y
          : targetRect.bottom > ancestorClientBottom
          ? targetRect.bottom - ancestorClientBottom
          : 0;

      // Clamp offset

      const maxScrollLeft = ancestor.scrollWidth - ancestor.clientWidth;
      const maxScrollTop = ancestor.scrollHeight - ancestor.clientHeight;

      offsetX = Math.min(offsetX, maxScrollLeft - ancestor.scrollLeft);
      offsetY = Math.min(offsetY, maxScrollTop - ancestor.scrollTop);

      offsetX = Math.max(offsetX, -ancestor.scrollLeft);
      offsetY = Math.max(offsetY, -ancestor.scrollTop);

      // Apply scroll offset

      scrollElems.push({
        elem: ancestor,
        from: { x: ancestor.scrollLeft, y: ancestor.scrollTop },
        to: {
          x: ancestor.scrollLeft + offsetX,
          y: ancestor.scrollTop + offsetY,
        },
      });

      targetRect.x -= offsetX;
      targetRect.y -= offsetY;
    }