How to select a stamp annotation when any part of the bounding box is clicked

Product: PDFTron Webviewer

Product Version: 8.0.1

With stamp annotations rendering an image, users are only able to select the annotation by clicking on the part of the image with content in it. This is particularly annoying when dealing with images like signatures, which are 90% transparent and 10% content. You can see this behavior in the gif attached.

Is there some way to make it so that an annotation is selected if any part of its bounding box is clicked, rather than only the parts with content?


Hi Martin,

You can override the selection model of desired types of annotations by calling the setCustomHandlers API:

const { Annotations, annotationManager } = instance.Core
const { BoxSelectionModel, SelectionModel } = Annotations;
SelectionModel.setCustomHandlers(BoxSelectionModel, {
  testSelection(annotation, x, y, pageMatrix, zoom, rotation, { selectionModel, originalTestSelection }) {
    // let's use freehand annotations here as an example
    if (!(annotation instanceof Annotations.FreeHandAnnotation)) {
      return originalTestSelection(annotation, x, y, pageMatrix, zoom, rotation);;
    // we can use the boundingRectTest(..) here for free hand annotation's selection test
    return Annotations.SelectionAlgorithm.boundingRectTest(annotation, x, y, zoom);

On the other hand, keep in mind that users can also select annotation(s) by drag-moving mouse left button (though you may need to press ESC first to get out from drawing mode), so that multi-selection tool would be triggered.

@ychen Thanks for the quick reply and the code example!

I see that setCustomHandlers was introduced in version 8.3.0, and we’re on 8.0.1.

I’ll assume that there’s no way to do this prior to 8.3.0 and that we need to upgrade to take advantage of a custom selection model. Please let me know if otherwise.

Thanks again!

Hi Martin,

Sorry for missing the version info.

Upgrading to a higher version is always recommended, though for your use case at the moment you can also “borrow” the selection model from other types of annotations:

const { Annotations } = instance.Core
Annotations.FreeHandAnnotation.prototype.selectionModel = Annotations.FreeTextSelectionModel