Function RenderPdf

apps/OpenSign/src/components/pdf/RenderPdf.jsx:33–1050

(props)

import { useScroll } from "../../context/ScrollPdfContext";

function RenderPdf(props) {
  const { t } = useTranslation();
  const dispatch = useDispatch();
  const { showGuidelines, showCanvasGuidelines } = useGuidelinesContext();
  // Ref to store per-page DOM elements for scroll-based page tracking & scroll
  const pageRefs = useRef({});
  // Ref to defer DnD drops that land on a page different from the current one
  const pendingDropRef = useRef(null);
  // Ref to suppress scroll-handler updates during programmatic scrolling
  const isScrollingToPage = useRef(false);
  // Stores the page number most recently set BY the scroll handler. The
  // page-change effect compares props.pageNumber against this value to detect
  // whether the change came from scrolling (skip programmatic scroll) or from
  // an external action like a thumbnail/chevron click (do programmatic scroll).
  // Using a page-number value instead of a boolean flag avoids a stuck-true
  // scenario: when React bails out of setPageNumber because the value hasn't
  // changed, no re-render fires and a boolean flag would never get reset.
  const lastScrollSetPage = useRef(null);
  // Ref tracking the last detected page – used to narrow the per-scroll scan
  const lastBestPage = useRef(1);
  // Pending requestAnimationFrame id for scroll throttling (null = none pending)
  const scrollRafId = useRef(null);
  const { scrollRef } = useScroll();
  // Internal count of total pages (set from Document onLoadSuccess)
  const [allPagesCount, setAllPagesCount] = useState(0);
  const isWidgetDrop = useRef(false);
  const [, drop] = useDrop({
    accept: "BOX",
    drop: (item, monitor) => {
      isWidgetDrop.current = true;
      setTimeout(() => {
        isWidgetDrop.current = false;
      }, 600);
      const offset = monitor.getClientOffset();
      // Multi-page: detect target page and swap #container to it
      if (allPagesCount > 1 && offset) {
        let targetPage = props.pageNumber;
        for (let i = 1; i <= allPagesCount; i++) {
          const el = pageRefs.current[i];
          if (el) {
            const rect = el.getBoundingClientRect();
            if (offset.y >= rect.top && offset.y <= rect.bottom) {
              targetPage = i;
              break;
            }
          }
        }
        if (targetPage !== props.pageNumber && props.setPageNumber) {
          // Defer: store drop info, update page, handle in useEffect
          props.setPageNumber(targetPage);
          pendingDropRef.current = {
            item,
            offset: { ...offset },
            targetPage
          };
          showGuidelines(false);
          return;
        }