Annotation events are not correctly triggered when the viewer is inside a shadowdom (mode: open)

Technical Support WebViewer
, ,
1

Product: @pdftron/webviewer

Product Version: 8.9.0

Annotation events are not correctly triggered when the viewer is inside a shadowdom (mode: open).

Description:
When a custom PDF viewer (without iframe) is initialized inside a shadowdom, annotation events derived from user mouse clicks seem not to work correctly (e.g. “ANNOTATION_SELECTED”).

Steps to reproduce:

  • create a shadowdom inside any element
  • initialize a new PDFTron viewer inside the shadowdom
  • create a listener for the annotation selected event
  • make some annotations
  • try to select any annotation

Is it possible that the event is handled by the PDFTron viewer directly listening for a window event and checking the event.target? I’m asking because the event.target property gets changed by the browser when is from inside a shadowdom and it always points to the shadowdom parent element. The original provenance of the event is present only in the event.composedPath property.

Thank you in advance for any help!

Thomas

2

Hi @ThomasIommi,

Thanks for submitting this bug report! Just wanted to let you know we are looking into this and will get back to you when we have an update, or if we need more information.

Let us know if you have any further questions or comments.

Adam Sinclair
Web Developer
PDFTron

3

Hi @ThomasIommi,

Sorry for the delay. Unfortunately I’m having difficulties reproducing your issue. Would you be able to provide us with a sample project where we can reproduce the problem? This would help us speed up investigation.

Adam Sinclair
Web Developer
PDFTron

4

Hi Adam!

Sorry for my late reply!

I’ve updated a previous show-case, you can find it here: GitHub - ThomasIommi/pdftron-issue-test: PdfTron issue sample

You can install it with npm install; then to build it for this specific issue case the command is npm run build:webc.

For convenience I also prepared a script to serve it with http-server, with the command: npm run run:webc.

In the main page you should see two PDF viewers; on the left you can find a PDFTron viewer nested in a webcomponent that also has a shadowdom attached; on the right its a viewer initialized in an iframe for a demo of another issue, but it can be handly to make comparisons between the two!
With the viewer on the left you should be able to make annotations, but not to select nor edit them, while it should work fine in the iframe on right.

If you try to remove the shadowdom, by removing the encapsulation: ViewEncapsulation.ShadowDom property in src/app/web-component/viewer-web/viewer-web.component.ts, both viewers should work fine.

I hope this helps you! Let me know if you need anything else.

Thank you!

5

Hi @ThomasIommi,

Thanks for providing us with this sample. I am able to reproduce the issue and will continue investigating. We will respond here with any questions or updates!

Adam

6

Hi there @ThomasIommi,

I’ve been taking a look at the sample you provided and while I was able to reproduce the issue, I cannot reproduce anymore.

Can you confirm that you are able to select and edit boxes created in the shadowDOM viewer?

Best Regards,
Zach Serviss
Web Development Support Engineer
PDFTron Systems, Inc.

7

Hi Zach!

No, unfortunately I’m still having the same issue.

Please forgive my question, are you by any chance starting the application with npm run start or ng serve instead of npm run run:webc ?
Because my sample adds the shadowDOM only when you run the latter command.
If it’s the case, to reproduce the error in this specific configuration (npm run start or ng serve) you have to add the ViewEncapsulation.ShadowDom to the AppComponent instead of the ViewerWebComponent.

Best regards,
Thomas

8

Ah yes that was my mistake, I am able to reproduce and start debugging again. Thank you!

Best Regards,
Zach Serviss
Web Development Support Engineer
PDFTron Systems, Inc.

9

Hi there!

Any news on this issue? : )
If is not resolved, I will opt for integrating an iframe instead of a webcomponent; even if It makes the communication between components more difficult.

Thank you!

10

Hi @ThomasIommi,

Unfortunately I don’t have an update for you. Usually WebViewer works in a shadowDOM and cannot find why it does not work as expected in this case.

I would recommend using an iframe the WebViewer is responsive there.

Best Regards,
Zach Serviss
Web Development Support Engineer
PDFTron Systems, Inc.