Get elements highlighted from the search result

[ruppo-912116]

Problem statement

I am trying to find all the occurrence of a word from a PDF document using pdf.js. After finding those words, I would like to add an annotation box (or a simple box for now) over those text.

Progress

I have been able to highlight all the occurrences of the word/phrases looking into the examples present in pdf.js from this link: https://github.com/mozilla/pdf.js/tree/master/examples/components

Here is the updated code:

if (!pdfjsLib.getDocument || !pdfjsViewer.PDFSinglePageViewer) {
  // eslint-disable-next-line no-alert
  alert("Please build the pdfjs-dist library using\n  `gulp dist-install`");
}

// The workerSrc property shall be specified.
//
pdfjsLib.GlobalWorkerOptions.workerSrc = "./lib/pdf.worker.mjs";

// Some PDFs need external cmaps.
//
const CMAP_URL = "./cmaps/";
const CMAP_PACKED = true;

const DEFAULT_URL = "./sample.pdf";
// To test the AcroForm and/or scripting functionality, try e.g. this file:
// "../../test/pdfs/160F-2019.pdf"

const ENABLE_XFA = true;
const SEARCH_FOR = "Ete Heel"; // try "Mozilla";

const SANDBOX_BUNDLE_SRC = new URL("./lib/pdf.sandbox.mjs", window.location);

const container = document.getElementById("viewerContainer");

const eventBus = new pdfjsViewer.EventBus();

// (Optionally) enable hyperlinks within PDF files.
const pdfLinkService = new pdfjsViewer.PDFLinkService({
  eventBus,
});

// (Optionally) enable find controller.
const pdfFindController = new pdfjsViewer.PDFFindController({
  eventBus,
  linkService: pdfLinkService,
});

// (Optionally) enable scripting support.
const pdfScriptingManager = new pdfjsViewer.PDFScriptingManager({
  eventBus,
  sandboxBundleSrc: SANDBOX_BUNDLE_SRC,
});

const pdfSinglePageViewer = new pdfjsViewer.PDFSinglePageViewer({
  container,
  eventBus,
  linkService: pdfLinkService,
  findController: pdfFindController,
  scriptingManager: pdfScriptingManager,
});
pdfLinkService.setViewer(pdfSinglePageViewer);
pdfScriptingManager.setViewer(pdfSinglePageViewer);

eventBus.on("pagesinit", function () {
  // We can use pdfSinglePageViewer now, e.g. let's change default scale.
  pdfSinglePageViewer.currentScaleValue = "page-width";

  // We can try searching for things.
  if (SEARCH_FOR) {
    eventBus.dispatch("find", {
      type: "",
      query: SEARCH_FOR,
      phraseSearch: true,
      highlightAll: true,
    });
  }
});

// When the find controller finds occurrences
eventBus.on("updatetextlayermatches", function (e) {
  console.log("drawing boxes", e);
  // drawBoxes(e.matches);
});

// Draw boxes over the found occurrences
// function drawBoxes(matches) {
//   const textLayer = document.querySelector(".textLayer");
//   if (!textLayer) return;

//   // Clear existing boxes
//   const existingBoxes = textLayer.querySelectorAll(".highlight-box");
//   existingBoxes.forEach((box) => box.remove());

//   matches.forEach((match) => {
//     const box = document.createElement("div");
//     box.className = "highlight-box";
//     box.style.position = "absolute";
//     box.style.border = "2px solid red"; // Style your box
//     box.style.pointerEvents = "none"; // Allow clicks to pass through

//     // Calculate position and size of the box
//     const rect = match.rect; // Contains the position of the found text
//     box.style.left = `${rect[0]}px`;
//     box.style.top = `${rect[1]}px`;
//     box.style.width = `${rect[2] - rect[0]}px`;
//     box.style.height = `${rect[3] - rect[1]}px`;

//     textLayer.appendChild(box);
//   });
// }

// Loading document.
const loadingTask = pdfjsLib.getDocument({
  url: DEFAULT_URL,
  cMapUrl: CMAP_URL,
  cMapPacked: CMAP_PACKED,
  enableXfa: ENABLE_XFA,
});

const pdfDocument = await loadingTask.promise;
// Document loaded, specifying document for the viewer and
// the (optional) linkService.
pdfSinglePageViewer.setDocument(pdfDocument);

pdfLinkService.setDocument(pdfDocument, null);

I am now trying to get the div's or component of the matched words so that I can draw boxes over them. I looked into pdf_viewer.mjs and found an event named "updatetextlayermatches" hoping it might provide me components/div of the matched words but it provides an array of numbers which I did not quite understand.

Can someone help and guide me in the right direction?

[ruppo-912116]

Let me share my simple work around for this. While inspecting the div, I noticed the highlighted text had class named "highlight" to them. So what I did was obtain all those elements with the 'highlight' class. Then, I obtained the position of each of them via getBoundingRect, created a

element (to show the boxes over the text) for each of the position and width and then appended them to the annotation layer.

Here is a small code snippet to show the main idea

/* id is just a unique identification for those annotations. selectRect is the highlighted span element obtained when looping through the result of getElementsByClassName  */
    renderToViewport = (id, selectionRect) => {
        const boundingClientRect = selectionRect.getBoundingClientRect();
        const rectangle = document.createElement('section'); // creating a section element to append to the annotation layer
        
        // get the page index of selected text
        const pageIndex = this.getPageIndexOfSelectedText(selectionRect); // To obtain the page where this annotation is to be added
        annotationHelper.appendAnnotation(pageIndex + 1);
        
        const annotationLayer = document.getElementsByClassName("annotationLayer")[pageIndex]; // getting the annotation layer of that page
        const pageEl = document.querySelector(`[data-page-number="${pageIndex + 1}"]`).getBoundingClientRect(); // parent element

        const left = boundingClientRect.left - pageEl.left;
        const top = boundingClientRect.top - pageEl.top;

        rectangle.classList.add('freeTextAnnotation');
        rectangle.classList.add('specimen-annotation');

        rectangle.setAttribute("data-annotation-id", id)
        rectangle.style.top = top + "px";
        rectangle.style.left = left + "px";
        rectangle.style.width = boundingClientRect.width + "px";
        rectangle.style.height = boundingClientRect.height + "px";
        rectangle.innerHTML = " SPECIMEN ";
        rectangle.style.transformOrigin = `-${left}px -${top}px`;

        annotationLayer.appendChild(rectangle);
    }