How to get the position of Annotation relative to the entire screen?

Technical Support
1

Product:WebViewer

Product Version:6.3.5

Please give a brief summary of your issue:
How to get the position of Annotation relative to the entire screen

Please describe your issue and provide steps to reproduce it:
We now have a requirement, which is to add Annotation to Document, and then display a Dialog behind this Annotation. How do I get the Annotation relative to the entire screen: Left and Top, so that I can locate the Dialog to the Annotation position

Please provide a link to a minimal sample where the issue is reproducible:

image
image1566×510 25.2 KB

2

Hello Chen,

Thank you for contacting PDFTron!

To get the positions of a certain annotation can be achieved through the following code:
const annotManager = instance.annotManager
const annotationList = annotManager.getAnnotationsList()
[readmore:PDFTron WebViewer Class: AnnotationManager]

const annotationCoordinate = [annotationList[index].getX(), annotationList[index].getY()]
[readmore:PDFTron WebViewer Class: Annotation]

Please let me know how this works for you, and if you have any further questions.

Best Regards,
Jason Hu
Web Development Support Engineer
PDFTron Systems, Inc.

3

Hi Jason

Thank you for your reply and answer.

const annotationCoordinate = [annotationList[index].getX(), annotationList[index].getY()];

What is obtained in this way is only equivalent to the coordinates of the PDftron viewer,and PDftron viewer is an iframe, is a part of the current screen,this coordinate is not relative to the current screen, when the PDftron viewer slides, the obtained Y coordinate will be very large, because this way of writing getY( ),the sliding distance will also be calcul.

Best Regards,
Kai Chen

4

Hello Chen,

Thanks for the reply.

I see what you are trying to do, const annotationCoordinate = [annotationList[index].getX(), annotationList[index].getY()]; returns viewer coordinates, which are able to be converted to window coordinates by using the following code snippet ` const { documentViewer } = instance.Core;

const displayMode = documentViewer.getDisplayModeManager().getDisplayMode();
const pageNumber = 1;
const pagePoint = {
  x: 0,
  y: 0
};

const windowPoint = displayMode.pageToWindow(pagePoint, pageNumber);
// { x: 212, y: 46 }

const originalPagePoint = displayMode.windowToPage(windowPoint, pageNumber);
// { x: 0, y: 0 }`

Read More here:https://www.pdftron.com/documentation/web/guides/coordinates/#converting-between-mouse-locations-and-window-coordinates

Please let me know how this works for you, and if you have any further questions!

Best Regards,
Jason Hu
Web Development Support Engineer
PDFTron Systems, Inc.

5

Hi Jason,

Thank you for your reply, this is exactly what I want, I will verify according to API (Sorry to reply to you late, I took a vacation before)

Best Regards,
Kai Chen
Web Development Engineer
SQLView Systems, Inc.

6

Hi,

I am glad to hear that. Let me know how it goes!

Best Regards,
Jason Hu
Web Development Support Engineer
PDFTron Systems, Inc.

7

Hi Jason,

I have basically completed we function, this is Demo:

This is the main code：

  annotManager.on('annotationSelected',(annotations, action) => {
                  const zoom = this.docViewer.getZoom();
                    //1.Dialog隐藏(hide)
                    if(action==='deselected'){
                        this.textSettingsVisible=false;
                    }
                    //2.弹出Dialog(Show Dialog)
                    if(action=='selected'){
                        annotations.forEach((annot) => {
                            const type=annot.getCustomData('type');
                            if(type=='TEXT'){
                                const zoom = this.docViewer.getZoom();
                                const displayMode = this.docViewer.getDisplayModeManager().getDisplayMode();
                                const page = displayMode.getSelectedPages(this.dropPoint, this.dropPoint);
                                const pageIdx = page.first !== null ? page.first : this.docViewer.getCurrentPage() - 1;
                                const pagePoint = {
                                    x: annot.getX(),
                                    y: annot.getY()
                                };
                                const windowPoint = displayMode.pageToWindow(pagePoint, pageIdx);
                                //console.log(windowPoint)
                                const scrollElement =this.docViewer.getScrollViewElement();
                                let scrollTop = scrollElement.scrollTop;
                                let scrollLeft = scrollElement.scrollLeft;
                                this.textSettingsX= windowPoint.x-scrollLeft+(annot.getWidth()*zoom)+250 //250:Dialog width;
                                this.textSettingsY= windowPoint.y-scrollTop;
                                this.textSettingsVisible=true;
                            }
                        });
                    }
        })

I found that I need to subtract scroll.

Thank you for your support.
Best Regards,
Kai Chen
Web Development Engineer
SQLView Systems, Inc.

8

Hi Chen,

Thanks for the update, the functionality looks great!

Please let me know if you have any further questions.

Best Regards,
Jason Hu
Web Development Support Engineer
PDFTron Systems, Inc.

9

Hi Jason,

How to get the distance of the annotation from the right side of the document? Because, when the annotation is on the far right of the document, the Dialog will exceed the screen, so we need to do special processing.

image
image1227×331 11.4 KB

Best Regards,
Jason Hu
Web Development Support Engineer
PDFTron Systems, Inc.

10

Hi Chen,

I believe you can get it using getPageWidth and the location of the annotation on the page getX and getY.

Please let me know if you have any further questions.

Best Regards,
Jason Hu
Web Development Support Engineer
PDFTron Systems, Inc.