Aligning annotations with Annotation Manager

Starting in WebViewer version 10.10, you can now align your annotations through a set of APIs. The AnnotationManager enables the alignment of annotations within the loaded document, taking into consideration the computed rotation of the current view. For instance, if the page is rotated by 90 degrees and the alignment of annotations is set to Left, the alignment will adjust based on what is considered Left with respect to the orientation of the page.

Alignment functions are based on the encompassing bounding box of the annotations passed into the respective Alignment API. After an Alignment API has been called, the annotation positions will be updated with respect to that bounding box.

Alignment can be performed through the UI by selecting 2 or more Annotations. When the Annotation context menu appears, click the Align option. Then, from the Align options, select your desired Alignment.

The available options for standard alignments are Left, Right, Top, and Bottom. Alignments can be provided as a String, but the preferred approach is to utilize the Enum, Core.annotationManager.Alignment.StandardAlignmentTypes.

const { annotationManager } = instance.Core;

const { LEFT, RIGHT, TOP, BOTTOM } = instance.Core.annotationManager.Alignment.StandardAlignmentTypes;
// Select all of the Annotations on the page
const selectedAnnotations = annotationManager.getSelectedAnnotations();

if (selectedAnnotations) {
  // Align Annotations to the left
  annotationManager.Alignment.alignAnnotations(selectedAnnotations, LEFT);
}

The available options for center alignments are Center, Center Vertical, and Center Horizontal. Alignments can be provided as a String, but the preferred approach is to utilize the Enum, Core.annotationManager.Alignment.CenterAlignmentTypes.

const { annotationManager } = instance.Core;

const { CENTER_VERTICAL, CENTER_HORIZONTAL, CENTER } = instance.Core.annotationManager.Alignment.CenterAlignmentTypes;
// Select all of the Annotations on the page
const selectedAnnotations = annotationManager.getSelectedAnnotations();

if (selectedAnnotations) {
  // Center Annotations Vertically
  annotationManager.Alignment.centerAnnotations(selectedAnnotations, CENTER_VERTICAL);
}

Distributions work by utilizing the allotted space of the bounding box from the selected annotations, ensuring even spacing between each annotation. This results in the axis of the bounding box being completely utilized. The available options for distribute alignments are Horizontal and Vertical. Alignments can be provided as a String, but the preferred approach is to utilize the Enum, Core.annotationManager.Alignment.DistributeAlignmentTypes.

const { annotationManager } = instance.Core;

const { DISTRIBUTE_VERTICAL, DISTRIBUTE_HORIZONTAL } = instance.Core.annotationManager.Alignment.DistributeAlignmentTypes;
// Select all of the Annotations on the page
const selectedAnnotations = annotationManager.getSelectedAnnotations();

if (selectedAnnotations) {
  // Distribute annotations vertically
  annotationManager.Alignment.distributeAnnotations(selectedAnnotations, DISTRIBUTE_VERTICAL);
}

Most types of annotations can be aligned, except those in the Core.Annotations.TextMarkupAnnotation family. These annotations are tied directly to the text characters they are associated with. Therefore, if a set of annotations includes any from the TextMarkupAnnotation category, these specific annotations will be filtered out prior to the alignment process. The remaining annotations will still undergo alignment and be adjusted accordingly.

• Highlight
• Underline
• Strikeout
• Squiggly

Another exception to alignment involves annotations with the NoMove property set to True. These annotations are explicitly configured to restrict movement. Therefore, if an alignment function is invoked with an annotation that has NoMove set to True, this Annotation will be omitted from the alignment calculation.