• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

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

New Here ,
Jun 15, 2022 Jun 15, 2022

Copy link to clipboard

Copied

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?

TOPICS
PDF Embed API

Views

73

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 15, 2022 Jun 15, 2022

Copy link to clipboard

Copied

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. 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Jun 15, 2022 Jun 15, 2022

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 16, 2022 Jun 16, 2022

Copy link to clipboard

Copied

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

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Jun 16, 2022 Jun 16, 2022

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 16, 2022 Jun 16, 2022

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Jun 16, 2022 Jun 16, 2022

Copy link to clipboard

Copied

LATEST

Cool beans!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources