Custom Annotation Placement Issue

[ijalilkhan]

Hi,

I am using custom annotation. Currently, it is working fine with the on-click event and is placed according to “X, Y” coordinates of the current PDF Scroll Position.

I want to implement the custom annotations in a way that the Default Annotations are implemented ( The annotation is attached with the mouse cursor and can be placed anywhere with the click of the mouse on the PDF doc )

I was hoping to get some help from the technical team to guide me or provide me with some event handling.

[system]

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

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

Guides:

• Freeform rotation for custom rectangular annotations - The convenient mixin
• Freeform rotation for custom path-based annotations - The convenient mixin
• Printing a document with JavaScript - Embedded printing
• Create new form fields and widget annotations using Javascript - Programmatically

APIs:

• Core.Tools. Tool - cursor
• UI - useEmbeddedPrint( [use])
• Core.Tools. TextUnderlineCreateTool - disableImmediateActionOnAnnotationSelection()

Forums:

• Facing issue with custom annotation
• Zoom to a location on load
• Annotation “AnnotationCreateSticky” custom icon

[Andy_Huang]

Hello,

I am not entirely sure of how you have your custom annotations implemented right now but to achieve what you are looking to do, you would have to create a custom tool for your custom annotation: https://www.pdftron.com/documentation/web/guides/annotation/custom-annotations/#adding-the-annotation-to-a-document.

You can have a basic tool or a fully customized one. For the basic one, you would create the tool but use the events on the document viewer to handle creating, mounting, and removing the custom annotation preview. You would have to mount an annotation preview canvas to the DOM when the tool is swapped in and unmount it when it is swapped out. You can use this event to do that: PDFTron WebViewer Class: DocumentViewer. That preview canvas would have to be absolute positioned to it can move freely with the mouse cursor. You can then use the mouseMove to get the mouse position and essentially the position of the preview: PDFTron WebViewer Class: DocumentViewer. When the mouse has moved, you will have to manually call draw on the annotation, passing in the canvas context of your preview to draw the annotation to the preview canvas.

You can do the same with a fully customized tool (PDFTron WebViewer Class: Tool) that will appear on switchIn and be removed on switchOut. Once attached to the DOM, you will have to call draw on your annotation while passing in the canvas context. This will draw the annotation to the canvas and have it shown up on the screen. This preview will have to be absolutely positioned and be tied to your mouse with the same mouseMove function.

Let me know if this helps!

Andy Huang