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

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:

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.

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

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.

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.

Hi,

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

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

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.

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.