Dragging of the sign field and once sign added disable the dragging of signed annotations

Technical Support
1

Which product are you using?
PDF.js Express Plus

PDF.js Express Version
8.7.0

Detailed description of issue

  1. Once the sign field is added on the document programmatically I need to get the element(node) of the sign field when it is clicked so that I can attach listeners to it also once the user add signs to the document the sign should not be draggable in any way.
  2. Also referring to the attached screenshot I need to have custom delete button to delete the selected text field which has been added programmatically.

Expected behaviour

image
image1177×488 52.8 KB

Does your issue happen with every document, or just one?
Yes

Link to document
{Provide a link to the document in question if possible}

Code snippet
const flags = new WidgetFlags();
flags.set(‘Required’, true);
// create a form field
const field = new Annotations.Forms.Field(client-${Date.now()}, {
type: ‘Sig’,
flags,
});

        // create a widget annotation
        const widgetAnnot = new Annotations.SignatureWidgetAnnotation(field, {
          appearance: '_DEFAULT',
          appearances: {
            _DEFAULT: {
              Normal: {
                offset: {
                  x: 100,
                  y: 100,
                },
              },
            },
          },
        });

        // set position and size
        widgetAnnot.PageNumber = currentPageNumber;
        widgetAnnot.X = pageCoordinates.x;
        widgetAnnot.Y = pageCoordinates.y;
        widgetAnnot.Width = 50;
        widgetAnnot.Height = 20;

        // add the form field and widget annotation
        annotManager.addAnnotation(widgetAnnot);
        annotManager.drawAnnotationsFromList([widgetAnnot]);
        annotManager.getFieldManager().addField(field);
3

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here

4

Hi Anurag,

There already exists a ‘annotationAdded’ event on the SignatureCreateTool so you can listen for that event and enable read only mode when the signature is added.

For the delete button, you can simply get the selected annotations and then delete them.

const { documentViewer, annotationManager } = instance.Core;
  const signatureTool = documentViewer.getTool('AnnotationCreateSignature');

  signatureTool.addEventListener('annotationAdded', (annot) => {
    console.log('annotation added',annot);
    instance.Core.annotationManager.enableReadOnlyMode();
  });

  deleteButton.addEventListener('click', () => {
    const annots = annotationManager.getSelectedAnnotations();
    annotationManager.deleteAnnotation(annots);
  });

Best Regards,
Zach Serviss
Web Development Support Engineer
PDFTron Systems, Inc.


Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here

5

Hi Zserviss,
I understood the above code. I have following queries can you please confirm on that.

  1. How can I delete the text form field widget annotation from the document?
  2. Is there a way by which I can make annotations like form field and Signature tool draggable to a certain coordinate in document?
  3. How can I disable the selection/dragging area as present in the screenshot attached?
    image
6

Hi Anurag,

  1. You can delete the annotation by using the deleteAnnotation() API PDFTron WebViewer Class: AnnotationManager

  2. Sorry could you expand more on this?

  3. With the NoMove option you can disable movement PDFTron WebViewer Class: Annotation

Best Regards,
Zach Serviss
Web Development Support Engineer
PDFTron Systems, Inc.


Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here

7
  1. As you can see there are two signature tool so what event can I use that just like other annotations the signature tool should be movable to any position in the document.
    Addition to the first point how can I get instance of selected annotation it might be signature tool or form fields.
  2. For any form fields which are added programmatically into the PDF document can we make them movable to any position inside document are there any methods available for that? demo video here : Demo video
8

  1. This can be done by turning on form editing mode. PDFTron Systems Inc. | Documentation

  2. Same answer as above.

Best Regards,
Zach Serviss
Web Development Support Engineer
PDFTron Systems, Inc.


Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here

9
  1. I tried referring the documentation somehow enabled the edit toolbar group but not getting any tools inside that as mentioned in documentation link shared by you. If possible can you share a short snippet that would be great. Here’s the screenshot.
    image
    image1217×349 27.6 KB

Also tried to enable the toolbarGroup-Forms but I am not able to access its feature as present on this link.

10

The edit tool group is for documentation editing, not for signature fields. You can access the forms by using this snippet.

instance.UI.setToolbarGroup('toolbarGroup-Insert');

Best Regards,
Zach Serviss
Web Development Support Engineer
PDFTron Systems, Inc.


Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here