Section:

Annotation Events

There are a number of events related to annotations that can be useful to hook into. This is especially important for knowing when annotations are created in order to export them or immediately change a property. To do this you'll add a listener to the AnnotationManager.

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

1WebViewer(...)
2  .then(instance => {
3    const { annotationManager } = instance.Core;
4
5    annotationManager.addEventListener('annotationChanged', () => {
6      // ...
7    });
8  });

Related Links

annotationChanged (add/modify/delete)

The annotationChanged event is fired every time an annotation is added, modified, or deleted. The handler takes three parameters: an array of annotations that have changed, a string for the action (add, modify, delete), and an info object describing the event.

1WebViewer(...)
2  .then(instance => {
3    const { annotationManager } = instance.Core;
4
5    annotationManager.addEventListener('annotationChanged', (annotations, action) => {
6      if (action === 'add') {
7        console.log('this is a change that added annotations');
8      } else if (action === 'modify') {
9        console.log('this change modified annotations');
10      } else if (action === 'delete') {
11        console.log('there were annotations deleted');
12      }
13
14      annotations.forEach((annot) => {
15        console.log('annotation page number', annot.PageNumber);
16      });
17    });
18  })

Related Links

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:

1WebViewer(...)
2  .then(instance => {
3    const { annotationManager } = instance.Core;
4    annotationManager.addEventListener('annotationChanged', (annotations, action, { imported }) => {
5      // imported indicates if the annotations were imported via a process, mainly XFDF
6      if (imported) {
7        return;
8      }
9      // do event handling
10    });
11  })

Related Links

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 for the action (selected or deselected). The preferred way to detect deselection is using the annotationDeselected event.

1WebViewer(...)
2  .then(instance => {
3    const { annotationManager } = instance.Core;
4    annotationManager.addEventListener('annotationSelected', (annotations, action) => {
5      if (action === 'selected') {
6        console.log('annotation selection');
7      } else if (action === 'deselected') {
8        console.log('annotation deselection');
9      }
10
11      console.log('annotation list', annotations);
12
13      if (annotationManager.getSelectedAnnotations().length === 0 && action === 'deselected') {
14        console.log('all annotations deselected');
15      }
16    });
17  })

Related Links

Users can select annotations through the viewer but you can also perform selections/deselections programmatically using our APIs .

annotationDeselected

Using the annotationDeselected event is the recommended way to detect annotation deselection and getting the deselected annotations. You will get only the deselected annotations as a parameter to the listener.

JavaScript (v8.0+)

1WebViewer(...)
2  .then(instance => {
3    const { annotationManager, Annotations } = instance.Core;
4    annotationManager.addEventListener('annotationDeselected', (annotations) => {
5      annotations.forEach(annot => {
6        if (annot.FillColor) {
7          annot.FillColor = new Annotations.Color(255, 0, 0, 1);
8        }
9      });
10    });
11  })

Related Links

annotationsLoaded

The annotationsLoaded event is fired when all the annotations internal to the document have been loaded. It is one of the lifecycle events in WebViewer. Since DocumentViewer is managing this process the event is fired on DocumentViewer. When working with annotations, it would be best to use this event over documentLoaded to ensure all annotations are available.

1WebViewer(...)
2  .then(instance => {
3    const { documentViewer, annotationManager } = instance.Core;
4    documentViewer.addEventListener('annotationsLoaded', () => {
5      // all annotations are available
6      const annotations = annotationManager.getAnnotationsList();
7    });
8  })

Related Links

Next steps

Look into how you can create your own annotations!

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales