Section:

Working with annotation selection using the AnnotationManager

Annotation selection is intuitively understood as selecting and/or clicking on a visible annotation in the viewer. The AnnotationManager allows you to get the selected annotations at any point in time. This could be helpful in serializing only selected annotations after pressing a button.

The AnnotationManager can also be used to select and deselect annotations. This may be helpful to batch select annotations and bring them into attention in the viewer for a review process.

When annotations are selected or deselected, whether through the viewer or programmatically, this will trigger the annotationsSelected event on the AnnotationManager.

Getting selected annotations

Aside from the annotationSelected event, the AnnotationManager provides the getSelectedAnnotations API that can be called on demand instead of hooking into an event.

1// Save Button in HTML
2
3<button onclick="saveXFDF()">Save XFDF</button>
4
5// JavaScript
6const { annotationManager } = instance.Core;
7
8async function saveXFDF() {
9  const selected = annotationManager.getSelectedAnnotations();
10  const xfdf = await annotationManager.exportAnnotations({ annotationList: selected });
11  // Save XFDF
12}

Related Links

Selecting annotations

Selecting annotations through the AnnotationManager is done using either the selectAnnotation or selectAnnotations APIs.

1const { documentViewer, annotationManager } = instance.Core;
2
3// Select all the annotations on the first page when annotations first load
4documentViewer.addEventListener('annotationsLoaded', () => {
5  const annots = annotationManager.getAnnotationsList().filter(annot => annot.PageNumber === 1);
6  annotationManager.selectAnnotations(annots);
7});

Related Links

Deselecting annotations

Deselecting annotations can be done in a similar way using the deselectAnnotation and deselectAnnotations APIs. This could be potentially used to deselect certain annotations after selecting a group of annotations.

1const { annotationManager, Annotations } = instance.Core;
2
3// Immediately deselect any FreeText annotations that become selected
4annotationManager.addEventListener('annotationSelected', (annotations, action) => {
5  const freetextAnnots = annotations.filter(annot => annot instanceof Annotations.FreeTextAnnotation);
6  annotationManager.deselectAnnotations(freetextAnnots);
7});

Related Links

Alternatively, you can use deselectAllAnnotations to deselect all selected annotations.

Jumping to annotations

When selecting an annotation via the notes panel, you will notice that the viewer will jump to the selected annotation. This can be triggered with the jumpToAnnotation API on the AnnotationManager. You can then use this API to focus on certain selected annotations or simply jumping to an annotation after creation.

1const { annotationManager } = instance.Core;
2
3annotationManager.addEventListener('annotationSelected', (annotations, action) => {
4  if (action === 'selected') {
5    // Jumps to the first annotation in the selection when a selection is performed
6    annotationManager.jumpToAnnotation(annotations[0]);
7  }
8});

Related Links

Next steps

You can customize how selection models look and work on annotations. See how you can customize it in our custom annotation guide.

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales