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.

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

Element name: caret

<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'"/>

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

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.

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