Mouse Coordinates / Annotations Coordinates

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.

Many Thanks in advance for your kind support

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:

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