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.

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

// Save Button in HTML

<button onclick="saveXFDF()">Save XFDF</button>

// JavaScript
const { annotationManager } = instance.Core;

async function saveXFDF() {
  const selected = annotationManager.getSelectedAnnotations();
  const xfdf = await annotationManager.exportAnnotations({ annotList: selected });
  // Save XFDF
}

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

const { documentViewer, annotationManager } = instance.Core;

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

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.

const { annotationManager, Annotations } = instance.Core;

// Immediately deselect any FreeText annotations that become selected
annotationManager.addEventListener('annotationSelected', (annotations, action) => {
  const freetextAnnots = annotations.filter(annot => annot instanceof Annotations.FreeTextAnnotation);
  annotationManager.deselectAnnotations(freetextAnnots);
});

Alternatively, you can use deselectAllAnnotations to deselect all selected 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.

const { annotationManager } = instance.Core;

annotationManager.addEventListener('annotationSelected', (annotations, action) => {
  if (action === 'selected') {
    // Jumps to the first annotation in the selection when a selection is performed
    annotationManager.jumpToAnnotation(annotations[0]);
  }
});

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