How to add confirmation pop up before deleting any annotation?

Technical Support
1

Which product are you using?
PDF.js Express Plus

PDF.js Express Version
8.0.1

Detailed description of issue
I want to add a confirmation popup before deleting any annotation. I already added my own popup modal but after clicking the cancel button pdfjs express delete my annotation. How to stop delete annotation if the user clicks the cancel button from the popup modal.

Expected behavior
Markdown

After clicking the cancel button it shouldn’t delete the annotation.

Does your issue happen with every document, or just one?
Yes, for every document.

Link to document

Code snippet

const { annotationManager } = instance.Core;

  annotationManager.addEventListener('annotationChanged', async (annots, action) => {
    if(action === 'delete') {
      //show my pop up modal and wait for user response
       if(window.confirm()){
          // store XFDF in DB
       } else {
          //this function will stop here and return but it delete my annoattion
          return
       }
    }
    }
  })
3

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

4

@Logan are you there?

5

Hey!

Sorry - this slipped through the cracks somehow.

This one was a bit tricky. Basically the trick is to redraw the annotation after its deleted, pop up your modal, and if they confirm then re-delete the annotation. There are some timing issues we ran into when trying to integrate so we had to rely on setTimeout a bit to make this work. We will fix these timing issues in the next release - after that you should be able to delete the setTimeouts.

  annotationManager.addEventListener('annotationChanged', async (annots, action, event) => {
    if(action === 'delete') {

      // If the source of this event is "confirm-delete" then we can break early to prevent infinite loop.
      if(event.source === 'confirm-delete') return;

      // Redraw the annotation for now
      setTimeout(() => {
        annotationManager.addAnnotations(annots);
        annotationManager.drawAnnotationsFromList(annots);
      }, 40)
    
      setTimeout(() => {

        //show pop up modal and wait for user response
       if(window.confirm('Delete?')){ 
          // Delete the annotation again
          // Set the source to something that we can catch later
          annotationManager.deleteAnnotation(annots[0], { source: 'confirm-delete' });
        } else {
            return
        }
      }, 100)
      
    }
  })

Thanks,
Logan

1 Like