update the font-size during resizing the free hand text box to make the text always full fill the whole box

Technical Support
#1

Detailed description of issue

Currently we try to add a small feature which can update the font-size during resizing the free hand text box to make the text always full fill the whole box. But I did not find the right API to do this, I tied to extend moseMove handler of AnnotationSelectTool. But there are several problems:

  1. I cant detect is this a resizing or relocating of box.
  2. I cant detect the resize direction (right or left, top or bottom)
  3. The initial text box is not big enough to show all text.
    Expected behaviour
    update the font-size during resizing the free hand text box to make the text always full fill the whole box
    Link to document
    {Provide a link to the document in question if possible}

Code snippet
{Provide a relevant code snippet}

#2

Hi!

The PDF spec says that annotations with a font size of 0pt should be automatically calculated, so you can do just that by setting the FontSize to 0 every time a FreeTextAnnotation is created.

Webviewer({
   ...
}, document.getElementById('viewer')).then(instance => {

  const { annotManager, Annotations } = instance;

  annotManager.on('annotationChanged', ([annot], action) => {
    if (annot instanceof Annotations.FreeTextAnnotation && action === 'add') {
      annot.FontSize = '0pt'
    }
  })

});

Unfortunately our implementation is a little bit buggy right now as there is a bug in calculating the line height, but we will look to fix this very soon.

I hope this helps!

Thanks,
Logan

#3

Hi, Logan
thanks for your help, this works but only when you resize the rect of text. and the problems are:

  1. initial fontsize is too small when add a new one.
  2. the fontsize will always be reset to 0pt when trying modify the text string.

so is there a way which can give an initial fontsize when add and still keep the fontsize fill the whole rect when resize the rect after added. and also to keep the current fontsize when edit text content.

thanks
Aaron

#4

Hey there! Sorry about that, I missed that part.

We found a couple bugs in the FreeTextAnnotation that are preventing us from fulfilling all these requirements at once. We are going to investigate ASAP, and it will be fixed in a future version. I will let you know when it is released.

As a side note, you can set the default font size of annotations by using setStyles

  instance.docViewer.getTool('AnnotationCreateFreeText').setStyles(function() {
    return {
      FontSize: '40pt'
    };
  });

However, this does not interact nicely with the 0pt trick right now, so it’s kind of one or the other for now. Again, ill let you know when this is fixed!

Thanks,
Logan

#5

thanks for your help, currently we try to use pdfjs express to build form,but it doest not work, so is there any example show how to build a form via pdfjs express.

thanks
Aaron

#6

Hi,

PDF.js Express does not support form building or any PDF manipulation.

If you need form building support, you will have to upgrade to PDFTon WebViewer. It has Form Build support as shown here.

Thanks!
Logan