Customizing Annotation Variant Buttons in the Toolbar

PSPDFKit for Web includes variant buttons among its default set of tools. These buttons switch the interaction mode to one of the standard annotation modes, but they also set an annotation preset that makes it easier to create annotations with some common properties. For example:

• ink-highlighter — This variant button sets the interaction mode to PSPDFKit.InteractionMode.INK. This increases thickness, sets the blend mode to multiply, and changes the color to yellow, making the annotation suitable for manually highlighting document content while drawing.

• arrow — This sets the PSPDFKit.InteractionMode.SHAPE_LINE interaction mode and arrow annotation preset, which defaults to drawing lines with an arrow.

You can modify annotation type variants by setting a different custom preset. In this example, you’ll modify the preset for the arrow variant so that it uses a thicker stroke and a different title:

instance.setAnnotationPresets((presets) => {
  presets.thick = {
    ...presets.arrow,
    strokeWidth: 15
  };
  return presets;
});
instance.setToolbarItems((items) => {
  return items.map((i) => {
    if (i.type === "arrow") {
      return {
        ...i,
        preset: "thick",
        title: "My custom arrow"
      };
    }
    return i;
  });
});