Section:

Squiggly Annotations

Squiggly annotations are annotations that underline text with a squiggly line.

Text squiggly annotations use the stroke color as the underline color. Setting a fill color will have no visual impact on the annotation by default.

Apryse Docs Image

Instantiation

1WebViewer(...)
2  .then(instance => {
3    const { documentViewer, annotationManager, Annotations } = instance.Core;
4
5    let debounce = null;
6
7    // Automatically create squiggly annotations on text selection
8    documentViewer.addEventListener('textSelected', (quads, text, pageNumber) => {
9      // Add some debouncing to prevent constant triggering during selection
10      if (debounce) {
11        clearTimeout(debounce);
12      }
13      debounce = setTimeout(() => {
14        // Create annotation with object initializer
15        const annot = new Annotations.TextSquigglyAnnotation({
16          PageNumber: pageNumber,
17          Quads: quads,
18          StrokeColor: new Annotations.Color(0, 0, 255, 1),
19          StrokeThickness: 3,
20        });
21
22        annotationManager.addAnnotation(annot);
23        annotationManager.redrawAnnotation(annot);
24
25        debounce = null;
26      }, 1000);
27    });
28  });

Related Links

XFDF

Element name: squiggly

sh

1<squiggly page="1" rect="36,677.030,265.128,704.526" color="#E44234" flags="print" name="11f57a35-4a8d-f438-ca0f-f0bd7ce76568" title="Guest" subject="Squiggly" date="D:20220519172415-07'00'" width="1.094890510948905" creationdate="D:20220519172150-07'00'" coords="36,704.526105859375,265.12800000000016,704.526105859375,36,693.02635,265.12800000000016,693.02635,36,688.530105859375,96.60000000000001,688.530105859375,36,677.03035,96.60000000000001,677.03035">
2  <trn-custom-data bytes="{"trn-annot-preview":"You plan to embed PDF functionality into an\napplication."}"/>
3</squiggly>

Required properties

PageNumber

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

Quads

Gets of sets the text quads of the annotation. Since text annotations can span multiple lines of text, the lines of text are represented with an array of quads.

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.

StrokeThickness

Gets or sets the width of the annotation's stroke outline.

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.

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.

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

getQuads

Although it is possible to get the quads using the Quads property, there is also a getQuads method on the annotation to get its quads.

sh

1console.log(squiggly.getQuads());
2[
3   { // First quad of the first line
4      "x1":58.24,
5      "y1":98.97,
6      "x2":265.13,
7      "y2":98.97,
8      "x3":265.13,
9      "y3":87.47,
10      "x4":58.25,
11      "y4":87.47
12   },
13   ... // Second quad of the second line and so on
14]

setQuads

Using the setQuads API can be used to set the quads for the annotation as well.

1WebViewer(...)
2  .then(instance => {
3    const { annotationManager, Annotations } = instance.Core;
4
5    annotationManager.addEventListener('annotationChanged', (annotations, action) => {
6      if (annotations.length > 0 && action === 'add') {
7        annotations.forEach(annot => {
8          if (annot instanceof Annotations.TextSquigglyAnnotation) {
9            const quads = annot.getQuads();
10            quads.forEach(quad => {
11              quad.x1 = Math.round(quad.x1 * 100) / 100;
12              quad.y1 = Math.round(quad.y1 * 100) / 100;
13            });
14            annot.setQuads(quads);
15          }
16        });
17      }
18    });
19  });

Related Links

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales