Find an ink annotation for a signature form field

Signature form fields don’t have a value, so if you want to find the ink annotation being used as a signature for a signature form field, it might be tricky.

The following helper function will retrieve the first ink annotation found with a bounding box that overlaps the bounding box of the provided form field’s associated widget annotation:

async function getInkSignatureForField(instance, formField) {
  const pagesAnnotations = await Promise.all(
    Array.from({
      length: instance.totalPageCount
    }).map((_, pageIndex) => instance.getAnnotations(pageIndex))
  );
  let signatureBoundingBox;
  const signaturePageAnnotations = pagesAnnotations.filter(
    (pageAnnotations) => {
      const signatureWidget = pageAnnotations.find(
        (annotation) =>
          annotation.id === formField.annotationIds.first()
      );
      if (signatureWidget) {
        signatureBoundingBox = signatureWidget.boundingBox;
        return true;
      }
      return false;
    }
  );
  return (
    signaturePageAnnotations[0] &&
    signaturePageAnnotations[0].find((annotation) => {
      if (
        annotation instanceof PSPDFKit.Annotations.InkAnnotation ||
        annotation instanceof PSPDFKit.Annotations.StampAnnotation
      ) {
        if (
          annotation.boundingBox.isRectOverlapping(signatureBoundingBox)
        ) {
          return true;
        }
      }
    })
  );
}

You can use it like so:

PSPDFKit.load(defaultConfiguration).then(async (instance) => {
  const formFields = await instance.getFormFields();
  const signatureFormField = formFields.find(
    (formField) =>
      formField instanceof PSPDFKit.FormFields.SignatureFormField
  );
  const signatureInkAnnotation =
    signatureFormField &&
    (await getInkSignatureForField(instance, signatureFormField));
  console.log(signatureInkAnnotation && signatureInkAnnotation.toJS());
});

This has been tested with Nutrient Web SDK 2019.4.1.