How to highlight text or number ONLY by moving mouse cursor over it, both in PDF and HTML?

Technical Support
, , ,
1

Product: pdftron/webviewer using SDK angular

Product Version: @pdftron/webviewer": "^8.3.0

How to highlight text or number ONLY by moving mouse cursor over it, both in PDF and HTML?

Is it possible to trace chars/text and numbers using mouse offset coordinates? if yes how can it be acheived? I tried to extract the mouse coordinates (offsetX and offsetY) and tried converting to select the text using
doc.getTextByPageAndRect(1,instance.Core.Math.Rect.createFromDimensions(e.offsetX,e.offsetY,2,2));
it does not help. Please suggest.

2

Hello,

You are actually calling the right API for what you are trying to achieve, but note that you need to use transformed mouse coordinates when calling the createFromDimensions() method. You can read more about the different coordinate systems of WebViewer on our documentation page. Here is the code that worked for me:

    const { documentViewer } = instance.Core;
    const getMouseLocation = e => {
      const scrollElement = documentViewer.getScrollViewElement();
      const scrollLeft = scrollElement.scrollLeft || 0;
      const scrollTop = scrollElement.scrollTop || 0;
      return {
        x: e.pageX + scrollLeft,
        y: e.pageY + scrollTop
      };
    };
 
    documentViewer.addEventListener('mouseMove', e => {
      const doc = documentViewer.getDocument();
      const windowCoordinates = getMouseLocation(e);
      const displayMode = documentViewer.getDisplayModeManager().getDisplayMode();
      const pageCoordinates = displayMode.windowToPage(windowCoordinates, 1);
     
      doc.getTextByPageAndRect(1,instance.Core.Math.Rect.createFromDimensions(pageCoordinates.x,pageCoordinates.y,2,2)).then(text => {
        console.log('text: ',text)
      })
    })

I’m not sure what you meant by HTML, could you elaborate if the code above doesn’t work for your specific use case?

3

Thank you, working perfect as expected.
By HTML I meant to use exactly same when we try to open the HTML documents’ / links.

Look forward to use the tool in depth. thank you for your prompt reply.

4

I am further trying to add the highlight on the text when it is a number, but text is not getting highlighted

const annotation = new Annotations.TextHighlightAnnotation();
        annotation.setRect(rect);
        annotation.setX(pageCoordinates.x);
        annotation.setY(pageCoordinates.y);
       
         annotation.StrokeColor = new Annotations.Color(255, 255, 31);
        // Object.assign(annotation.Quads, instance.Core.Math.Rect.createFromDimensions(pageCoordinates.x,pageCoordinates.y,2,2).toQuad());  
        // annotation.Quads.length = 1;
         const options = {pageNumber:1}
         annotationManager.addAnnotation(annotation);
         annotationManager.drawAnnotations(options);

it works with text selection event but not when we hover under the text of PDF

5

Hey there,

In that case I would combine getTextByPageAndRect() together with our search API documentViewer.textSearchInit. We can put our highlighting logic inside the onResult callback .Here is the code that worked for me:

  const { documentViewer, Annotations, Search } = instance.Core;
  const getMouseLocation = e => {
    const scrollElement = documentViewer.getScrollViewElement();
    const scrollLeft = scrollElement.scrollLeft || 0;
    const scrollTop = scrollElement.scrollTop || 0;
    return {
      x: e.pageX + scrollLeft,
      y: e.pageY + scrollTop
    };
  };
  const pageNumber = 1;
  let quadCache = {};
  documentViewer.setSearchHighlightColors({
    searchResult: new Annotations.Color(0, 0, 255, 0.5),
  });
  documentViewer.addEventListener('mouseMove', e => {
    const doc = documentViewer.getDocument();
    const windowCoordinates = getMouseLocation(e);
    const displayMode = documentViewer.getDisplayModeManager().getDisplayMode();
    const pageCoordinates = displayMode.windowToPage(windowCoordinates, pageNumber);
    // No need to run the search logic again if the cursor is still within the previous quads
    if (
      pageCoordinates.x > quadCache.x1 &&
      pageCoordinates.y < quadCache.y1 &&
      pageCoordinates.x < quadCache.x2 &&
      pageCoordinates.y > quadCache.y4) {
      return;
    }
    doc.getTextByPageAndRect(pageNumber,instance.Core.Math.Rect.createFromDimensions(pageCoordinates.x,pageCoordinates.y,2,2)).then(searchText => {
      if (!searchText) {
        return;
      }
      const mode = Search.Mode.CASE_SENSITIVE | Search.Mode.HIGHLIGHT | Search.Mode.PAGE_STOP;
      const searchOptions = {
        startPage: pageNumber,
        endPage: pageNumber,
        fullSearch: true,
        onResult: result => {
          if (result.resultCode === Search.ResultCode.FOUND) {
            const textQuad = result.quads[0].getPoints();
            // there could be several matching results, and we need the one that contains our cursor position
            if (
              pageCoordinates.x > textQuad.x1 &&
              pageCoordinates.y < textQuad.y1 &&
              pageCoordinates.x < textQuad.x2 &&
              pageCoordinates.y > textQuad.y4) {
              quadCache = textQuad;
              documentViewer.displayAdditionalSearchResult(result)
              // if you need to keep the highlights on the page after moving cursor to other words
              // you will need to create highlight annotation here 
              // instead of calling documentViewer.displayAdditionalSearchResult();
            }
          }
        }
      }
      documentViewer.textSearchInit(searchText, mode, searchOptions);
    })
  })