Mouse Coordinates / Annotations Coordinates

Technical Support
1

Dear Support,

I’m trying to use the mouse Events raised by the WebViewer in order to add some annotations into my document.
Code below is working excepted that there is a shift between the position of my freeText and the mouse coordinates…
How could I do to make the position of the annotation match with the position of my mouse cursor when there is a mouseUp Event.

image
image759×528 26.4 KB

Many Thanks in advance for your kind support

2

Hello, I’m Ron, an automated tech support bot :robot:

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

Guides:APIs:Forums:

3

Hi!

You are super close, there are just a couple extra steps you need to do. Converting mouse coordinates to page coordinates is a bit tricky because there is a lot to take into account - zoom, page rotation, page dimensions etc.

Here is some code that converts mouse coordinates to page coordinates:

const getMouseLocation = e => {
    const scrollElement = instance.docViewer.getScrollViewElement();
    const scrollLeft = scrollElement.scrollLeft || 0;
    const scrollTop = scrollElement.scrollTop || 0;
  
    return {
      x: e.pageX + scrollLeft,
      y: e.pageY + scrollTop
    };
  };

  instance.docViewer.on('click', e => {

    const windowCoordinates = getMouseLocation(e);
    const displayMode = docViewer.getDisplayModeManager().getDisplayMode();
    const page = displayMode.getSelectedPages(windowCoordinates, windowCoordinates);
    const clickedPage = (page.first !== null) ? page.first : docViewer.getCurrentPage();

    const pageCoordinates = displayMode.windowToPage(windowCoordinates, clickedPage);

    const freetext = new instance.Annotations.FreeTextAnnotation();

    freetext.X = pageCoordinates.x ; // <---
    freetext.Y = pageCoordinates.y ; // <---

  })

I hope this helps!
Logan

4

and where is that code supposed to go if i want to use it too?

5

when i paste this into the WebViewer.Vue file where the other eventListeners are, nothing happens