How to make Annotation Rectangle tool to enable drawing based on click of annotate button

[kkim]

Hello rakshitha_r,

If you want to hide all the tools except the rectangular annotation tool, you can hide the elements like so from the WebViewer constructor or programatically like you have:

Hide & Disable Buttons in PDF.js Express Viewer | Documentation

On your annotate button, you can bind a ‘click’ event to set the tool mode:
https://pdfjs.express/api/Core.DocumentViewer.html#setToolMode
and the toolNames are available here: PDFJS Express WebViewer Namespace: Tools

  document.getElementById('annotate-button').addEventListener('click', async (e) => {
    instance.UI.setToolMode(instance.Core.Tools.ToolNames.RECTANGLE)
  })

And if you would like to customize the style you can follow the forum guide here:

Open annotation style popup on click of a button outside viewer

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(); fo…

Best Regards,
Kevin Kim

Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here