web/pdf_thumbnail_viewer.js - master - githubmirror/pdf.js

web/pdf_thumbnail_viewer.js
1 963 строки60 KB
Calixte Denizet
Give copied annotations distinct references
04 авг 2026, 18:32
04 авг 2026, 18:32bf7c925
/* Copyright 2012 Mozilla Foundation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/** @typedef {import("../src/display/api").PDFDocumentProxy} PDFDocumentProxy */
/** @typedef {import("../src/display/api").PDFPageProxy} PDFPageProxy */
/** @typedef {import("./event_utils").EventBus} EventBus */
// eslint-disable-next-line max-len
/** @typedef {import("./pdf_rendering_queue").PDFRenderingQueue} PDFRenderingQueue */
/** @typedef {import("./pdf_link_service.js").PDFLinkService} PDFLinkService */

import {
  binarySearchFirstItem,
  getVisibleElements,
  isValidRotation,
  watchScroll,
} from "./ui_utils.js";
import { MathClamp, noContextMenu, stopEvent } from "pdfjs-lib";
import { internalOpt } from "./internal_evt.js";
import { Menu } from "./menu.js";
import { PDFThumbnailView } from "./pdf_thumbnail_view.js";
import { RenderingStates } from "./renderable_view.js";

const SCROLL_OPTIONS = {
  behavior: "instant",
  block: "nearest",
  inline: "nearest",
  container: "nearest",
};

// This value is based on the one used in Firefox.
// See
// https://searchfox.org/firefox-main/rev/04cf27582307a9c351e991c740828d54cf786b76/dom/events/EventStateManager.cpp#2675-2698
// This threshold is used to distinguish between a click and a drag.
const DRAG_THRESHOLD_IN_PIXELS = 5;
const PIXELS_TO_SCROLL_WHEN_DRAGGING = 20;
const SPACE_FOR_DRAG_MARKER_WHEN_NO_NEXT_ELEMENT = 15;

/**
 * @typedef {Object} PDFThumbnailViewerOptions
 * @property {HTMLDivElement} container - The container for the thumbnail
 *   elements.
 * @property {EventBus} eventBus - The application event bus.
 * @property {PDFLinkService} linkService - The navigation/linking service.
 * @property {PDFRenderingQueue} renderingQueue - The rendering queue object.
 * @property {number} [maxCanvasPixels] - The maximum supported canvas size in
 *   total pixels, i.e. width * height. Use `-1` for no limit, or `0` for
 *   CSS-only zooming. The default value is 4096 * 8192 (32 mega-pixels).
 * @property {number} [maxCanvasDim] - The maximum supported canvas dimension,
 *   in either width or height. Use `-1` for no limit.
 *   The default value is 32767.
 * @property {Object} [pageColors] - Overwrites background and foreground colors
 *   with user defined ones in order to improve readability in high contrast
 *   mode.
 * @property {AbortSignal} [abortSignal] - The AbortSignal for the window
 *   events.
 * @property {boolean} [enableNewBadge] - Enables the "new" badge for the split
 *   and merge features.
 * @property {boolean} [enableMerge] - Enables the merge feature.
 *   The default value is `false`.
 * @property {boolean} [enableSplitMerge] - Enables split and merge features.
 *   The default value is `false`.
 * @property {Object} [statusBar] - The status bar elements to manage the status
 *   label and action when editing pages.
 * @property {Object} [undoBar] - The undo bar elements to manage the undo
 *   action.
 * @property {Object} [manageMenu] - The menu elements to manage saving edited
 *   PDF.
 * @property {Object} [waitingBar] - The waiting bar elements shown during
 *   long-running operations.
 * @property {Object} [addFileComponent] - The file picker and button used to
 *   add one or more PDF files to merge with the current one.
 */

/**
 * Viewer control to display thumbnails for pages in a PDF document.
 */
class PDFThumbnailViewer {
  static #draggingScaleFactor = 0;

  #enableMerge = false;

  #enableSplitMerge = false;

  #dragAC = null;

  #abortSignal = undefined;

  #externalDragActive = false;

  #draggedContainer = null;

  #thumbnailsPositions = null;

  #lastDraggedOverIndex = NaN;

  #selectedPages = null;

  #draggedImageX = 0;

  #draggedImageY = 0;

  #draggedImageWidth = 0;

  #draggedImageHeight = 0;

  #draggedImageOffsetX = 0;

  #draggedImageOffsetY = 0;

  #dragMarker = null;

  #pageNumberToRemove = NaN;

  #currentScrollBottom = 0;

  #currentScrollTop = 0;

  #pagesMapper = null;

  #manageExportButton = null;

  #manageDeleteButton = null;

  #manageCopyButton = null;

  #manageCutButton = null;

  #copiedThumbnails = null;

  #savedThumbnails = null;

  #deletedPageNumbers = null;

  #copiedPageNumbers = null;

  #boundPastePages = this.#pastePages.bind(this);

  #isCut = false;

  #isOneColumnView = false;

  #scrollableContainerWidth = 0;

  #scrollableContainerHeight = 0;

  #statusLabel = null;

  #statusBar = null;

  #deselectButton = null;

  #undoBar = null;

  #undoLabel = null;

  #undoButton = null;

  #undoCloseButton = null;

  #waitingBar = null;

  #isInPasteMode = false;

  #hasUndoBarVisible = false;

  #newBadge = null;

  /**
   * @param {PDFThumbnailViewerOptions} options
   */
  constructor({
    container,
    eventBus,
    linkService,
    renderingQueue,
    maxCanvasPixels,
    maxCanvasDim,
    pageColors,
    abortSignal,
    enableMerge,
    enableSplitMerge,
    enableNewBadge,
    statusBar,
    undoBar,
    waitingBar,
    manageMenu,
    addFileComponent,
  }) {
    this.scrollableContainer = container.parentElement;
    this.container = container;
    this.eventBus = eventBus;
    this.linkService = linkService;
    this.renderingQueue = renderingQueue;
    this.maxCanvasPixels = maxCanvasPixels;
    this.maxCanvasDim = maxCanvasDim;
    this.pageColors = pageColors || null;
    this.#abortSignal = abortSignal;
    this.#enableMerge = enableMerge || false;
    this.#enableSplitMerge = enableSplitMerge || false;
    this.#statusLabel = statusBar?.viewsManagerStatusActionLabel || null;
    this.#deselectButton =
      statusBar?.viewsManagerStatusActionDeselectButton || null;
    this.#statusBar = statusBar?.viewsManagerStatusAction || null;
    this.#undoBar = undoBar?.viewsManagerStatusUndo || null;
    this.#undoLabel = undoBar?.viewsManagerStatusUndoLabel || null;
    this.#undoButton = undoBar?.viewsManagerStatusUndoButton || null;
    this.#undoCloseButton = undoBar?.viewsManagerStatusUndoCloseButton || null;
    this.#waitingBar = waitingBar || null;

    if (this.#enableSplitMerge && manageMenu) {
      const {
        button: menuButton,
        menu,
        copy,
        cut,
        delete: del,
        exportSelected,
      } = manageMenu;

      if (enableNewBadge) {
        const newSpan = document.createElement("span");
        newSpan.setAttribute("data-l10n-id", "pdfjs-new-badge-content");
        newSpan.classList.add("newBadge");
        menuButton.parentElement.before(newSpan);
        this.#newBadge = newSpan;
      }

      eventBus.on(
        "pagesloaded",
        () => {
          menuButton.disabled = false;
        },
        { once: true, ...internalOpt }
      );

      this._manageMenu = new Menu(menu, menuButton, [
        copy,
        cut,
        del,
        exportSelected,
      ]);
      this.#manageExportButton = exportSelected;
      exportSelected.addEventListener(
        "click",
        this.#saveExtractedPages.bind(this)
      );
      this.#manageDeleteButton = del;
      del.addEventListener("click", this.#deletePages.bind(this, "delete"));
      this.#manageCopyButton = copy;
      copy.addEventListener("click", this.#copyPages.bind(this));
      this.#manageCutButton = cut;
      cut.addEventListener("click", this.#cutPages.bind(this));

      this.#toggleMenuEntries(false);
      menuButton.disabled = true;

      eventBus.on(
        "editingaction",
        ({ name }) => {
          switch (name) {
            case "copyPage":
              this.#copyPages();
              break;
            case "cutPage":
              this.#cutPages();
              break;
            case "deletePage":
              this.#deletePages("delete");
              break;
            case "savePage":
              this.#saveExtractedPages();
              break;
          }
        },
        internalOpt
      );

      this.container.addEventListener(
        "contextmenu",
        e => {
          eventBus.dispatch("editingstateschanged", {
            source: this,
            details: {
              thumbnailId:
                parseInt(
                  e.target
                    .closest(".thumbnailImageContainer")
                    ?.parentElement.getAttribute("page-number"),
                  10
                ) ?? -1,
              hasSelectedPages: !!this.#selectedPages?.size,
              canDeletePages: this.#canDelete(),
            },
          });
        },
        {
          signal: abortSignal,
          passive: true,
        }
      );

      this.#undoButton?.addEventListener("click", this.#undo.bind(this));
      this.#undoCloseButton?.addEventListener(
        "click",
        this.#dismissUndo.bind(this, /* mustUpdateStatus = */ true)
      );
      this.#deselectButton?.addEventListener("click", () => {
        this.#clearSelection();
        this.#toggleMenuEntries(false);
        this.#updateStatus("select");
      });
      this.#deselectButton.classList.toggle("hidden", true);

      if (this.#enableMerge && addFileComponent) {
        const { picker, button } = addFileComponent;
        picker.addEventListener("change", () => {
          const files = Array.from(picker.files ?? []);
          if (files.length) {
            this.#mergeFiles(files, this._currentPageNumber - 1);
          }
        });
        button.addEventListener("click", () => {
          picker.click();
        });
        this.#waitingBar.closeButton?.addEventListener("click", () => {
          this.#toggleBar("status");
          picker.value = "";
        });
      }
    } else {
      manageMenu.button.hidden = true;
    }

    this.scroll = watchScroll(
      this.scrollableContainer,
      this.#scrollUpdated.bind(this),
      abortSignal
    );
    this.#resetView();
    this.#addEventListeners();
  }

  #scrollUpdated() {
    this.renderingQueue.renderHighestPriority();
  }

  async #mergeFiles(files, insertAfter) {
    this.#toggleBar("waiting", "pdfjs-views-manager-waiting-for-file");
    const entries = [];
    for (const file of files) {
      const isImage = file.type?.startsWith("image/");
      if (!isImage && file.type !== "application/pdf") {
        const magic = await file.slice(0, 5).text();
        if (magic !== "%PDF-") {
          continue;
        }
      }
      if (isImage) {
        let bitmap;
        try {
          bitmap = await PDFThumbnailViewer.#fileToImageBitmap(file);
        } catch {
          continue;
        }
        entries.push({ image: bitmap, insertAfter });
      } else {
        entries.push({ document: await file.bytes(), insertAfter });
      }
    }
    if (entries.length === 0) {
      this.#toggleBar("status");
      return;
    }
    const pagesCount = this.#pagesMapper.pagesNumber;
    const data = this.hasStructuralChanges()
      ? this.getStructuralChanges()
      : { pageInfos: [{ document: null }], copyLevels: null };
    data.pageInfos.push(...entries);
    this.eventBus.on(
      "pagesloaded",
      () => {
        // Clear any pre-merge selection: thumbnails are rebuilt fresh
        // (all unchecked), so the old set would cause a label/visual
        // mismatch.
        this.#selectedPages = null;
        this.#updateMenuEntries();
        this.#toggleBar("status");
        const newPagesCount = this.#pagesMapper.pagesNumber;
        const insertedPagesCount = newPagesCount - pagesCount;
        for (
          let i = insertAfter + 1, ii = insertAfter + 1 + insertedPagesCount;
          i < ii;
          i++
        ) {
          this._thumbnails[i].checkbox.checked = true;
          this.#selectPage(i + 1, true);
        }
        if (insertedPagesCount) {
          this.#updateCurrentPage(insertAfter + 2, /* force = */ true);
        }
      },
      { once: true, ...internalOpt }
    );
    this.#reportTelemetry({ action: "merge" });
    this.eventBus.dispatch("saveandload", {
      source: this,
      data,
    });
  }

  getThumbnail(index) {
    return this._thumbnails[index];
  }

  #getVisibleThumbs() {
    return getVisibleElements({
      scrollEl: this.scrollableContainer,
      views: this._thumbnails,
    });
  }

  #resetCurrentThumbnail(newPageNumber) {
    if (!this.pdfDocument) {
      return;
    }
    const thumbnailView = this._thumbnails[this._currentPageNumber - 1];
    thumbnailView?.toggleCurrent(/* isCurrent = */ false);
    this._currentPageNumber = newPageNumber;
  }

  scrollThumbnailIntoView(pageNumber) {
    if (!this.pdfDocument) {
      return;
    }
    const thumbnailView = this._thumbnails[pageNumber - 1];

    if (!thumbnailView) {
      console.error('scrollThumbnailIntoView: Invalid "pageNumber" parameter.');
      return;
    }
    if (pageNumber !== this._currentPageNumber) {
      this.#resetCurrentThumbnail(pageNumber);
      thumbnailView.toggleCurrent(/* isCurrent = */ true);
    }
    const { first, last, views } = this.#getVisibleThumbs();

    // If the thumbnail isn't currently visible, scroll it into view.
    if (views.length > 0) {
      let shouldScroll = false;
      if (pageNumber <= first.id || pageNumber >= last.id) {
        shouldScroll = true;
      } else {
        for (const { id, percent } of views) {
          if (id !== pageNumber) {
            continue;
          }
          shouldScroll = percent < 100;
          break;
        }
      }
      if (shouldScroll) {
        thumbnailView.div.scrollIntoView(SCROLL_OPTIONS);
      }
    }

    this._currentPageNumber = pageNumber;
  }

  get pagesRotation() {
    return this._pagesRotation;
  }

  set pagesRotation(rotation) {
    if (!isValidRotation(rotation)) {
      throw new Error("Invalid thumbnails rotation angle.");
    }
    if (!this.pdfDocument) {
      return;
    }
    if (this._pagesRotation === rotation) {
      return; // The rotation didn't change.
    }
    this._pagesRotation = rotation;

    const updateArgs = { rotation };
    for (const thumbnail of this._thumbnails) {
      thumbnail.update(updateArgs);
    }
  }

  cleanup() {
    for (const thumbnail of this._thumbnails) {
      if (thumbnail.renderingState !== RenderingStates.FINISHED) {
        thumbnail.reset();
      }
    }
  }

  #resetView() {
    this._thumbnails = [];
    this._currentPageNumber = 1;
    this._pageLabels = null;
    this._pagesRotation = 0;

    // Remove the thumbnails from the DOM.
    this.container.textContent = "";
  }

  /**
   * @param {PDFDocumentProxy} pdfDocument
   */
  setDocument(pdfDocument) {
    if (this.pdfDocument) {
      this.#cancelRendering();
      this.#resetView();
    }

    this.pdfDocument = pdfDocument;
    if (!pdfDocument) {
      return;
    }
    this.#pagesMapper = pdfDocument.pagesMapper;
    const firstPagePromise = pdfDocument.getPage(1);
    const optionalContentConfigPromise = pdfDocument.getOptionalContentConfig({
      intent: "display",
    });

    firstPagePromise
      .then(firstPdfPage => {
        const pagesCount = pdfDocument.numPages;
        const viewport = firstPdfPage.getViewport({ scale: 1 });
        const fragment = document.createDocumentFragment();

        for (let pageNum = 1; pageNum <= pagesCount; ++pageNum) {
          const thumbnail = new PDFThumbnailView({
            container: fragment,
            eventBus: this.eventBus,
            id: pageNum,
            defaultViewport: viewport.clone(),
            optionalContentConfigPromise,
            linkService: this.linkService,
            renderingQueue: this.renderingQueue,
            maxCanvasPixels: this.maxCanvasPixels,
            maxCanvasDim: this.maxCanvasDim,
            pageColors: this.pageColors,
            enableSplitMerge: this.#enableSplitMerge,
          });
          this._thumbnails.push(thumbnail);
        }
        // Set the first `pdfPage` immediately, since it's already loaded,
        // rather than having to repeat the `PDFDocumentProxy.getPage` call in
        // the `this.#ensurePdfPageLoaded` method before rendering can start.
        this._thumbnails[0]?.setPdfPage(firstPdfPage);

        // Ensure that the current thumbnail is always highlighted on load.
        const thumbnailView = this._thumbnails[this._currentPageNumber - 1];
        thumbnailView.toggleCurrent(/* isCurrent = */ true);
        this.container.append(fragment);
        this.eventBus.dispatch("thumbnailsloaded", {
          source: this,
        });
      })
      .catch(reason => {
        console.error("Unable to initialize thumbnail viewer", reason);
      });
  }

  #cancelRendering() {
    for (const thumbnail of this._thumbnails) {
      thumbnail.cancelRendering();
    }
  }

  /**
   * @param {Array|null} labels
   */
  setPageLabels(labels) {
    if (!this.pdfDocument) {
      return;
    }
    if (!labels) {
      this._pageLabels = null;
    } else if (!(
      Array.isArray(labels) && this.pdfDocument.numPages === labels.length
    )) {
      this._pageLabels = null;
      console.error("PDFThumbnailViewer_setPageLabels: Invalid page labels.");
    } else {
      this._pageLabels = labels;
    }
    // Update all the `PDFThumbnailView` instances.
    for (let i = 0, ii = this._thumbnails.length; i < ii; i++) {
      this._thumbnails[i].setPageLabel(this._pageLabels?.[i] ?? null);
    }
  }

  /**
   * @param {PDFThumbnailView} thumbView
   * @returns {Promise<PDFPageProxy | null>}
   */
  async #ensurePdfPageLoaded(thumbView) {
    if (thumbView.pdfPage) {
      return thumbView.pdfPage;
    }
    try {
      const pdfPage = await this.pdfDocument.getPage(thumbView.id);
      if (!thumbView.pdfPage) {
        thumbView.setPdfPage(pdfPage);
      }
      return pdfPage;
    } catch (reason) {
      console.error("Unable to get page for thumb view", reason);
      return null; // Page error -- there is nothing that can be done.
    }
  }

  #getScrollAhead(visible) {
    if (visible.first?.id === 1) {
      return true;
    } else if (visible.last?.id === this._thumbnails.length) {
      return false;
    }
    return this.scroll.down;
  }

  forceRendering() {
    const visibleThumbs = this.#getVisibleThumbs();
    const scrollAhead = this.#getScrollAhead(visibleThumbs);
    const thumbView = this.renderingQueue.getHighestPriority(
      visibleThumbs,
      this._thumbnails,
      scrollAhead,
      /* preRenderExtra */ false,
      /* ignoreDetailViews */ true
    );
    if (thumbView) {
      this.#ensurePdfPageLoaded(thumbView).then(() => {
        this.renderingQueue.renderView(thumbView);
      });
      return true;
    }
    return false;
  }

  hasStructuralChanges() {
    return this.#pagesMapper?.hasBeenAltered() || false;
  }

  getStructuralChanges() {
    return this.#pagesMapper?.getPageMappingForSaving() || null;
  }

  static #getScaleFactor(image) {
    return (PDFThumbnailViewer.#draggingScaleFactor ||= parseFloat(
      getComputedStyle(image).getPropertyValue("--thumbnail-dragging-scale")
    ));
  }

  static #fitImageDimensions(width, height, { minSide = 0, maxSide }) {
    const longest = Math.max(width, height);
    let scale = 1;
    if (minSide > 0 && longest < minSide) {
      scale = minSide / longest;
    } else if (longest > maxSide) {
      scale = maxSide / longest;
    }
    return scale === 1
      ? { width, height }
      : {
          width: Math.max(1, Math.round(width * scale)),
          height: Math.max(1, Math.round(height * scale)),
        };
  }

  static async #fileToImageBitmap(file) {
    // Keep image pages large enough to look good when fitted to a PDF page, but
    // bounded so saving does not allocate worker-side buffers at camera-photo
    // dimensions.
    const MIN_RASTER_SIDE = 1024;
    const MAX_RASTER_SIDE = 4096;

    if (file.type !== "image/svg+xml") {
      const bitmap = await createImageBitmap(file);
      const { width, height } = PDFThumbnailViewer.#fitImageDimensions(
        bitmap.width,
        bitmap.height,
        { maxSide: MAX_RASTER_SIDE }
      );
      if (width === bitmap.width && height === bitmap.height) {
        return bitmap;
      }
      const canvas = new OffscreenCanvas(width, height);
      const ctx = canvas.getContext("2d");
      ctx.drawImage(bitmap, 0, 0, width, height);
      bitmap.close();
      return canvas.transferToImageBitmap();
    }
    // createImageBitmap doesn't work with SVG (mirroring the workaround in
    // src/display/editor/tools.js ImageManager): load the file via an Image
    // element and rasterize it through an OffscreenCanvas. The target raster
    // size uses the SVG's intrinsic dimensions, clamped so the longest side
    // falls in [1024, 4096]: large enough to avoid pixelation when fitted to
    // a page, but capped to prevent a runaway SVG (e.g. a huge viewBox) from
    // allocating a multi-gigabyte bitmap.
    const url = URL.createObjectURL(file);
    try {
      const image = new Image();
      image.src = url;
      await image.decode();
      const { width, height } = PDFThumbnailViewer.#fitImageDimensions(
        image.naturalWidth || MIN_RASTER_SIDE,
        image.naturalHeight || MIN_RASTER_SIDE,
        { minSide: MIN_RASTER_SIDE, maxSide: MAX_RASTER_SIDE }
      );
      const canvas = new OffscreenCanvas(width, height);
      const ctx = canvas.getContext("2d");
      ctx.drawImage(image, 0, 0, width, height);
      return canvas.transferToImageBitmap();
    } finally {
      URL.revokeObjectURL(url);
    }
  }

  #updateThumbnails(currentPageNumber) {
    this.#resetCurrentThumbnail(0);
    let newCurrentPageNumber = 0;
    const pagesMapper = this.#pagesMapper;
    const prevThumbnails = (this.#savedThumbnails = this._thumbnails);
    const newThumbnails = (this._thumbnails = []);
    const fragment = document.createDocumentFragment();
    const isCut = this.#isCut;
    for (let i = 1, ii = pagesMapper.pagesNumber; i <= ii; i++) {
      const prevPageNumber = pagesMapper.getPrevPageNumber(i);
      if (prevPageNumber < 0) {
        let thumbnail = this.#copiedThumbnails.get(-prevPageNumber);
        thumbnail.checkbox.checked = false;
        if (isCut) {
          thumbnail.updateId(i);
          fragment.append(thumbnail.div);
        } else {
          thumbnail = thumbnail.clone(fragment, i);
        }
        newThumbnails.push(thumbnail);
        continue;
      }
      if (prevPageNumber === currentPageNumber) {
        newCurrentPageNumber = i;
      }
      const newThumbnail = prevThumbnails[prevPageNumber - 1];
      newThumbnails.push(newThumbnail);
      newThumbnail.updateId(i);
      newThumbnail.checkbox.checked = false;
      fragment.append(newThumbnail.div);
    }
    this.container.replaceChildren(fragment);
    return newCurrentPageNumber;
  }

  #onStartDragging(draggedThumbnail) {
    this.#currentScrollTop = this.scrollableContainer.scrollTop;
    this.#currentScrollBottom =
      this.#currentScrollTop + this.scrollableContainer.clientHeight;
    this.#dragAC = new AbortController();
    this.container.classList.add("isDragging");
    this.#newBadge?.classList.add("hidden");
    const startPageNumber = parseInt(
      draggedThumbnail.getAttribute("page-number"),
      10
    );
    this.#lastDraggedOverIndex = startPageNumber - 1;
    if (!this.#selectedPages?.has(startPageNumber)) {
      this.#pageNumberToRemove = startPageNumber;
      this.#selectPage(startPageNumber, true);
    }

    for (const selected of this.#selectedPages) {
      const thumbnail = this._thumbnails[selected - 1];
      const placeholder = (thumbnail.placeholder =
        document.createElement("div"));
      placeholder.classList.add("thumbnailImageContainer", "placeholder");
      const { div, imageContainer } = thumbnail;
      div.classList.add("isDragging");
      placeholder.style.height = getComputedStyle(imageContainer).height;
      imageContainer.after(placeholder);
      if (selected !== startPageNumber) {
        imageContainer.classList.add("hidden");
        continue;
      }
      if (this.#selectedPages.size === 1) {
        imageContainer.classList.add("draggingThumbnail");
        this.#draggedContainer = imageContainer;
        continue;
      }
      // For multiple selected thumbnails, only the one being dragged is shown
      // (with the dragging style), while the others are hidden.
      const draggedContainer = (this.#draggedContainer =
        document.createElement("div"));
      draggedContainer.classList.add(
        "draggingThumbnail",
        "thumbnailImageContainer",
        "multiple"
      );
      draggedContainer.style.height = getComputedStyle(imageContainer).height;
      imageContainer.replaceWith(draggedContainer);
      imageContainer.classList.remove("thumbnailImageContainer");
      draggedContainer.append(imageContainer);
      draggedContainer.setAttribute(
        "data-multiple-count",
        this.#selectedPages.size
      );
    }
  }

  #onStopDragging(isDropping = false) {
    const draggedContainer = this.#draggedContainer;
    this.#draggedContainer = null;
    const lastDraggedOverIndex = this.#lastDraggedOverIndex;
    this.#lastDraggedOverIndex = NaN;
    this.#dragMarker?.remove();
    this.#dragMarker = null;
    this.#dragAC.abort();
    this.#dragAC = null;
    this.#newBadge?.classList.remove("hidden");

    this.container.classList.remove("isDragging");
    for (const selected of this.#selectedPages) {
      const thumbnail = this._thumbnails[selected - 1];
      const { div, placeholder, imageContainer } = thumbnail;
      placeholder.remove();
      imageContainer.classList.remove("draggingThumbnail", "hidden");
      div.classList.remove("isDragging");
    }

    if (draggedContainer.classList.contains("multiple")) {
      // Restore the dragged image to its thumbnail.
      const originalImageContainer = draggedContainer.firstElementChild;
      draggedContainer.replaceWith(originalImageContainer);
      originalImageContainer.classList.add("thumbnailImageContainer");
    } else {
      draggedContainer.style.translate = "";
    }

    const selectedPages = this.#selectedPages;
    if (
      !isNaN(lastDraggedOverIndex) &&
      isDropping &&
      !(
        selectedPages.size === 1 &&
        (selectedPages.has(lastDraggedOverIndex + 1) ||
          selectedPages.has(lastDraggedOverIndex + 2))
      )
    ) {
      this._thumbnails[this._currentPageNumber - 1]?.toggleCurrent(
        /* isCurrent = */ false
      );
      this._currentPageNumber = -1;

      const newIndex = lastDraggedOverIndex + 1;
      const pagesToMove = Array.from(selectedPages).sort((a, b) => a - b);
      const pagesMapper = this.#pagesMapper;
      const currentPageNumber = isNaN(this.#pageNumberToRemove)
        ? pagesToMove[0]
        : this.#pageNumberToRemove;

      pagesMapper.movePages(selectedPages, pagesToMove, newIndex);

      this.#updateCurrentPage(this.#updateThumbnails(currentPageNumber));
      this.#thumbnailsPositions = null;

      selectedPages.clear();
      this.#pageNumberToRemove = NaN;
      this.#toggleMenuEntries(false);
      this.#updateStatus("select");

      this.#reportTelemetry({ action: "move" });
      this.eventBus.dispatch("pagesedited", {
        source: this,
        pagesMapper,
        type: "move",
      });
    }

    if (!isNaN(this.#pageNumberToRemove)) {
      this.#selectPage(this.#pageNumberToRemove, false);
      this.#pageNumberToRemove = NaN;
    }
  }

  #clearSelection() {
    for (const pageNumber of this.#selectedPages) {
      this._thumbnails[pageNumber - 1].toggleSelected(false);
    }
    this.#selectedPages.clear();
  }

  #updateCurrentPage(currentPageNumber, forceFocus = false) {
    setTimeout(() => {
      this.forceRendering();
      const newPageNumber = currentPageNumber || 1;
      this.linkService.goToPage(newPageNumber);
      const thumbnailView = this._thumbnails[newPageNumber - 1];
      if (forceFocus || !this.container.contains(document.activeElement)) {
        thumbnailView.imageContainer.focus();
      }
    }, 0);
  }

  #undo() {
    this.#clearSelection();
    this.#toggleMenuEntries(false);
    this.#updateStatus("select");
    if (this.#copiedThumbnails) {
      // We undo a copy or a cut.
      this.#copiedThumbnails = null;
      this.#pagesMapper.cancelCopy();
      this.#togglePasteMode(false);

      this.eventBus.dispatch("pagesedited", {
        source: this,
        pagesMapper: this.#pagesMapper,
        type: "cancelCopy",
      });
    }

    this.#isCut = false;
    if (this.#savedThumbnails) {
      // The thumbnail objects are shared between the post-operation list and
      // the saved (pre-operation) list. The object marked current in the
      // post-operation list may reappear at a different index in the restored
      // list.
      const currentThumb = this._thumbnails[this._currentPageNumber - 1];
      currentThumb?.toggleCurrent(false);

      const fragment = document.createDocumentFragment();
      for (let i = 1, ii = this.#savedThumbnails.length; i <= ii; i++) {
        const thumbnail = this.#savedThumbnails[i - 1];
        thumbnail.updateId(i);
        thumbnail.checkbox.checked = false;
        fragment.append(thumbnail.div);
      }
      this.container.replaceChildren(fragment);
      this._thumbnails = this.#savedThumbnails;
      this.#savedThumbnails = null;

      // Re-establish the current-page indicator at the position the current
      // thumbnail now occupies in the restored list.
      const newIdx = currentThumb ? this._thumbnails.indexOf(currentThumb) : -1;
      this._currentPageNumber = newIdx + 1;
      currentThumb?.toggleCurrent(newIdx !== -1);

      this.#pagesMapper.cancelDelete();

      this.eventBus.dispatch("pagesedited", {
        source: this,
        pagesMapper: this.#pagesMapper,
        type: "cancelDelete",
      });
    }
  }

  #dismissUndo(mustUpdateStatus) {
    this.#copiedThumbnails = null;
    if (this.#deletedPageNumbers) {
      if (this.#savedThumbnails) {
        for (const pageNumber of this.#deletedPageNumbers) {
          this.#savedThumbnails[pageNumber - 1].destroy();
        }
        this.#savedThumbnails = null;
      }
      this.#deletedPageNumbers = null;
    }
    this.#isCut = false;
    if (mustUpdateStatus) {
      this.#updateStatus("select");
    }
    this.#togglePasteMode(false);
    this.#pagesMapper.cleanSavedData();

    this.eventBus.dispatch("pagesedited", {
      source: this,
      pagesMapper: this.#pagesMapper,
      type: "cleanSavedData",
    });
  }

  #canDelete() {
    const size = this.#selectedPages?.size || 0;
    return size > 0 && size < this._thumbnails.length;
  }

  #toggleBar(type, message, args) {
    this.#statusBar.classList.toggle("hidden", type !== "status");
    this.#waitingBar.container.classList.toggle("hidden", type !== "waiting");
    this.#undoBar.classList.toggle("hidden", type !== "undo");
    this.#hasUndoBarVisible = type === "undo";

    switch (type) {
      case "waiting":
        this.#waitingBar.label.setAttribute("data-l10n-id", message);
        break;
      case "undo":
        this.#undoLabel.setAttribute("data-l10n-id", message);
        if (args) {
          this.#undoLabel.setAttribute("data-l10n-args", JSON.stringify(args));
        }
        break;
      case "status":
        if (args) {
          this.#statusLabel.setAttribute(
            "data-l10n-args",
            JSON.stringify(args)
          );
        } else {
          this.#statusLabel.removeAttribute("data-l10n-args");
        }
        this.#newBadge?.classList.toggle("hidden", !!args);
        this.#deselectButton.classList.toggle("hidden", !args);
        break;
    }
  }

  #togglePasteMode(enable) {
    this.#isInPasteMode = enable;
    if (enable) {
      this.container.classList.add("pasteMode");
      for (const thumbnail of this._thumbnails) {
        thumbnail.addPasteButton(this.#boundPastePages);
      }
    } else {
      this.container.classList.remove("pasteMode");
      for (const thumbnail of this._thumbnails) {
        thumbnail.removePasteButton();
      }
    }
  }

  #reportTelemetry(data) {
    this.eventBus.dispatch("reporttelemetry", {
      source: this,
      details: {
        type: "pageOrganization",
        data,
      },
    });
  }

  #saveExtractedPages() {
    this.#reportTelemetry({ action: "exportSelected" });
    this.eventBus.dispatch("saveextractedpages", {
      source: this,
      data: this.#pagesMapper.extractPages(this.#selectedPages),
    });
    this.#clearSelection();
    this.#toggleMenuEntries(false);
    this.#updateStatus("select");
  }

  #copyPages(clearSelection = true) {
    if (!this.#isCut) {
      // Entering pure copy mode "commits" any pending paste/delete state so
      // that clicking the "Done" button later only cancels the copy and does
      // not accidentally restore a previous paste or delete.
      this.#savedThumbnails = null;
      this.#reportTelemetry({ action: "copy" });
    }
    this.#updateStatus(this.#isCut ? "cut" : "copy");
    const pageNumbersToCopy = (this.#copiedPageNumbers = Uint32Array.from(
      this.#selectedPages
    ).sort((a, b) => a - b));
    const pagesMapper = this.#pagesMapper;
    pagesMapper.copyPages(pageNumbersToCopy);
    this.#copiedThumbnails = new Map();
    for (const pageNumber of pageNumbersToCopy) {
      this.#copiedThumbnails.set(pageNumber, this._thumbnails[pageNumber - 1]);
    }
    this.eventBus.dispatch("pagesedited", {
      source: this,
      pagesMapper,
      pageNumbers: pageNumbersToCopy,
      type: "copy",
    });
    if (clearSelection) {
      this.#clearSelection();
    }
    this.#togglePasteMode(true);
    this.#toggleMenuEntries(false);
  }

  #cutPages() {
    if (!this.#canDelete()) {
      return;
    }

    this.#reportTelemetry({ action: "cut" });
    this.#isCut = true;
    this.#copyPages(false);
    this.#deletePages(/* type = */ "cut");
  }

  #pastePages(index) {
    this.#reportTelemetry({ action: "paste" });
    const pagesMapper = this.#pagesMapper;
    const currentPageNumber = this.#copiedPageNumbers.includes(
      this._currentPageNumber
    )
      ? 0
      : this._currentPageNumber;

    pagesMapper.pastePages(index);
    this.#updateThumbnails(currentPageNumber);
    this.#updateCurrentPage(index + 1, /* forceFocus = */ true);
    this.#thumbnailsPositions = null;

    this.eventBus.dispatch("pagesedited", {
      source: this,
      pagesMapper,
      hasBeenCut: this.#isCut,
      type: "paste",
    });

    this.#copiedThumbnails = null;
    this.#isCut = false;
    this.#togglePasteMode(false);
    this.#toggleMenuEntries(false);
    this.#updateStatus("select");
  }

  #deletePages(type = "delete") {
    if (!this.#canDelete()) {
      return;
    }

    const selectedPages = this.#selectedPages;
    if (type === "delete") {
      this.#reportTelemetry({ action: "delete" });
      this.#updateStatus("delete");
    }
    const pagesMapper = this.#pagesMapper;
    const currentPageNumber = selectedPages.has(this._currentPageNumber)
      ? 0
      : this._currentPageNumber;
    const pagesToDelete = (this.#deletedPageNumbers = Uint32Array.from(
      selectedPages
    ).sort((a, b) => a - b));

    pagesMapper.deletePages(pagesToDelete);
    this.#updateCurrentPage(this.#updateThumbnails(currentPageNumber));
    this.#thumbnailsPositions = null;

    selectedPages.clear();
    this.#updateMenuEntries();

    this.eventBus.dispatch("pagesedited", {
      source: this,
      pagesMapper,
      pageNumbers: pagesToDelete,
      type,
    });
  }

  #updateMenuEntries() {
    const size = this.#selectedPages?.size || 0;
    this.#manageExportButton.disabled = this.#manageCopyButton.disabled = !size;
    this.#manageDeleteButton.disabled = this.#manageCutButton.disabled =
      !this.#canDelete();
  }

  #toggleMenuEntries(enable) {
    this.#manageExportButton.disabled =
      this.#manageDeleteButton.disabled =
      this.#manageCopyButton.disabled =
      this.#manageCutButton.disabled =
        !enable;
  }

  #updateStatus(type) {
    if (!this.#statusBar || !this.#undoBar) {
      return;
    }
    const count = this.#selectedPages?.size || 0;
    if (type === "select") {
      this.#statusLabel.setAttribute(
        "data-l10n-id",
        count
          ? "pdfjs-views-manager-pages-status-action-label"
          : "pdfjs-views-manager-pages-status-none-action-label"
      );
      this.#toggleBar("status", "", count ? { count } : null);
      return;
    }

    let l10nId;
    switch (type) {
      case "copy":
        l10nId = "pdfjs-views-manager-pages-status-undo-copy-label";
        break;
      case "cut":
        l10nId = "pdfjs-views-manager-status-undo-cut-label";
        break;
      case "delete":
        l10nId = "pdfjs-views-manager-pages-status-undo-delete-label";
        break;
    }
    this.#toggleBar("undo", l10nId, { count });

    const isCopy = type === "copy";
    this.#undoButton.firstElementChild.setAttribute(
      "data-l10n-id",
      isCopy
        ? "pdfjs-views-manager-status-done-button-label"
        : "pdfjs-views-manager-status-undo-button-label"
    );
    this.#undoCloseButton.classList.toggle("hidden", isCopy);
  }

  #moveDraggedContainer(dx, dy) {
    if (this.#isOneColumnView) {
      dx = 0;
    }
    if (
      this.#draggedImageX + dx < 0 ||
      this.#draggedImageX + this.#draggedImageWidth + dx >
        this.#scrollableContainerWidth
    ) {
      dx = 0;
    }
    if (
      this.#draggedImageY + dy < 0 ||
      this.#draggedImageY + this.#draggedImageHeight + dy >
        this.#scrollableContainerHeight
    ) {
      dy = 0;
    }

    this.#draggedImageX += dx;
    this.#draggedImageY += dy;
    this.#draggedImageOffsetX += dx;
    this.#draggedImageOffsetY += dy;
    this.#draggedContainer.style.translate = `${this.#draggedImageOffsetX}px ${this.#draggedImageOffsetY}px`;
    if (
      this.#draggedImageY + this.#draggedImageHeight >
      this.#currentScrollBottom
    ) {
      this.scrollableContainer.scrollTop = Math.min(
        this.scrollableContainer.scrollTop + PIXELS_TO_SCROLL_WHEN_DRAGGING,
        this.#scrollableContainerHeight
      );
    } else if (this.#draggedImageY < this.#currentScrollTop) {
      this.scrollableContainer.scrollTop = Math.max(
        this.scrollableContainer.scrollTop - PIXELS_TO_SCROLL_WHEN_DRAGGING,
        0
      );
    }

    const positionData = this.#findClosestThumbnail(
      this.#draggedImageX + this.#draggedImageWidth / 2,
      this.#draggedImageY + this.#draggedImageHeight / 2
    );
    this.#positionDragMarker(positionData);
  }

  #positionDragMarker(positionData) {
    if (!positionData) {
      return;
    }
    let dragMarker = this.#dragMarker;
    if (!dragMarker) {
      dragMarker = this.#dragMarker = document.createElement("div");
      dragMarker.className = "dragMarker";
      this.container.firstChild.before(dragMarker);
    }

    const [index, space] = positionData;
    const dragMarkerStyle = dragMarker.style;
    const { bbox, x: xPos } = this.#thumbnailsPositions;
    let x, y, width, height;
    if (index < 0) {
      if (xPos.length === 1) {
        y = bbox[1] - SPACE_FOR_DRAG_MARKER_WHEN_NO_NEXT_ELEMENT;
        x = bbox[0];
        width = bbox[2];
      } else {
        y = bbox[1];
        x = bbox[0] - SPACE_FOR_DRAG_MARKER_WHEN_NO_NEXT_ELEMENT;
        height = bbox[3];
      }
    } else if (xPos.length === 1) {
      y = bbox[index * 4 + 1] + bbox[index * 4 + 3] + space;
      x = bbox[index * 4];
      width = bbox[index * 4 + 2];
    } else {
      y = bbox[index * 4 + 1];
      x = bbox[index * 4] + bbox[index * 4 + 2] + space;
      height = bbox[index * 4 + 3];
    }
    dragMarkerStyle.translate = `${x}px ${y}px`;
    dragMarkerStyle.width = width ? `${width}px` : "";
    dragMarkerStyle.height = height ? `${height}px` : "";
  }

  #computeThumbnailsPosition() {
    // Collect the center of each thumbnail.
    // This is used to determine the closest thumbnail when dragging.
    // TODO: handle the RTL case.
    const positionsX = [];
    const positionsY = [];
    const positionsLastX = [];
    const bbox = new Float32Array(this._thumbnails.length * 4);
    let prevX = -Infinity;
    let prevY = -Infinity;
    let reminder = -1;
    let firstRightX;
    let lastRightX;
    let firstBottomY;
    for (let i = 0, ii = this._thumbnails.length; i < ii; i++) {
      const { div } = this._thumbnails[i];
      const {
        offsetTop: y,
        offsetLeft: x,
        offsetWidth: w,
        offsetHeight: h,
      } = div;
      if (w === 0) {
        // The thumbnail view isn't visible.
        return;
      }
      bbox[i * 4] = x;
      bbox[i * 4 + 1] = y;
      bbox[i * 4 + 2] = w;
      bbox[i * 4 + 3] = h;
      if (x > prevX) {
        prevX = x + w / 2;
        firstRightX ??= prevX + w;
        positionsX.push(prevX);
      }
      if (y > prevY) {
        if (reminder === -1 && positionsX.length > 1) {
          reminder = ii % positionsX.length;
        }
        prevY = y + h / 2;
        firstBottomY ??= prevY + h;
        positionsY.push(prevY);
      }
      if (reminder > 0 && i >= ii - reminder) {
        const cx = x + w / 2;
        positionsLastX.push(cx);
        lastRightX ??= cx + w;
      }
    }
    let space;
    if (positionsX.length > 1) {
      space = (positionsX[1] - firstRightX) / 2;
    } else if (positionsY.length > 1) {
      space = (positionsY[1] - firstBottomY) / 2;
    } else {
      space = SPACE_FOR_DRAG_MARKER_WHEN_NO_NEXT_ELEMENT;
    }
    this.#thumbnailsPositions = {
      x: positionsX,
      y: positionsY,
      lastX: positionsLastX,
      space,
      lastSpace: positionsLastX.length
        ? (positionsLastX.at(-1) - lastRightX) / 2
        : space,
      bbox,
    };
    this.#isOneColumnView = positionsX.length === 1;
    ({
      clientWidth: this.#scrollableContainerWidth,
      scrollHeight: this.#scrollableContainerHeight,
    } = this.scrollableContainer);
  }

  #addEventListeners() {
    this.eventBus.on(
      "resize",
      ({ source }) => {
        if (source.thumbnailsView === this.container) {
          this.#computeThumbnailsPosition();
        }
      },
      internalOpt
    );
    this.container.addEventListener("keydown", e => {
      const { target } = e;
      const isCheckbox =
        target instanceof HTMLInputElement && target.type === "checkbox";

      switch (e.key) {
        case "ArrowLeft":
          this.#goToNextItem(target, false, true, isCheckbox);
          stopEvent(e);
          break;
        case "ArrowRight":
          this.#goToNextItem(target, true, true, isCheckbox);
          stopEvent(e);
          break;
        case "ArrowDown":
          this.#goToNextItem(target, true, false, isCheckbox);
          stopEvent(e);
          break;
        case "ArrowUp":
          this.#goToNextItem(target, false, false, isCheckbox);
          stopEvent(e);
          break;
        case "Home":
          this.#focusThumbnailElement(this._thumbnails[0], isCheckbox);
          stopEvent(e);
          break;
        case "End":
          this.#focusThumbnailElement(this._thumbnails.at(-1), isCheckbox);
          stopEvent(e);
          break;
        case "Enter":
        case " ":
          if (!isCheckbox) {
            this.#goToPage(e);
          }
          // For checkboxes, let the default behavior handle toggling
          break;
        case "c":
          if (
            this.#enableSplitMerge &&
            (e.ctrlKey || e.metaKey) &&
            this.#selectedPages?.size
          ) {
            this.#copyPages();
            stopEvent(e);
          }
          break;
        case "x":
          if (
            this.#enableSplitMerge &&
            (e.ctrlKey || e.metaKey) &&
            this.#selectedPages?.size
          ) {
            this.#cutPages();
            stopEvent(e);
          }
          break;
        case "Delete":
        case "Backspace":
          if (
            this.#enableSplitMerge &&
            !this.#isInPasteMode &&
            this.#selectedPages?.size
          ) {
            this.#deletePages();
            stopEvent(e);
          }
          break;
      }
    });
    this.container.addEventListener("click", e => {
      const { target } = e;
      if (target instanceof HTMLInputElement) {
        const pageNumber = parseInt(
          target.parentElement.getAttribute("page-number"),
          10
        );
        this.#selectPage(pageNumber, target.checked);
        return;
      }
      this.#goToPage(e);
    });
    this.#addDragListeners();
    this.#addExternalFileDropListeners();
  }

  #selectPage(pageNumber, checked) {
    if (this.#hasUndoBarVisible) {
      this.#dismissUndo(/* mustUpdateStatus = */ false);
    }
    const set = (this.#selectedPages ??= new Set());
    if (checked) {
      set.add(pageNumber);
    } else {
      set.delete(pageNumber);
    }

    this.#updateMenuEntries();
    this.#updateStatus("select");
  }

  #addDragListeners() {
    if (!this.#enableSplitMerge) {
      return;
    }
    this.container.addEventListener("pointerdown", e => {
      const {
        target: draggedImage,
        clientX: clickX,
        clientY: clickY,
        pointerId: dragPointerId,
      } = e;
      if (
        e.button !== 0 || // Skip right click.
        this.#isInPasteMode ||
        this._thumbnails.length === 1 ||
        !isNaN(this.#lastDraggedOverIndex) ||
        !draggedImage.classList.contains("thumbnailImageContainer")
      ) {
        // We're already handling a drag, or the target is not draggable.
        return;
      }

      const thumbnail = draggedImage.parentElement;
      const pointerDownAC = new AbortController();
      const { signal: pointerDownSignal } = pointerDownAC;
      let prevDragX = clickX;
      let prevDragY = clickY;
      let prevScrollTop = this.scrollableContainer.scrollTop;

      // When dragging, the thumbnail is scaled down. To keep the cursor at the
      // same position on the thumbnail, we need to adjust the offset
      // accordingly.
      const scaleFactor = PDFThumbnailViewer.#getScaleFactor(draggedImage);
      this.#draggedImageOffsetY =
        ((scaleFactor - 1) * e.layerY + draggedImage.offsetTop) / scaleFactor;

      if (this.#isOneColumnView) {
        this.#draggedImageOffsetX =
          draggedImage.offsetLeft +
          ((scaleFactor - 1) * 0.5 * draggedImage.offsetWidth) / scaleFactor;
      } else {
        this.#draggedImageOffsetX =
          ((scaleFactor - 1) * e.layerX + draggedImage.offsetLeft) /
          scaleFactor;
      }
      this.#draggedImageX = thumbnail.offsetLeft + this.#draggedImageOffsetX;
      this.#draggedImageY = thumbnail.offsetTop + this.#draggedImageOffsetY;
      this.#draggedImageWidth = draggedImage.offsetWidth / scaleFactor;
      this.#draggedImageHeight = draggedImage.offsetHeight / scaleFactor;

      this.container.addEventListener(
        "pointermove",
        ev => {
          const { clientX: x, clientY: y, pointerId } = ev;
          if (isNaN(this.#lastDraggedOverIndex)) {
            if (
              pointerId !== dragPointerId ||
              (Math.abs(x - clickX) <= DRAG_THRESHOLD_IN_PIXELS &&
                Math.abs(y - clickY) <= DRAG_THRESHOLD_IN_PIXELS)
            ) {
              // Not enough movement to be considered a drag.
              return;
            }

            // First movement while dragging.
            this.#onStartDragging(thumbnail);
            const stopDragging = (_e, isDropping = false) => {
              this.#onStopDragging(isDropping);
              pointerDownAC.abort();
            };
            const { signal } = this.#dragAC;
            window.addEventListener(
              "touchmove",
              stopEvent /* Prevent the container from scrolling */,
              { passive: false, signal }
            );
            window.addEventListener("contextmenu", noContextMenu, { signal });
            this.scrollableContainer.addEventListener(
              "scrollend",
              () => {
                const {
                  scrollableContainer: { clientHeight, scrollTop },
                } = this;
                this.#currentScrollTop = scrollTop;
                this.#currentScrollBottom = scrollTop + clientHeight;
                const dy = scrollTop - prevScrollTop;
                prevScrollTop = scrollTop;
                this.#moveDraggedContainer(0, dy);
              },
              { passive: true, signal }
            );
            window.addEventListener(
              "pointerup",
              upEv => {
                if (upEv.pointerId !== dragPointerId) {
                  return;
                }
                // Prevent the subsequent click event after pointerup.
                window.addEventListener("click", stopEvent, {
                  capture: true,
                  once: true,
                  signal,
                });
                stopEvent(upEv);
                stopDragging(upEv, /* isDropping = */ true);
              },
              { signal }
            );
            window.addEventListener("blur", stopDragging, { signal });
            window.addEventListener("pointercancel", stopDragging, { signal });
            window.addEventListener("wheel", stopEvent, {
              passive: false,
              signal,
            });
            window.addEventListener(
              "keydown",
              kEv => {
                if (
                  kEv.key === "Escape" &&
                  !isNaN(this.#lastDraggedOverIndex)
                ) {
                  stopDragging(kEv);
                }
              },
              { signal }
            );
          }

          const dx = x - prevDragX;
          const dy = y - prevDragY;
          prevDragX = x;
          prevDragY = y;
          this.#moveDraggedContainer(dx, dy);
        },
        { passive: true, signal: pointerDownSignal }
      );
      window.addEventListener(
        "pointerup",
        ({ pointerId }) => {
          if (pointerId !== dragPointerId) {
            return;
          }
          pointerDownAC.abort();
        },
        { signal: pointerDownSignal }
      );
      window.addEventListener("dragstart", stopEvent, {
        capture: true,
        signal: pointerDownSignal,
      });
    });
  }

  #addExternalFileDropListeners() {
    if (!this.#enableMerge) {
      return;
    }
    const container = this.container;
    const signal = this.#abortSignal;

    const hasMergeableItem = dataTransfer => {
      if (!dataTransfer) {
        return false;
      }
      // The file's bytes aren't readable during dragover, so the MIME type is
      // the only available signal. Matches the existing global drop handler
      // in app.js. Files with no MIME (e.g. some macOS sources) are rejected
      // here to keep the "copy" cursor honest; if needed, drop-time magic-byte
      // validation in #mergeFiles would still catch a permissive variant.
      for (const item of dataTransfer.items) {
        if (
          item.kind === "file" &&
          (item.type === "application/pdf" || item.type.startsWith("image/"))
        ) {
          return true;
        }
      }
      return false;
    };
    const pointerInContainer = ({ clientX, clientY }) => {
      const { left, right, top, bottom } = container.getBoundingClientRect();
      return (
        clientX >= left && clientX < right && clientY >= top && clientY < bottom
      );
    };

    container.addEventListener(
      "dragenter",
      e => {
        if (
          this.#externalDragActive ||
          // A page-move drag is already in progress.
          !isNaN(this.#lastDraggedOverIndex) ||
          !this._thumbnails.length ||
          !hasMergeableItem(e.dataTransfer)
        ) {
          return;
        }
        e.preventDefault();
        e.stopPropagation();
        e.dataTransfer.dropEffect = "copy";
        this.#externalDragActive = true;
        this.container.classList.add("isDraggingFile");
        // Recompute positions in case the layout changed since last time.
        this.#thumbnailsPositions = null;
        this.#computeThumbnailsPosition();
        // Marker hasn't been positioned yet — first dragover will do it.
        this.#lastDraggedOverIndex = NaN;
      },
      { signal }
    );

    container.addEventListener(
      "dragover",
      e => {
        if (!this.#externalDragActive) {
          return;
        }
        e.preventDefault();
        e.stopPropagation();
        e.dataTransfer.dropEffect = "copy";
        if (!this.#thumbnailsPositions) {
          return;
        }
        const rect = container.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        const positionData = this.#findClosestThumbnail(x, y);
        this.#positionDragMarker(positionData);
      },
      { signal }
    );

    container.addEventListener(
      "dragleave",
      e => {
        if (!this.#externalDragActive) {
          return;
        }
        // dragleave fires when crossing into a child element too; only treat
        // it as a true leave when the cursor has actually left the container.
        if (
          (e.relatedTarget && container.contains(e.relatedTarget)) ||
          pointerInContainer(e)
        ) {
          return;
        }
        this.#endExternalFileDrag();
      },
      { signal }
    );

    container.addEventListener(
      "drop",
      e => {
        if (!this.#externalDragActive) {
          return;
        }
        e.preventDefault();
        e.stopPropagation();
        const files = Array.from(e.dataTransfer.files ?? []);
        // If no dragover ever ran (e.g. instant drop), compute the index from
        // the drop event itself so we don't fall through to a stale fallback.
        if (isNaN(this.#lastDraggedOverIndex) && this.#thumbnailsPositions) {
          const rect = container.getBoundingClientRect();
          this.#findClosestThumbnail(
            e.clientX - rect.left,
            e.clientY - rect.top
          );
        }
        const insertAfter = isNaN(this.#lastDraggedOverIndex)
          ? -1
          : this.#lastDraggedOverIndex;
        this.#endExternalFileDrag();
        if (files.length) {
          this.#mergeFiles(files, insertAfter);
        }
      },
      { signal }
    );
  }

  #endExternalFileDrag() {
    this.#externalDragActive = false;
    this.container.classList.remove("isDraggingFile");
    this.#dragMarker?.remove();
    this.#dragMarker = null;
    this.#lastDraggedOverIndex = NaN;
  }

  #goToPage(e) {
    const container = e.target.closest(".thumbnailImageContainer");
    if (container) {
      const pageNumber = parseInt(container.getAttribute("page-number"), 10);
      this.linkService.goToPage(pageNumber);
      stopEvent(e);
    }
  }

  /**
   * Focus either the checkbox or image of a thumbnail.
   * @param {PDFThumbnailView} thumbnail
   * @param {boolean} focusCheckbox - If true, focus checkbox; otherwise focus
   *   image
   */
  #focusThumbnailElement(thumbnail, focusCheckbox) {
    if (focusCheckbox && thumbnail.checkbox) {
      thumbnail.checkbox.focus();
    } else {
      thumbnail.imageContainer.focus();
    }
  }

  /**
   * Go to the next/previous menu item.
   * @param {HTMLElement} element
   * @param {boolean} forward
   * @param {boolean} horizontal
   * @param {boolean} navigateCheckboxes - If true, focus checkboxes;
   *   otherwise focus images
   */
  #goToNextItem(element, forward, horizontal, navigateCheckboxes = false) {
    let currentPageNumber = parseInt(
      element.parentElement.getAttribute("page-number"),
      10
    );
    if (isNaN(currentPageNumber)) {
      currentPageNumber = this._currentPageNumber;
    }

    const increment = forward ? 1 : -1;
    let nextThumbnail;
    if (horizontal) {
      const nextPageNumber = MathClamp(
        currentPageNumber + increment,
        1,
        this._thumbnails.length + 1
      );
      nextThumbnail = this._thumbnails[nextPageNumber - 1];
    } else {
      const currentThumbnail = this._thumbnails[currentPageNumber - 1];
      const { x: currentX, y: currentY } =
        currentThumbnail.div.getBoundingClientRect();
      let firstWithDifferentY;
      for (
        let i = currentPageNumber - 1 + increment;
        i >= 0 && i < this._thumbnails.length;
        i += increment
      ) {
        const thumbnail = this._thumbnails[i];
        const { x, y } = thumbnail.div.getBoundingClientRect();
        if (!firstWithDifferentY && y !== currentY) {
          firstWithDifferentY = thumbnail;
        }
        if (x === currentX) {
          nextThumbnail = thumbnail;
          break;
        }
      }
      nextThumbnail ??= firstWithDifferentY;
    }
    if (nextThumbnail) {
      this.#focusThumbnailElement(nextThumbnail, navigateCheckboxes);
    }
  }

  // Given the drag center (x, y), find the drop slot index: the drag marker
  // will be placed after thumbnail[index], or before all thumbnails if index
  // is -1. Returns null when the drop slot hasn't changed (no marker update
  // needed), or [index, space] where space is the gap (in px) between
  // thumbnails at that slot, used to position the marker.
  //
  // positionsX holds the x-center of each column, positionsY the y-center of
  // each row. positionsLastX holds the x-centers for an incomplete last row
  // (when the total number of thumbnails is not a multiple of the column
  // count).
  #findClosestThumbnail(x, y) {
    if (!this.#thumbnailsPositions) {
      this.#computeThumbnailsPosition();
    }
    const {
      x: positionsX,
      y: positionsY,
      lastX: positionsLastX,
      space: spaceBetweenThumbnails,
      lastSpace: lastSpaceBetweenThumbnails,
    } = this.#thumbnailsPositions;
    const lastDraggedOverIndex = this.#lastDraggedOverIndex;

    // Fast-path: reconstruct the row/col of the previous drop slot and check
    // whether (x, y) still falls inside the same cell's bounds.
    let xPos = lastDraggedOverIndex % positionsX.length;
    let yPos = Math.floor(lastDraggedOverIndex / positionsX.length);
    let xArray = yPos === positionsY.length - 1 ? positionsLastX : positionsX;
    if (
      positionsY[yPos] <= y &&
      y < (positionsY[yPos + 1] ?? Infinity) &&
      xArray[xPos] <= x &&
      x < (xArray[xPos + 1] ?? Infinity)
    ) {
      // Fast-path: we're still in the same thumbnail.
      return null;
    }

    let index;
    // binarySearchFirstItem returns the first row index whose center is below
    // y, i.e. the first i such that positionsY[i] > y.
    yPos = binarySearchFirstItem(positionsY, cy => y < cy);
    if (this.#isOneColumnView) {
      // In a single column the drop slot is simply the row boundary: the marker
      // goes after row (yPos - 1), meaning before row yPos. index = -1 when y
      // is above the first thumbnail's center (drop before thumbnail 0).
      index = yPos - 1;
    } else {
      // Grid layout: first pick the nearest row, then the nearest column.

      if (yPos === positionsY.length) {
        // y is below the last row's center — clamp to the last row.
        yPos = positionsY.length - 1;
      } else {
        // Choose between the row just above (yPos - 1) and the row at yPos by
        // comparing distances, so the marker snaps to whichever row center is
        // closer to y.
        const dist1 = Math.abs(positionsY[yPos - 1] - y);
        const dist2 = Math.abs(positionsY[yPos] - y);
        yPos = dist1 < dist2 ? yPos - 1 : yPos;
      }
      // The last row may be incomplete, so use its own x-center array.
      xArray =
        yPos === positionsY.length - 1 && positionsLastX.length > 0
          ? positionsLastX
          : positionsX;
      // Find the column: the first column whose center is to the right of x,
      // minus 1, gives the column the cursor is in (or -1 if before column 0).
      xPos = binarySearchFirstItem(xArray, cx => x < cx) - 1;
      if (yPos < 0) {
        // y is above the first row: force drop before the very first thumbnail.
        if (xPos <= 0) {
          xPos = -1;
        }
        yPos = 0;
      }
      // Convert (row, col) to a flat thumbnail index, clamped to
      // [-1, length-1].
      index = MathClamp(
        yPos * positionsX.length + xPos,
        -1,
        this._thumbnails.length - 1
      );
    }
    if (index === lastDraggedOverIndex) {
      // No change.
      return null;
    }
    this.#lastDraggedOverIndex = index;
    // Use the last-row gap when the drop slot is in the incomplete last row.
    const space =
      yPos === positionsY.length - 1 && positionsLastX.length > 0 && xPos >= 0
        ? lastSpaceBetweenThumbnails
        : spaceBetweenThumbnails;

    return [index, space];
  }
}

export { PDFThumbnailViewer };