Section:

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.

Reading annotations

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

Related Links

Getting annotations by ID

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

Related Links

Getting annotations under cursor

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:

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

Related Links

Adding annotations

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

Related Links

When adding annotations or changing their properties directly, always call redrawAnnotation to rerender the annotation.

Apryse Docs Image

Removing annotations

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

Related Links

Next steps

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

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales