Introduction to the AnnotationManager

By now, you should have setup WebViewer and read all about the DocumentViewer, but a very common use case is interacting with annotations.

The main way to access and work with annotations is through the AnnotationManager. Like with the DocumentViewer when using the WebViewer UI, this is also available through the Core namespace and is one of the main objects you will likely interact with.

Fetching a list of annotations in the document can be done via the AnnotationManager. This is done through the getAnnotationsList API. This list is the complete list so it will include link annotations and widgets (form controls).

1const { annotationManager, Annotations } = instance.Core;
2
3annotationManager.getAnnotationsList().forEach(annot => {
4  if (annot instanceof Annotations.RectangleAnnotation) {
5      // Do something with annotation
6  }
7});

1const { annotManager, Annotations } = instance;
2
3annotManager.getAnnotationsList().forEach(annot => {
4  if (annot instanceof Annotations.RectangleAnnotation) {
5      // Do something with annotation
6  }
7});

If you know the ID of your annotation, you can use getAnnotationById to get it.

1const { annotationManager } = instance.Core;
2
3const annot = annotationManager.getAnnotationById('fb049fb2-ec3e-4e7b-8e1a-243096e1924e');

1const { annotManager, Annotations } = instance;
2
3const annot = annotManager.getAnnotationById('fb049fb2-ec3e-4e7b-8e1a-243096e1924e');

If you are working with user interactions and would like to get the annotations under the cursor at some point, the AnnotationManager provides two methods that will help depending on what you want to do:

• getAnnotationByMouseEvent
• getAnnotationsByMouseEvent

1const { documentViewer, annotationManager } = instance.Core;
2
3documentViewer.addEventListener('mouseLeftUp', (e) => {
4  const annotations = annotationManager.getAnnotationsByMouseEvent(e);
5  annotationManager.selectAnnotations(annotations);
6});

1const { docViewer, annotManager } = instance;
2
3docViewer.addEventListener('mouseLeftUp', (e) => {
4  const annotations = annotManager.getAnnotationsByMouseEvent(e);
5  annotManager.selectAnnotations(annotations);
6});

Adding new annotations is also done through the AnnotationManager with the addAnnotation or addAnnotations API. Be sure to check out how to create annotations in our other guide.

1const { annotationManager, Annotations } = instance.Core;
2
3// Create an annotation using an object initializer
4const rect = new Annotations.RectangleAnnotation({
5  X: 50,
6  Y: 50,
7  Width: 150,
8  Height: 50,
9  StrokeColor: new Annotations.Color(255, 0, 0, 1),
10});
11
12annotationManager.addAnnotation(rect);
13// Always redraw annotation if rendering was updated
14annotationManager.redrawAnnotation(rect);

1const { annotationManager, Annotations } = instance.Core;
2
3// Create an annotation using an object initializer
4const rect = new Annotations.RectangleAnnotation();
5rect.X = 50;
6rect.Y = 50;
7rect.Width = 150;
8rect.Height = 50;
9rect.StrokeColor = new Annotations.Color(255, 0, 0, 1);
10
11annotationManager.addAnnotation(rect);
12// Always redraw annotation if rendering was updated
13annotationManager.redrawAnnotation(rect);

Like with adding annotations, the AnnotationManager provides the deleteAnnotation and deleteAnnotations APIs to delete annotations. You must have a reference to the annotation to use these methods.

1const { annotationManager } = instance.Core;
2
3const annot = annotationManager.getAnnotationById('fb049fb2-ec3e-4e7b-8e1a-243096e1924e');
4annotationManager.deleteAnnotation(annot);

1const { annotManager, Annotations } = instance;
2
3const annot = annotManager.getAnnotationById('fb049fb2-ec3e-4e7b-8e1a-243096e1924e');
4annotManager.deleteAnnotation(annot);

Now that you know how to add annotations, learn how to create them!