How to Default to Using a Cloudy Border

To configure rectangles and ellipses to default to a cloudy border, set the corresponding annotation preset to have a cloudyBorderIntensity value greater than 0.

Generally, there’s no applicable value range for a cloudy border intensity, i.e. no upper limit, as having an upper limit 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, or an even value 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:

const annotationPresets = PSPDFKit.defaultAnnotationPresets;
annotationPresets.rectangle = {
  ...annotationPresets.rectangle,
  cloudyBorderIntensity: 4
};
return PSPDFKit.load({
  ...defaultConfiguration,
  annotationPresets
}).then((instance) => {
  console.log("PSPDFKit for Web successfully loaded!!", instance);

  return instance;
});

You may wonder if it’s mandatory to update the inset rectangle as you show it. For example, you may want to preselect the cloudy border when a user selects the rectangle tool — which is the programmatic equivalent of the user picking the cloudy border option from the dropdown after selecting the rectangle tool. To do this, use the default cloudy border intensity, which defaults to 2 in the annotation toolbar:

const annotationPresets = PSPDFKit.defaultAnnotationPresets;
annotationPresets.rectangle = {
  cloudyBorderIntensity: 2
};
PSPDFKit.load({ ...defaultConfiguration, annotationPresets }).then(
  (instance) => instance
);