Caret Annotations

Caret annotations are annotations that are typically used mark text for some changes. Common use cases may include marking areas where text changes are necessary or perhaps there should be missing words/sentences to include.

The main color of Caret annotations come from the stroke color; fill color and border styles are not available.

Instantiation

JavaScript (SDK v8.0+)

WebViewer(...)
  .then(instance => {
    const { documentViewer, annotationManager, Annotations } = instance.Core;

    documentViewer.addEventListener('annotationsLoaded', () => {
      const annot = new Annotations.CaretAnnotation({
        PageNumber: 1,
        X: 100,
        Y: 50,
        Width: 25,
        Height: 25,
        StrokeColor: new Annotations.Color(0, 255, 0, 1),
      });

      annotationManager.addAnnotation(annot);
      annotationManager.redrawAnnotation(annot);
    });
  });

DocumentViewer#annotationsLoaded CaretAnnotation Color AnnotationManager.addAnnotation AnnotationManager.redrawAnnotation

JavaScript (SDK v6.0+)

WebViewer(...)
  .then(instance => {
    const { docViewer, annotManager, Annotations } = instance;

    docViewer.on('annotationsLoaded', () => {
      const annot = new Annotations.CaretAnnotation();
      annot.PageNumber = 1;
      annot.X = 100;
      annot.Y = 50;
      annot.Width = 25;
      annot.Height = 25;
      annot.StrokeColor = new Annotations.Color(0, 255, 0, 1);

      annotManager.addAnnotation(annot);
      annotManager.redrawAnnotation(annot);
    });
  });

DocumentViewer#annotationsLoaded CaretAnnotation Color AnnotationManager.addAnnotation AnnotationManager.redrawAnnotation

XFDF

Element name: caret

Shell

<caret page="0" rect="287.920,624.370,312.920,649.370" color="#FF0000" flags="print" name="a6b9dd15-d18a-8e66-631a-3c95d2a258f7" subject="Caret" date="D:20220706161114-07'00'" creationdate="D:20220706161110-07'00'"/>

Required properties

PageNumber

Gets or sets the page number of a document that the annotation appears on.

X

Gets or sets the annotation's x-axis position.

Y

Gets or sets the annotation's y-axis position.

Height

Gets or sets the height of the annotation.

Width

Gets or sets the width of the annotation.

Notable properties

For the full list of properties, please visit the annotation's API docs.

StrokeColor

Gets or sets the color of the annotation's stroke.

Author

The author of the annotation.

Color

Gets or sets the annotation's stroke color.

Hidden

Gets or sets whether the annotation is hidden.

Invisible

Gets or sets whether the annotation is invisible, only if it is an unknown annotation type. Generally for hiding annotations you should use "Hidden".

IsClickableOutsideRect

Gets or sets whether any parts of the annotation drawn outside of the rect are clickable.

Listable

Gets or sets whether the annotation should be listed in annotation lists. If set to false, the annotation will also become unselectable.

Locked

Gets or sets whether the annotation is locked or not. If it's locked it can't be edited or deleted, but the note can be edited.

LockedContents

Gets or sets whether the annotation contents are locked or not. If the contents are locked then note can't be edited but the annotation can be edited or deleted.

NoDelete

Gets or sets if this annotation can be deleted.

NoMove

Gets or sets whether or not the annotation can be moved.

NoResize

Gets or sets if this annotation can be resized by the user.

NoRotate

Gets or sets if this annotation can be rotated.

NoView

Gets or sets whether the annotation is visible on the screen. Differs from Hidden in that it can still be printed if the print flag is set.

NoZoom

Gets or sets if this annotation scales with the page.

Opacity

Gets or sets the opacity of the annotation.

Printable

Gets or sets whether the annotation should be displayed when printing the page.

ReadOnly

Gets or sets whether the annotation is readonly or not. If it's readonly both the annotation itself and its note can't be edited or deleted.

ToggleNoView

Gets or sets whether the ToggleNoView flag is set on the annotation.

Useful methods

setRect

Although caret annotations have both move and resize APIs, it also provides a setRect API which effectively does both which makes it worthy to note.

JavaScript (SDK v8.0+)

WebViewer(...)
  .then(instance => {
    const { annotationManager, Annotations } = instance.Core;

    annotationManager.addEventListener('annotationChanged', (annotations, action) => {
      if (action === 'add') {
        annotations.forEach(annot => {
          if (annot instanceof Annotations.CaretAnnotation) {
            const rect = annot.getRect();
            rect.X = Math.round(rect.X);
            rect.Y = Math.round(rect.Y);
            rect.Width = Math.round(rect.Width);
            rect.Height = Math.round(rect.Height);

            annot.setRect(rect);
          }
        });
      }
    });
  });

AnnotationManager#annotationChanged CaretAnnotation.getRect CaretAnnotation.setRect

JavaScript (SDK v6.0+)

WebViewer(...)
  .then(instance => {
    const { annotManager, Annotations } = instance.Core;

    annotManager.on('annotationChanged', (annotations, action) => {
      if (action === 'add') {
        annotations.forEach(annot => {
          if (annot instanceof Annotations.CaretAnnotation) {
            const rect = annot.getRect();
            rect.X = Math.round(rect.X);
            rect.Y = Math.round(rect.Y);
            rect.Width = Math.round(rect.Width);
            rect.Height = Math.round(rect.Height);

            annot.setRect(rect);
          }
        });
      }
    });
  });

AnnotationManager#annotationChanged CaretAnnotation.getRect CaretAnnotation.setRect