Some test text!

Loading...
Guides
Annotation Selection

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.

// 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

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

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.

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.

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

Next steps

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

Get the answers you need: Support

Upcoming Webinar: Customer Experience and Retaining Control: Boosting Document Automation and Efficiency in Financial Services | Sept 15, 2022 at 11 am PT

PDFTron SDK

The Platform

NEW

© 2022 PDFTron Systems Inc. All rights reserved.

Privacy

Terms of Use