Focus and Background of a SignatureWidgetAnnotation

[n.alcina]

Product: WebViewer & Angular

Product Version: 8.3.1

Please give a brief summary of your issue:
Two points :

1. Cannot focus a SignatureWidgetAnnotation or TextWidgetAnnotation
2. Cannot set a background to a SignatureWidgetAnnotation

Please describe your issue and provide steps to reproduce it:

1. Cannot focus a SignatureWidgetAnnotation or TextWidgetAnnotation

base on this sample : PDFTron Systems Inc. | Documentation
I try different ways :

• annotationManager.addAnnotation(widgetAnnot, { autoFocus: true });
• annotationManager.selectAnnotations([widgetAnnot]);
• annotationManager.selectAnnotation(widgetAnnot);
• this.wvInstance.UI.focusNote(widgetAnnot.Id);

nothing works, How can I focus my field after creation (by code)

2. Cannot set a background to a SignatureWidgetAnnotation
   I can set a background color to TextWidgetAnnotation :
   using :
   widgetAnnot.backgroundColor.A = 1;
   widgetAnnot.backgroundColor.B = 226;
   widgetAnnot.backgroundColor.G = 226;
   widgetAnnot.backgroundColor.R = 226;

When I do the same code with SignatureWidgetAnnotation, the background stay transparent (after apply fields, blue if fields editor mode).
How can I chose my background color ?

Please provide a link to a minimal sample where the issue is reproducible:
none

Regards
Nicolas

[system]

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

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

Guides:

• API for digital signatures on Cross-Platform (Core)
• Code samples to add annotations to PDFs on Cross-Platform (Core)
• Code samples for extracting & parsing PDFs on Cross-Platform (Core)
• Code samples to redact PDFs on Cross-Platform (Core)

APIs:

• Class RefreshOptions - SetDrawBackgroundOnly(Boolean)
• Class Annot
• Class Popup - SetParent(Annot)

Forums:

• Signature - Failed download while signing
• Annotations not properly exported
• How to add signature certificate appearance with custom co ordinates

[Ahmad]

Hi Nicolas,

You can create a custom widget sign here element using this API. In this you can set the CSS color properties to whatever works for you.

Unfortunately, there is no way to click the SignatureWidget programmatically. What are you hoping to do by this? perhaps I can suggest an alternative.

Best Regards,
Ahmad Moaaz
Software Developer
PDFTron Systems, Inc.
www.pdftron.com

[n.alcina]

Hello Ron,
I created the annotation (sig/tx) by code
I would like to select it just after
In the goal that user can drag&drop easily (click by mouse is not very intuitive for user, they usually draw a new annotation trying to select ours)
Regards

[Ahmad]

Hi Nicolas,

Here is some code to sign a specific SignatureWidget

 const { UI, Core } = instance;
  const { PDFNet, documentViewer, annotationManager, Annotations } = Core;

  const signWidget = () => {
    // Signs the first SignatureWidget that is found
    const signatureWidget = annotationManager.getAnnotationsList()
      .find(annotation => annotation instanceof Annotations.SignatureWidgetAnnotation);

    const signatureTool = documentViewer.getTool('AnnotationCreateSignature')
    signatureTool.addEventListener('signatureReady', (annotation) => {
      let signatureWidgetRect = signatureWidget.getRect();
      // Get min scale to fit the signature widget
      const hScale = signatureWidgetRect.getHeight() / annotation['Height'];
      const wScale = signatureWidgetRect.getWidth() / annotation['Width'];
      const scale = Math.min(hScale, wScale);
      const resizeRect = new Core.Math.Rect(
        signatureWidgetRect['x1'],
        signatureWidgetRect['y1'],
        signatureWidgetRect['x1'] + annotation['Width'] * scale,
        signatureWidgetRect['y1'] + annotation['Height'] * scale,
      );

      annotation.resize(resizeRect);
      signatureWidget.setAssociatedSignatureAnnotation(annotation)
    });

    signatureTool.location = {
      x: signatureWidget.getX(),
      y: signatureWidget.getY(),
      pageNumber: signatureWidget.PageNumber
    }

    signatureTool.trigger(
      'locationSelected',
      {
        pageNumber: signatureWidget.PageNumber,
        x: signatureWidget.X,
        y: signatureWidget.Y,
      },
      signatureWidget
    )
  };

For TextWidgetAnnotation you can just change the value of the annotation HTML element.

Best Regards,
Ahmad Moaaz
Software Developer
PDFTron Systems, Inc.
www.pdftron.com

[n.alcina]

I resolved this problem using :

const allTools = Object.values(documentViewer.getToolModeMap());
    for (const tool of allTools) {
      if (tool instanceof Tools.AnnotationSelectTool) {
        tool.setEnableImmediateActionOnAnnotationSelection(true);
      }
    }