How to Draw Rectangle Annotation Above Widget Annotation in Apryse WebViewer?

Product: Apryse SDK

Product Version: v11.0.0

Hi, Apryse team

I am using Apryse WebViewer to display PDF documents and manage annotations. I need to draw a rectangle annotation above a widget annotation, but the rectangle always appears below the widget. I have tried several approaches, including custom draw handlers and adjusting the order of adding annotations, but none of them seem to work. Please help me find a way to customize it. Thanks

1 Like

Hello Dung,

Thank you for contacting us.

Widgets are special and on their own layer. Therefore, either all the widgets will need to be in front, or all the widgets will need to be behind. This behavior matches Adobe.

There is a potential workaround you could try, here is some sample code:

  documentViewer.addEventListener('finishedRendering', async () => {
    const shadowRoot = document.getElementById('wc-viewer').shadowRoot;
    const pageWidgetContainer = shadowRoot.querySelector('#pageWidgetContainer1');
    pageWidgetContainer.style.zIndex = 25;

    const annotationCanvas = shadowRoot.querySelector('.auxiliary');
    annotationCanvas.style.pointerEvents = 'none';
  });

This will work if you are using web component.

Best Regards,
Darian

2 Likes