How to default to using a Cloudy Border

Question: How can I configure my rectangles and ellipes to default to a cloudy border?

Answer:

Generally, there’s no applicable value range for a cloudy border intensity (no upper limit) as it would vary with the stroke width and the size of the annotation.

Depending on your use case, it may be enough to stick to a presumably safe value between 0 and 5 for example or even safer between 0 and 3. For reference the default value used in the annotation toolbar is 2.

You could set it in the annotation presets like this:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const annotationPresets = PSPDFKit.defaultAnnotationPresets;
annotationPresets.rectangle = {
  cloudyBorderIntensity: 4
};
return PSPDFKit.load({ ...defaultConfiguration, annotationPresets }).then(
  instance => {
    console.log("PSPDFKit for Web successfully loaded!!", instance);

    instance.addEventListener("annotations.create", annotations => {
      annotations.forEach(annotation => {
        if (
          annotation instanceof PSPDFKit.Annotations.RectangleAnnotation &&
          annotation.cloudyBorderIntensity
        ) {
          // 4.5 is the cloudy border intensity unit, in page points
          instance.updateAnnotation(
            annotation.set(
              "cloudyBorderInsetRect",
              annotation.boundingBox.grow(
                -annotation.cloudyBorderIntensity * 4.5
              )
            )
          );
        }
      });
    });
    return instance;
  }
);

Note that you’d need to update the default cloudyBorderInsetRect on create.

Question 2:

Is it mandatory to update the inset rectangle as you show them? For example, if you want to do is preselect the cloudy border when a user selects the rectangle tool - the programmatic equivilent of the user picking the cloudy border option from the dropdown after selecting the rectangle tool. Is there a way to do just that?

Answer:

Yes! Then you just need to use the default cloudy border intensity for the UI, which is 2, and the rest of the code gets much simpler:

Copy
1
2
3
4
5
6
7
const annotationPresets = PSPDFKit.defaultAnnotationPresets;
annotationPresets.rectangle = {
  cloudyBorderIntensity: 2
};
PSPDFKit.load({ ...defaultConfiguration, annotationPresets }).then(
  instance => instance
);

And please don’t hesitate to reach out to support if you have any other questions.