Reference point used to anchor the Note comment annotation is located in the upper left corner of the comment instead of where the annotation logo points

Technical Support
, ,
1

Product: PDFTron WebViewer

Product Version: 8.3

Please give a brief summary of your issue:

Hi,

When we create a Note comment annotation, the reference point used to anchor the annotation is located in the upper left corner of the comment instead of where the annotation logo points.

For example, here, I precisely point to the angle of the “S” from “Six” so I could expect that the generated Note will exactly point to the related location

image
image699×411 5.39 KB

BUT, it is where the anchor of the annotation object will be located, and regarding the Note comment, it is the upper left part which is not really clear:
image

It is quite dusturbing for the user, indeed he would expect this specific point to be where the point of the bubble points, the result would be something like that:
image

My questions are:

  • Can we modify the form of this annotation object in order to have the tip pointing to the upper left part of the Note (mirror reversing the bubble form for instance…)
    AND/OR
  • Is it possible to change the reference point used to anchor, from:
    image
    to
    image

Thanks in advance for your time.

Best Regards,

Alexandre

2

Hi @alex.plt,

The positioning of the sticky note is something determined by the PDF spec, so there is not much we can do about that. However, you can tweak the positioning slightly to achieve what you need by adding an event listener on the annotationChanged event. Here is a snippet of how you could tweak the positioning slightly to achieve what you need.

  const { documentViewer, Annotations, annotationManager } = instance.Core;

  annotationManager.addEventListener('annotationChanged', (annotations, action, info) => {
    const { imported } = info;
    const zoom = documentViewer.getZoom();
    const stickyAnnotations = annotations.filter(annotation => annotation instanceof Annotations.StickyAnnotation);
    if(action == 'add' && stickyAnnotations.length > 0 && !imported) {
      stickyAnnotations.forEach(sticky => {
        const y = sticky.getY();
        const height = sticky.getHeight() / zoom;
        const newY = y - height;

        sticky.setY(newY)
        annotationManager.redrawAnnotation(sticky);
      })
    }
  })

note

You’ll have to handle different cases for rotated pages, but the idea is the same.

Another option you have is to change the icon for the note by setting a setCustomDrawHandler for the sticky annotation. Using this method you can specify how the icon is drawn, with the tip of the note pointing to the upper left corner. We also have other default Icons that you may find suit your use case better.

Best Regards,
Armando Bollain
Software Developer
PDFTron Systems, Inc.