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.

JavaScript (SDK v8.0+)

// 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({ annotationList: selected });
  // Save XFDF
}

AnnotationManager.getSelectedAnnotations

JavaScript (SDK v6.0+)

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

// JavaScript
const { annotManager } = instance;

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

AnnotationManager.getSelectedAnnotations

Selecting annotations

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

JavaScript (SDK v8.0+)

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);
});

AnnotationManager.selectAnnotation AnnotationManager.selectAnnotations

JavaScript (SDK v6.0+)

const { docViewer, annotManager } = instance;

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

AnnotationManager.selectAnnotation AnnotationManager.selectAnnotations

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.

JavaScript (SDK v8.0+)

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);
});

AnnotationManager.deselectAnnotation AnnotationManager.deselectAnnotations

JavaScript (SDK v6.0+)

const { annotManager, Annotations } = instance;

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

AnnotationManager.deselectAnnotation AnnotationManager.deselectAnnotations

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.

JavaScript (SDK v8.0+)

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]);
  }
});

AnnotationManager.jumpToAnnotation

JavaScript (SDK v6.0+)

const { annotManager } = instance;

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

AnnotationManager.jumpToAnnotation

Next steps

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