Allow dragging of custom text box

Technical Support
, ,
1

Product:@pdftron/webviewer

Product Version:“@pdftron/webviewer”: “^10.4.0”

Please give a brief summary of your issue:
i have use custom text box on click of button
issue is its position is fix and also not allow me to resize it
so how can i allow dragging and resizing in it

Please describe your issue and provide steps to reproduce it:

 useEffect(() => {
    if (webViewer.attachmentBlob) {
      WebViewer(
        {
          path: "/webviewer/lib",
          showLocalFilePicker: true,
          fullAPI: true,
          licenseKey:
            "***7fd",
        },

        viewer.current
      ).then(async (instance) => {
        setInstance(instance);
        instance.UI.loadDocument(base64ToBlob(webViewer.attachmentBlob), {
          filename: fileName,
        });
        const {
          documentViewer,
          annotationManager,
          Annotations,
          PDFNet,
          Tools,
        } = instance.Core;
const { WidgetFlags } = Annotations;
instance.UI.setHeaderItems((header) => {
 header.push({
            type: "customElement",
            render: () => {
              const textBoxButton = document.createElement("button");
              textBoxButton.textContent = "Name";
              textBoxButton.addEventListener("click", () => {
                // set flags for multiline and required
                const flags = new WidgetFlags();
                flags.set("Multiline", true);
                flags.set("Required", true);
                flags.set("NoMove", false);

                // Create a form field
                const field = new Annotations.Forms.Field(
                  "some text field name",
                  {
                    type: "Tx",
                    defaultValue: "some placeholder default text value",
                    flags,
                  }
                );

                // Create a widget annotation
                const widgetAnnot = new Annotations.TextWidgetAnnotation(field);

                // Set position and size
                widgetAnnot.PageNumber = 1;
                widgetAnnot.X = 100;
                widgetAnnot.Y = 100;
                widgetAnnot.Width = 150;
                widgetAnnot.Height = 30;

                // Add the form field and widget annotation
                annotationManager.getFieldManager().addField(field);
                annotationManager.addAnnotation(widgetAnnot);
                annotationManager.drawAnnotationsFromList([widgetAnnot]);
              });
              return textBoxButton;
            },
          });
        });
documentViewer.addEventListener("documentLoaded", async () => {

          if (webViewer.xfdfData !== "" && annotationManager) {
            try {
              await annotationManager.importAnnotations(
                pdfResponceDataRef.current
              );
            } catch (error) {
              console.log("importAnnotations", error);
            }
          }
        });
 });

  }, [webViewer.attachmentBlob]);

Blockquote

1 Like
2

Thank you for posting your question to our forum. We will provide you with an update as soon as possible.

1 Like
3

Hello @huzeifajahangir,

Thank you for contacting WebViewer support.

You can drag and resize the text box while the “Forms” ribbon is active, though with the code you have the widget currently is invisible. Please try using the following code snippet where you create the widgetAnnot, which adds a background color:

    // Set position and size
    widgetAnnot.PageNumber = 1;
    widgetAnnot.X = 100;
    widgetAnnot.Y = 100;
    widgetAnnot.Width = 150;
    widgetAnnot.Height = 30;
    widgetAnnot.backgroundColor = new Annotations.Color(0, 0, 0, 0.5);

It will be displayed like so when the “Forms” ribbon is active:

image
image1478×472 59.5 KB

Let me know if this works for you!

Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer
Apryse Software Inc.

1 Like