Signature modal returns a signature out of it's place / bigger than the space it has / spread upon the entire page

WebViewer Version: migration from - 7.3 to 8.7

Do you have an issue with a specific file(s)?

Can you reproduce using one of our samples or online demos? no

Are you using the WebViewer server? no

Does the issue only happen on certain browsers? chrome

Is your issue related to a front-end framework? we’re using angular 14, but this issue looks like it’s related to your code

Is your issue related to annotations? signature modal + signature annotation

Please give a brief summary of your issue:
After a user is singing a document the signature modal (on a pre-defined template) - the signature is out of place + sometimes takes over the entire page

Please describe your issue and provide steps to reproduce it:
we are using this code to get the signature after the modal closes:
onAnnotationEvent(
‘annotationChanged’(…) => {

…some mapping logic - finding if there is a new signature

if (action === ‘add’ && newSignatures.length) {
here we’re getting the parent annotation, a logic that worked in v7 and stopped working in v8 because of this issue, once we moved from .annot to getAssociatedSignatureAnnotation() - we saw that whenever this issue is happening we couldn’t get the AssociatedSignatureAnnotation at all (returned null) and this looks like the heart of this issue from your end,
I found that even setting it manually and connecting the elements didn’t help here…
}
})

the issue looks like this :


or like a bigger signature + out of place when drawing
this is a recording of the issue of the signature getting bigger - the correct behavior is that the signature should be smaller and inside the sign rectangle :

Do you have any assumptions what can cause this? any direction will be extremely helpful!

Hi Mazi,

Thank you for contacting WebViewer forum support,

Did this issue happen directly as a result of the upgrade from 7.x to 8.x?
Is so, you will have to update namespace adjustments and some reference may no longer be supported:

Can you also provide a sample code of how you are creating the signature field and how you are capturing the newly created signatures? (also how you are calling the ‘getAssociatedSignatureAnnotation’)

It would be even better if you can provide a minimal sample runnable project that show your issue.

On a side note, minified references to the object are not reliable. i.e. in your first screenshot ba.g0 is not a function error, you will need to use the correct Object references that you can find in the our API documentation (PDFTron WebViewer Index).

Thank you in advance.

Best Regards,
Kevin Kim

Hi Kim, thanks for the response,
One important note - for free hand annotations (the video), this issue is happening occasionally, for types signatures it’s consistant (the types signature that takes over the page)

yes - I’ve finished upgrading by the migration docs + I’ve looked at all of the changes log for the 8.0+ versions and made necessary changes by them as well.

so here inside the annotation changed event
if (action === ‘add’ && newSignatures.length) {
…for each signature…
const parentAnnotation = this.store
.getElementsByType(ANNOTATIONS_SIGNATURE)
.map((element) => element.annotation)
.find((annotation) => annotation. getAssociatedSignatureAnnotation() === sigAnnotation);

// here I’ve made sure the element reference is kept - our store contains the correct elements, this code used to work in v7 (with ‘annot’ instead of getAssociatedSignatureAnnotation that is a change for v8, with annot now it doesn’t work either)

this is the code that puts the signature in the pdf after the modal closed - the first one is for the free hand tool - the enlarged and out of place signature - both of them used to work perfectly

 // save vector signature drawing XML
                  if (sigAnnotation instanceof api.freeHandAnnotation) {
                    api
                      .exportAnnotations({
                        annotList: [sigAnnotation as any],
                      })
                      .then((xfdf) => {
                        parentElement.signatureXML = xfdf;
                      });
                  }

— this code is for typing the signature and this is what takes over the entire page

                  // for typed signatures need to extract base64 image data
                  parentAnnotation.signatureImage = [
                    sigAnnotation.canvas?.toDataURL(),
                    api.signatureTool.annot?.canvas?.toDataURL(),
                  ].find((v) => v && isString(v));
                  if (
                    !parentAnnotation.signatureImage &&
                    isFunction(sigAnnotation.getImageData)
                  ) {
                    sigAnnotation.getImageData().then((imageData) => {
                      parentAnnotation.signatureImage = imageData;
                    });
                  }

Hi Mazi,

I just tested on 8.7 and the getAssociatedSignatureAnnotation works as expected.
If you create a signature annotation and the widget, are you able to access it using the annotationManager using the iframe?

Best Regards,
Kevin Kim