Question about workflow

[str]

So, I got to this project because we need an inhouse "DocuSign" alternative. Let me see if I understood the workflow right:

Signing the document is a 2 steps process, a user will be defining where the signature will be shown, and a 2nd user will be loading their signature in the document. For this, the process would be:

Step 1, define the signature placeholder:

• load the PDF via new PDFAnnotate(htmlNodeId, pathToPdfDocument...
• load a rectangle to define where the signature will be injected via pdf.enableRectangle()
• serialize the PDF via pdf.serializePdf() to get where the rectangle was placed inside the PDF
• save that serialization in the backend

Step 2, request the signature:

• load the PDF via new PDFAnnotate(htmlNodeId, pathToPdfDocument...
• load the serialized rectangle via pdf.loadFromJSON(), this will draw the rectangle in step 1, BUT it will also allow the user to modify where the rectangle is shown, right? Another way to do this would be to draw the rectangle in the PDF in the backend
• the signature image could be created via Signature Pad (see demo at http://szimek.github.io/signature_pad/) but then how do I inject the signature in the PDF? Another way to do this would be to inject the generated signature instead of the rectangle in the backend.

Am I understanding this right?

Thank you for your great work.

[RavishaHesh]

You're correct. that's the abstract functionality of the DocuSign without the "Secure" part. Security comes with the digital signature verification between two parties. However since it's a specific use case, this library doesn't support some of the features you need to implement that. For an example, rather than drawing a rectangle we can define a new element named "placeholder" which doesn't show up on the exported document(by setting opacity to 0). Also we can lock that object option when initializing for the second time to prevent resizing and movements. These are all possible but you have do little-bit of tinkering with the package.

[str]

Hi @RavishaHesh

After your reply, I had to change priorities, but I now have time to continue with this integration. I'm having issues with the pdf.enableRectangle() part. It does nothing on my end.

How do I add a new rectangle? Or should I use pdf.loadFromJSON()?

[RavishaHesh]

@str in this commit I have changed enableRectangle little bit. Instead of inserting a rectangle when clicked on the tool I've changed it to insert into the clicked position of the canvas

[str]

@RavishaHesh I see it now. BUT now, the functionality stays ON. So, if I click the PDF again, another black rectangle pops up. If I try to move or resize the rectangle, because I click the PDF again, it adds another rectangle.

[RavishaHesh]

Yes. I tried to generalize the function since the text box also uses that model. You have to click the selector tool again if you don't want to draw another rectangle.

[str]

@RavishaHesh but how do you know that the rectangle has already been placed? I have a button that says "addd signature placeholder".

$('#sign').click(function(event) {
    $('.message').html('Click on the PDF to draw a rectangle where you want the signature to be placed.');
    pdf.enableRectangle(event);
});

The user tries to draw a rectangle, to place the placeholder but instead, nothing happnes on click, but a black square is placed on mouse-release.

The user can try to resize the square, but when releasing the mouse to finish resizing the square, another square is added.

How can I define a callback to trigger after placing the first square?

[RavishaHesh]

in your use case, since you don't have to keep the rectangle tool after drawing the first one, change https://github.com/RavishaHesh/PDFJsAnnotations/blob/master/pdfannotate.js a little bit and call inst.enableSelector() after this line

[str]

@RavishaHesh I ended calling the enableSelector() onPageUpdated, as it's the call back that triggers after the rectangle is set, like this:

pdf = new PDFAnnotate('pdf-container', pdfUrl, {
    onPageUpdated(page, oldData, newData) {
        pdf.enableSelector(page);
    }
});

Thank you for your work and your patience.