Text widget annotations are not rendering properly

[ghost]

Not sure what went wrong in implementing the acroforms in angular by using the example acroforms.js

Configuration:
Using the latest version of Chrome on windows 10.

Steps to reproduce the problem:
https://github.com/dhanu-mamidi/pdfjs-forms/blob/master/src/app/app.component.ts
npm install and start would result in the same issue with the above source.

What is the expected behavior? (add screenshot)

What went wrong? (add screenshot)

Link to a viewer (if hosted on a site other than mozilla.github.io/pdf.js or as Firefox/Chrome extension):

[Snuffleupagus]

Looks like a duplicate of #9993; you'll need to include the pdf_viewer.css file for annotations (among other things) to be positioned correctly.

[timvandermeij]

Yes, that should be the problem. Closing as answered.

[ghost]

Yes, pdf_viewer.css is not loading. I have sorted that but after that all the annotations are rendering in the first page. and they are slightly above position they are supposed to be any insights on this.

With both pages

With single page

Source: https://github.com/dhanu-mamidi/pdfjs-forms/blob/master/src/app/app.component.ts

[timvandermeij]

It looks you have some margin or padding applied to the page or the annotation layer then since this doesn't happen in the default viewer/example.

[ghost]

@timvandermeij thanks, that position is because of the margin. But even second-page annotations are rendered in the first page itself?

[ghost]

Hi,

Can you give me more info on why annotation factory is not considering the padding and margins give for the parent div. It get the same transform origin co-ordinates with or without padding to the parent div.

Any solution for this

Thanks in advance

[timvandermeij]

I don't know, but you can check src/display/annotation_layer.js to see if any styles are overwritten for the annotation types you use.

[ghost]

Hi tim,
I have looked into annotation_layer.js there we are giving the rect from data where we are not considering the offset that div has. Is it because of that. Correct me if I'm wrong.

I think instead of this
container.style.left = rect[0] + 'px';
container.style.top = rect[1] + 'px';

We need to have
container.style.left = (pagediv.offsetLeft + rect[0] )+ 'px';
container.style.top = (pagediv.offsetTop + rect[1] )+ 'px';

Thanks

[timvandermeij]

That could be the case. You can check if it fixes your issue and if so, feel free to create a pull request for us to review.

[Snuffleupagus]

feel free to create a pull request for us to review.

But before considering doing that[1], please ensure that the changes don't break anything by actually testing them locally first; refer to https://github.com/mozilla/pdf.js/wiki/Contributing#4-run-lint-and-testing

---

[1] There was another recent issue, see #10348, where there was a suggestion of using offsetLeft in some calculations which would have caused quite severe rendering errors. Honestly, I'd imagine that the code under discussion here could easily be similarly effected.

[ghost]

Hey ,
I have observed that by passing the offset value in the viewport for rendering the annotations. They are rendering properly with same position value as offset is zero in viewport.

Can you please tell more on this
Thanks

[ghost]

Hi,
Can you tell me how to add the offset to the viewport . If I create the viewport with offsets annotation layer is rendering properly.

Thanks..

[timvandermeij]

I think there is already a pull request for this, #10368, which I think does exactly what you want.

[ghost]

Hi tim, this is exactly what I am thinking of. But I think pdfpageviee.setpage will change the viewport to the default offset 0. So I think we need to the clone again to change the scale and rotation

Thanks

[ghost]

Hi ,
Everything seems fine except all annotations are rendering in the first page as I mentioned avove. Do you have any idea on this.

Thanks.

[timvandermeij]

I don't know why that is happening. Check if it also happens with the unchanged AcroForm example that you mentioned. If not, there is an issue with your customized code.

[ghost]

Yes Tim, it's happening with the default code too.

[Snuffleupagus]

Running gulp dist-install[1] and then opening http://localhost:8888/examples/acroforms/acroforms.html locally works just fine for me, so I'm not entirely sure why this issue needed to be re-opened!?

Most likely testing wasn't done using only the acroforms example directly, without any other code and/or HTML elements around it.

---

[1] The instructions at https://github.com/mozilla/pdf.js/tree/master/examples/acroforms might need to be updated, since they mention gulp dist and all the other viewer component based examples use gulp dist-install.

[VineelG]

Hi,

Yes, pdf_viewer.css is not loading. I have sorted that but after that all the annotations are rendering in the first page. and they are slightly above position they are supposed to be any insights on this.

With both pages

With single page

Source: https://github.com/dhanu-mamidi/pdfjs-forms/blob/master/src/app/app.component.ts

Hi,
Me too getting the same issue, after implementing AcroForms in Angular. All annotations are rendering in the first page and they are not in actual position if margin or padding applied to the actual pdfviewer (offsets are not being calculated).

The original AcroForms code is not customized, except its been implemented in Angular by changing referenced file paths.
Could you please explain, what must be causing this issue? What files in pdfjs-dist are responsible for annotations population aligned to the pdfviewer?

Thanks