Custom Annotation drop location on different Resolution

Technical Support
1

PDF.js Express Version

  1. Build: “Ni8yOS8yMDIwfDZhZDkzMGE=”
  2. Core version: “6.3.4”
  3. Full API: false
  4. UI version: “6.3.3”
  5. WebViewer Server: false

Detailed description of issue
I’ve showing PDFJs into Modal Component where we will set the our Custom annotation controls to our Pdf document but the problem is that when we check on different resolution its drop point location have changed.

Expected behaviour
Drop annotation point should be the same.

Does your issue happen with every document, or just one?
Every document

Code snippet
dropPoint ={};
instance.iframeWindow.document.body.ondrop = (e) => {
const scrollElement = instance.docViewer.getScrollViewElement();
const scrollLeft = scrollElement.scrollLeft || 0;
const scrollTop = scrollElement.scrollTop || 0;
this.dropPoint = { x: e.pageX + scrollLeft, y: e.pageY + scrollTop };

     this.addanotation(instance,this.dropPoint.x,this.dropPoint.y,customData);
      e.preventDefault();

      return false;

addanotation(viewer,X,Y,Data)
{
let point = this.dropPoint || { x: layerX, y: layerY };
const { Annotations, docViewer, annotManager } = instanceRef;
const pageNumber = docViewer.getCurrentPage();
const freeText = new Annotations.FreeTextAnnotation();
freeText.PageNumber = pageNumber;
freeText.X = point.x;
freeText.Y = point.y;

annotManager.deselectAllAnnotations();
annotManager.addAnnotation(freeText);
annotManager.redrawAnnotation(freeText);
annotManager.selectAnnotation(freeText);
}

2

Hello, I’m an automated tech support bot.

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

3

Hey there,

Please see this guide about how PDF co-ordinates work. There is also some APIs in there should should help you normalize your values. This guide is a PDFTron guide, but it applies to PDF.js Express as well.

Let me know if you need any additional assistance.

Thanks!
Logan

4

I’m unable to run this line
const page = displayMode.getSelectedPages(windowCoordinates, windowCoordinates);

when above line execute its response first = 0 , last = 0;

any solution

5

Capture
Capture943×494 46.5 KB

here is my code

6

@Logan as you can see i’m unable to get the page number can you please assist me on this.

7

Hey there,

It looks like getSelectedPages returns a pageIndex and not a pageNumber, so you can just add one to page.first to get the page number