Open annotation style popup on click of a button outside viewer

Technical Support
1

PDF.js Express Version

Detailed description of issue
I need to open the style pallete popup for viewer and on changing the color I can change the color of all the annotations loaded on the pdf. Currently this is not happening.
Expected behaviour
{Provide a screenshot or description of the expected behaviour}

Does your issue happen with every document, or just one?
{Answer here}

Link to document
{Provide a link to the document in question if possible}

Code snippet
On clicking on the btn I need the popup to be visible -

 document.getElementById("style-btn").onclick = async () => {
        instance.annotationPopup.getItems();
        instance.openElements(["AnnotationStylePopup"]);
       
      };
2

Hey @Logan !

Is there any way to open the annotation style popup and modify the style of the annotations that are loaded on the pdf. I tried opening the popup using openElements but that did not work.

Any information on this regard would be really hepful.

Thanks

3

Hey there,

The annotation style popup need to be associated with an annotation and cannot just be opened freely. If you want something like this, it might be best to use your own color picker (theres a ton of JS libraries that can do this) and using that instead.

Once you have the color you want to change annots too, you can simply loop over them and update their stroke and fill styles:

  const { annotManager, Annotations} = instance;

  const annots = annotManager.getAnnotationsList();

  for (const annot of annots) {
    // use your custom color here for the r g b values
    const color = new Annotations.Color(255, 0, 0);
  
    annot.StrokeColor = color;
    annot.FillColor = color;

    annotManager.redrawAnnotation(annot)

  }

You might need to have special logic for each kind of annotation if you don’t want to set the Fill for certain annotations. To check the type of annotation you can do something like this:

  const { annotManager, Annotations} = instance;

  const annots = annotManager.getAnnotationsList();

  for (const annot of annots) {
    // use your custom color here for the r g b values
    const color = new Annotations.Color(255, 0, 0);

    if (annot instanceof Annotations.RectangleAnnotation) {
      annot.StrokeColor = color;
    } else {
      annot.StrokeColor = color;
      annot.FillColor = color;
    }

    annotManager.redrawAnnotation(annot)
  }

Thanks!
Logan