Hello,
Thank you for contacting WebViewer support.
To achieve this you can listen to the Annotation filter changed event, get the filter information and filter the annotations you want to show. Then, you will hide all the other annotations that are not included on the list you want to show.
Below is a code snippet filtering the annotations by the selected authors, and you can make it with colors and types as well.
...
const { Annotations, documentViewer, annotationManager} = instance.Core;
const UIEvents = instance.UI.Events;
instance.UI.addEventListener(UIEvents.ANNOTATION_FILTER_CHANGED, e => {
const { types, authors, colors } = e.detail;
const annotsList = annotationManager.getAnnotationsList();
// showing all annotations again because after a filter changing some of them might be hidden
annotationManager.showAnnotations(annotsList);
if (authors.length) {
const annotsToHide = annotsList.filter(annotation => !authors.includes(annotation.Author))
annotationManager.hideAnnotations(annotsToHide);
}
});
I’m adding the used APIs documentations for reference.
Hope this helps.
Best,
Dandara Navarro
Web Software Developer
PDFTron Systems, Inc.