Some test text!

Loading...
Guides
Annotation events

Adding annotation events

There are a number of events related to annotations that can be useful to hook into. To do this you'll add a listener to the AnnotationManager. These events help in working with annotations. For example, changing the Author property on annotations as they are created.

Do not add the any of the listeners in the documentLoaded event
This will cause a new listener to be attached every time a new document is loaded
WebViewer(...)
  .then(instance => {
    const { documentViewer, annotationManager } = instance.Core;

    annotationManager.addEventListener('annotationChanged', () => {
      // ...
    });
  });

annotationChanged (add/modify/delete)

The annotationChanged event is fired every time the annotations in a document change. The event listener takes three parameters: an array of annotations that have changed, a string of the action that occurred (add, modify, delete), and an info object with additional information on the event.

WebViewer(...)
  .then(instance => {
    const { annotationManager } = instance.Core;
    annotationManager.addEventListener('annotationChanged', (annotations, action) => {
      if (action === 'add') {
        console.log('this is a change that added annotations');
      } else if (action === 'modify') {
        console.log('this change modified annotations');
      } else if (action === 'delete') {
        console.log('there were annotations deleted');
      }

      annotations.forEach((annot) => {
        console.log('annotation page number', annot.PageNumber);
      });
    });
  })
The annotationChanged event will also be fired whenever annotations are imported from XFDF, even if they were not created directly by a user.

If you want to do something different in that scenario, perhaps ignore those types of events, you can use the imported property of the info object. For example:

WebViewer(...)
  .then(instance => {
    const { annotationManager } = instance.Core;
    annotationManager.addEventListener('annotationChanged', (annotations, action, { imported }) => {
      // imported indicates if the annotations were imported via a process, mainly XFDF
      if (imported) {
        return;
      }
      // do event handling
    });
  })

One other property you might want to utilize is isUndoRedo which will return true if the annotation has changed as a result of an undo or redo action.

annotationSelected

The annotationSelected event is fired any time an annotation is selected or deselected in the UI. The parameters are similar to annotationChanged: an array of annotations and a string of the action (selected or deselected). If all annotations have been deselected then the annotations array will be null.

WebViewer(...)
  .then(instance => {
    const { annotationManager } = instance.Core;
    annotationManager.addEventListener('annotationSelected', (annotations, action) => {
      if (action === 'selected') {
        console.log('annotation selection');
      } else if (action === 'deselected') {
        console.log('annotation deselection');
      }

      console.log('annotation list', annotations);

      if (annotations === null && action === 'deselected') {
        console.log('all annotations deselected');
      }
    });
  })

Annotations can be selected from the UI by clicking on them and once selected there will be a dashed border drawn around them. The getSelectedAnnotations will give you the currently selected annotations. For example, the following code deselects one of the currently selected annotations:

WebViewer(...)
  .then(instance => {
    const { annotationManager } = instance.Core;
    const selectedAnnots = annotationManager.getSelectedAnnotations();

    if (selectedAnnots.length > 0) {
      const firstSelectedAnnot = selectedAnnots[0];
      annotManager.deselectAnnotation(firstSelectedAnnot);
    }
  });

To programmatically select/deselect annotations, you can use the selectAnnotation(s) and deselectAnnotation(s) functions. There are also several more events on AnnotationManager that may be useful to you.

annotationsLoaded

The annotationsLoaded event is fired when all the annotations internal to the document have been loaded. Since DocumentViewer is managing this process the event is fired on DocumentViewer.

WebViewer(...)
  .then(instance => {
    const { documentViewer, annotationManager } = instance.Core;
    documentViewer.addEventListener('annotationsLoaded', () => {
      // all annotations are available
      const annotations = annotationManager.getAnnotationsList();
    });
  })

Get the answers you need: Support

Upcoming Webinar: SDK Features Preview and Live Run-Through | July 14, 2022 at 11 am PT

PDFTron SDK

The Platform

NEW

© 2022 PDFTron Systems Inc. All rights reserved.

Privacy

Terms of Use