Free text annotation auto width

Technical Support
1

Which product are you using?
PDF.js Express Plus

PDF.js Express Version
Latest

Detailed description of issue
I am trying to add free text annotations programmatically to the pdf. I have to supply a fixed height and width to the annotation in order to render it, but sometimes the content is larger than the width, in that case I want the width to be increased or expand automatically as per length of the content.

Please see the example attached. Here the text got wrapped, but ideally, it should be in one line.
image

Things I tried
I tried to use the following code,
freeText.setAutoSizeType(instance.Core.Annotations.FreeTextAnnotation.setAutoSizeType.AUTO); but its not working. The annotation got disappeared as soon as I put this code.

Can you please provide working code as an example ?

Expected behaviour
Expected behaviour is to auto expand the free text annotation by increasing the width to show contents in single line.

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

Code snippet

const freeText = new Annotations.FreeTextAnnotation();
freeText.PageNumber = 1;
freeText.X = 300;
freeText.Y = 400;
freeText.Width = 150;
freeText.Height = 50;
freeText.setPadding(new Annotations.Rect(0, 0, 0, 0));
freeText.setContents('moreandmoreandmore');
freeText.FontSize = '16pt';
freeText.Color="Red";
annotManager.addAnnotation(freeText);
annotManager.redrawAnnotation(freeText);
2

Hi there,

You can use the setAutoSizeType but this is applied when clicking into the editor.

For example, if you put the provided code into the demo:
Initially the autoSize property is set to none:

image
image1920×860 116 KB

After setting the autoSize property:

image
image3238×556 159 KB

And then after double-clicking the annotation to go into the text editor:

image
image1920×591 104 KB

Best regards,
Kevin Kim

3

Thanks for explaining the autoSize property.

But the question is still there. While rendering a freetext annotation through code, how to make sure that the contents fits in one line as per the length of the contents.

4

Hi there,

You can set the freetext’s autosize property to auto during the creation:

const freeText = new Annotations.FreeTextAnnotation();
freeText.PageNumber = 1;
freeText.X = 300;
freeText.Y = 400;
freeText.Width = 150;
freeText.Height = 50;
freeText.setPadding(new Annotations.Rect(0, 0, 0, 0));
freeText.setContents('moreandmoreandmore');
freeText.FontSize = '16pt';
freeText.Color="Red";
freeText.setAutoSizeType('auto')
await annotationManager.addAnnotation(freeText);
await annotationManager.redrawAnnotation(freeText);

best regards,
Kevin Kim

5

Its still not working. When I add the code freeText.setAutoSizeType(‘auto’) , the freetext annotation disappears. Please check the video here.

6

Hi there,

Could you please try refreshing the page after making the changes to the code?
Sometimes react has an issue with rerendering the viewer instance on the same html element on a hot reload.

Best regards,
Kevin Kim