Skip to main content
Participant
June 15, 2022
Question

Annotation Tools pop-up not showing up when File Preview Events enabled

  • June 15, 2022
  • 1 reply
  • 1094 views

Hi there,

 

I have the following event options configured for my listener:

const eventOptions = {
      enableFilePreviewEvents: true,
      enableAnnotationEvents: true,
      listenOn: [
        AdobeDC.View.Enum.FilePreviewEvents.PREVIEW_SELECTION_END,
        AdobeDC.View.Enum.AnnotationEvents.ANNOTATION_ADDED
      ]
    }

My issue is that whenever I add the PREVIEW_SELECTION_END to the list of events, the small pop-up annotation tools bar next to my cursor no longer shows up, and when I click the highlight button on the annotations tools bar at the top of the page, it doesn't highlight the selected text. For context, what I am trying to do is to capture the selected text, and then do something with that captured text if the user highlights it immediately after. As far as I can tell, the only way to get the value of the selected text is using the PREVIEW_SELECTION_END event. When I remove PREVIEW_SELECTION_END from my eventOptions, annotations work as expected, but I can't seem to find anywhere in the docs that explicitly say that these two event types are not compatible with each other.

 

These are my viewer config options for reference:

var viewerConfig = {
  enableAnnotationAPIs: true, 
  showAnnotationTools: true,
  includePDFAnnotations: true,
};

Is there a configuration I am missing to make both these event types work simultaneously?

This topic has been closed for replies.

1 reply

Participant
June 15, 2022

It seems like there's some sort of a race condition happening - I found this related topic. I can work around it with a very small delay on a setTimeout (~10ms seems to work fine for me, though not sure if there are other factors that will affect this). If anyone knows of a more elegant solution, please do let me know, but I just wanted to share my findings in any case. 

Raymond Camden
Community Manager
Community Manager
June 15, 2022

You shouldn't need to use a timeout, you may just not be handling the promises well. Can you share your complete code?

Participant
June 16, 2022

It's not fully implemented yet but here's what I have so far, any guidance would be greatly appreciated! Thank you!

 

let selectedText = '';

  adobeDCView.registerCallback(
    AdobeDC.View.Enum.CallbackType.EVENT_LISTENER,
    event => {
      previewFilePromise.then(adobeViewer => {
        adobeViewer.getAPIs().then(apis => {
          if (event.type === AdobeDC.View.Enum.FilePreviewEvents.PREVIEW_SELECTION_END) {
            setTimeout(() => {
              apis.getSelectedContent().then(res => selectedText = res.data);
            }, 10);
          } else if (event.type === AdobeDC.View.Enum.AnnotationEvents.ANNOTATION_ADDED) {
            let data = {
              currentPage: 1,
              text: selectedText,
              annotation: null,
            }
            apis.getCurrentPage().then(res => data.currentPage = res);
            data.annotation = event.data;
            console.log('send create action to api with data:', data)
          }
        });
      });
    },
    eventOptions
  );