Section:

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.

Do not add the listener 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 { documentViewer, 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; the event object, an array of annotations that have changed and a string for the action (add, modify, delete).

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

Related Links

The annotationChanged event will also be fired whenever annotations are imported from your server or inside the document, that is, they weren't created directly by a user.

If you want to do something different in that case, maybe ignore those events, you can use the imported property of the event object. For example:

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

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; there is an event object, array of annotations and a string for the action (selected or deselected). If all annotations have been deselected then the annotations array will be null.

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 (annotations === null && action === 'deselected') {
14        console.log('all annotations deselected');
15      }
16    });
17  })

Related Links

Annotations can be selected from the UI by clicking on them and once selected there will be a dashed border drawn around them. To programmatically select/deselect annotations you can use the selectAnnotation(s) and deselectAnnotation(s) functions. The getSelectedAnnotations will tell you which annotations are currently selected. For example, the following code deselects one of the currently selected annotations:

1WebViewer(...)
2  .then(instance => {
3    const { annotationManager } = instance.Core;
4    const selectedAnnots = annotationManager.getSelectedAnnotations();
5
6    if (selectedAnnots.length > 0) {
7      const firstSelectedAnnot = selectedAnnots[0];
8      annotManager.deselectAnnotation(firstSelectedAnnot);
9    }
10  });

Related Links

There are 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.

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

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales