Open annotation style popup on click of a button outside viewer

Technical Support
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