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

[tam24882507szsr]

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?

[tam24882507szsr]

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]

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

[tam24882507szsr]

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
  );

[Raymond Camden]

So... I'm trying to parse this and it's really difficult. In your callback handler for the event, you *then* have previewFilePromise.then being called. Where was previewFilePromise even created? Maybe back up a bit. You want to listen to two events - can you explain what you want to do on those events?

[tam24882507szsr]

I got it working without the setTimeout, my apologies for the trouble - the code block above was a result of me trying to frankenstein a couple of pieces of sample code together to get it to do what I wanted it to, and my solution involved moving the previewFilePromise inside of the event.type if block (similar to this solution here) which resolved my issue. Thanks for your help in any case, I appreciate it!

[Raymond Camden]

Cool beans!