Annotation popup location

martin.jones · July 26, 2022, 6:18pm

Product: WebViewer

Product Version: 8.0.1

The annotation popup changes its location relative to the annotation based on the space available (e.g. above the annotation when the annotation is near the bottom of the page).

Is there a way for me to manually specify where I want that popup to appear? Sometimes I need it to be above the annotation for UX purposes, even if the annotation isn’t near the bottom of the screen.

cmendoza · July 27, 2022, 10:03pm

Hello martin.jones,

Unfortunately there are no settings to change the annotationPopup position in WebViewer out-of-the-box. In order to do this, you would have to fork our public repo and then make the changes to the code. If you are interested in doing this, we have a guide on advanced customizations to explain this here: PDFTron Systems Inc. | Documentation

From there, the changes would likely have to be made in the getPopupPosition helper file here:

github.com

PDFTron/webviewer-ui/blob/2e1eef3c90ce25699e6a71a9615f1cf20de83831/src/helpers/getPopupPosition.js

import core from 'core';

// gap between the annotation selection box and the popup element
const gap = 17;

export const getAnnotationPopupPositionBasedOn = (annotation, popup) => {
  const { left, top } = calcAnnotationPopupPosition(
    getAnnotationPosition(annotation),
    getPopupDimensions(popup)
  );

  return { left: Math.max(left, 4), top };
};

export const getTextPopupPositionBasedOn = (allQuads, popup) => {
  const { left, top } = calcTextPopupPosition(
    getSelectedTextPosition(allQuads),
    getPopupDimensions(popup)
  );

This file has been truncated. show original

Best Regards,
Carlo Mendoza
Software Developer
PDFTron Systems, Inc.
www.pdftron.com