As a user, I should only be able to place a signature within the designated signature field, preventing it from being added elsewhere in the PDF

Technical Support WebViewer
, , ,
1

WebViewer Version: 10.4

We are using Apryse WebViewer in our ReactJS application to develop a signing feature. We have created a placeholder for signatures, where users are required to sign. Currently, users can sign the document by clicking on the placeholder, but we want to restrict them from drawing their signature outside the designated area. Users should only be able to sign within the specified placeholder and not anywhere else on the PDF.

2

Hello Ajay,

To get a better picture of the issue, could you provide a video of a user adding a placeholder in the designated and non-designated areas?

Best Regards,
Darian

3

Hello Darian,

Thank you for your response. I’ve created a video demonstrating the issue. In the video, you can see that a signature field has been added to the PDF, and I’m inserting a signature within it. However, I’m also able to place signatures outside the designated signature field.

Best regards,
Ajay

4

Hello Ajay,

Thank you for the video.

Could you try using this code that overrides the mouseLeftUp function of the signature tool?

  const originalMouseLeftUp = Tools.SignatureCreateTool.prototype.mouseLeftUp;

  Tools.SignatureCreateTool.prototype.mouseLeftDown = function(e, widget) {
    const annot = annotationManager.getAnnotationByMouseEvent(e);

    if (annot instanceof Annotations.SignatureWidgetAnnotation) {
      originalMouseLeftUp.call(this, e)
    } 
  }
5

Hi Darian,

Thank you for sharing the code. I tried implementing it, but unfortunately, it didn’t work as expected.

However, I found that overriding the mouseLeftUp method directly like this:

Tools.SignatureCreateTool.prototype.mouseLeftUp = function (e) { 
  // custom logic 
};

did the trick and resolved the issue.

The final code is here:

const originalMouseLeftUp = Tools.SignatureCreateTool.prototype.mouseLeftUp

Tools.SignatureCreateTool.prototype.mouseLeftUp = function (e) {
    const annot = annotationManager.getAnnotationByMouseEvent(e)

    if (annot instanceof Annotations.SignatureWidgetAnnotation) {
       originalMouseLeftUp.call(this, e)
    }
}

Please let me know if you’d like me to provide further details.

Best regards,
Ajay

6

Hi Darian,

I’ve encountered a new issue. In the video, I’ve demonstrated that users are now restricted from inserting their signature outside the designated area in the PDF, which is good. However, they are still able to place their signature twice in the signature field, as shown in the video, and it’s also being placed in a disabled field.

Could you please suggest a solution for this?

7

You can expand the if condition to only place if there isn’t already an annotation and if the widget is not set to read only.

      const originalMouseLeftUp = Tools.SignatureCreateTool.prototype.mouseLeftUp

      Tools.SignatureCreateTool.prototype.mouseLeftUp = function (e) {
        const annot = annotationManager.getAnnotationByMouseEvent(e)

        if (annot instanceof Annotations.SignatureWidgetAnnotation && !annot.getAssociatedSignatureAnnotation() && !annot.ReadOnly) {
          originalMouseLeftUp.call(this, e)
        }
      }
8

Hi Darian,

Thank you for your response! I tested it, and it works—I’m no longer able to drop a signature on a disabled field. However, there’s still one issue that remains unresolved, which I’ve described below:

  1. When I drop the signature into an enabled field, it doesn’t work as expected. I’ve attached a video for more details.
9

Hello Ajay,

If I understand correctly, are you trying to get the signature annotation to resize the same way it does when clicking on the dropdown to sign?

Please try using this code which calls the sign API. It will automatically rotate and resize to fit the widget.

      const originalMouseLeftUp = Tools.SignatureCreateTool.prototype.mouseLeftUp;
      
      Tools.SignatureCreateTool.prototype.mouseLeftUp = function (e) {
        const widget = annotationManager.getAnnotationByMouseEvent(e);
        const signature = signatureTool.getFullSignatureAnnotation();
      
        if (widget instanceof Annotations.SignatureWidgetAnnotation && !widget.getAssociatedSignatureAnnotation() && !widget.ReadOnly) {
          signature ? widget.sign(signature) : originalMouseLeftUp.call(this, e);
        }
      };