Add annotation programatically at the current mouse cursor

Technical Support Apryse SDK
1

Product: Apryse PDFTron SDK

Product Version: 10.2.3

Please give a brief summary of your issue:
I want to add freetext annotations programatically at the coordinates of the mouse point.

Please describe your issue and provide steps to reproduce it:
I have a special use case where the user can click a button to customise the freetext annotation before adding it to the pdf.
I want the annotation to appear where ever the mouse point is regardless the scroll distance of the document.

Or is there any way to add the annotations to the middle of the viewport (not the middle of the document)?

1 Like
2

Thank you for contacting Apryse support.

I’m reviewing your request and will get back to you shortly.

1 Like
3

Hi there,

To add a free text annotation programmatically, you can do the following:

In the instantiation, there are X & Y values that you can insert for the position of the annotation.
This X & Y coordinates can be from a mouse point, using the mouseMove event:
https://docs.apryse.com/api/web/Core.DocumentViewer.html#event:mouseMove

Best regards,
Kevin Kim

4

Hello kevin,

Thank you for your quick response.
Another question: is there any way to change the cursor to ‘+’ conditionally, within the documentViewer?

1 Like
5

Hi there,

Please try the method provided here:

Best regards,
Kevin Kim

1 Like
6

Hello Kevin,

I wanted to change the cursor based on a state variable, and not while a tool is active.
I do not have any custom tools registered in the UI.

Also, I could not print the “data” object inside the event object of “mouseLeftDown” event. I can see the “data” object pinted in the console with multiple values in it, but when I try to access the properties of the “data” object, undefined is retuned.

Thanks,
Subhra

1 Like
7

Hi there,

mouseLeftdown event comes with the native event that you can access directly without going into the data object. This data object doesn’t exist in the context of the MouseEvent:

image
image1920×1037 97.7 KB

To change the cursor depending on your use-case, you may need to follow the advanced UI customization:

Best regards,
Kevin Kim

1 Like
8

Hii kevin,

I actually can see a “data” object inside the event object. But when I try to access it, it vanishes.

image
image641×876 29.9 KB

What I am trying to achieve is when I click the mouse left button a custom annotation should be added at the mouse coordinate.

I need the coordinates of the PDF page where the mouse button is clicked.
The other data in the event object are useless to me as they are not related any how to the page coordinates (used by the annotation’s X and Y properties)

1 Like
9

Hi there,

We have a guide on how to convert the page coordinates to viewer coordinates:

For your use-case, you could also try the documentViewer’s click event:
https://docs.apryse.com/api/web/Core.DocumentViewer.html#event:click
The event’s X,Y coordinates are the same as the LeftMouseDown’s data.mouseCoordinate coordinates

Best regards,
Kevin Kim

1 Like
10

Solution I used:

const mousLocation =
documentViewer.getViewerCoordinatesFromMouseEvent(eventObj);

got the mouse locations using the above function on documentViewer and the x, y coordinates are perfect for the X and Y properties of the annotation I wanted to add

1 Like