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

Technical Support
1

Which product are you using?

PDF.js Express Viewer
PDF.js Express Version*
8

Detailed description of issue
i have Annotate button on my PDF.js viewer, now whether i click or not i am able to draw the rectangle box for area i want to add annotation. so in my requirement, except rectangular red tool, we shouldnt use any, accordingly i have handled, so only rectangle tool is available.
image

Expected behaviour
After click on that button only, user must be able to draw rectangular annotation

Does your issue happen with every document, or just one?
yes

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

Code snippet

 WebViewer(
      {
        path: '../../wv-resources/lib',
      },
      this.viewer.nativeElement
    ).then((instance: any) => {
      const { documentViewer, annotationManager, Annotations } = instance.Core;
      this.hidingButtons(instance, documentViewer, Annotations);
      // bind pdf based on api hit with base64ToBlob format
      instance.UI.loadDocument(this.base64ToBlob(doc), { filename: 'myfile.pdf' });
      // setting title to userRole instead of Guest
      instance.Core.annotationManager.setCurrentUser(this.role);
      // Rectangular Annotation
      instance.UI.setToolMode(instance.Core.Tools.ToolNames.RECTANGLE);
      if (instance.UI.getToolMode().name === 'AnnotationCreateRectangle') {
        instance.UI.disableElements(['annotationStyleEditButton']);
      }
})

  hidingButtons(instance: any, documentViewer: any, Annotations: any) {
    instance.UI.setHeaderItems(function (header: any) {
      const toolsOverlay = header.getHeader('toolbarGroup-Annotate').get('toolsOverlay');
    });
    instance.UI.disableElements([
      'toggleNotesButton',
      'toolbarGroup-Shapes',
      'toolbarGroup-Edit',
      'toolbarGroup-Insert',
      'toolsHeader',
      'toolbarGroup-View',
      'toolbarGroup-FillAndSign',
      'annotationCommentButton',
      'annotationStyleEditButton',
      'annotationDeleteButton',
      'annotationCropButton',
      'annotationRedactButton',
      'annotationGroupButton',
      'annotationUngroupButton',
      'calibrateButton',
      'linkButton',
      'fileAttachmentDownload',
      'toolbarGroup-Shapes',
      'panToolButton',
      'colorPickerColors',
      'stylePopup',
      'textPopup',
      'contextMenuPopup',
      'ColorPickerModal',
      'selectToolButton',
      'highlightToolButton2',
      'highlightToolButton3',
      'highlightToolButton4',
      'searchButton',
      'textStrikeoutToolButton',
      'textHighlightToolButton',
      'textSquigglyToolButton',
      'leftPanelButton',
      'menuButton',
      'viewControlsButton',
      'highlightToolButton',
      'rectangleToolButton',
      'rectangleToolButton4',
      'rectangleToolButton3',
      'rectangleToolButton2',
      'underlineToolButton',
      'underlineToolButton2',
      'underlineToolButton3',
      'underlineToolButton4',
      'strikeoutToolButton',
      'strikeoutToolButton2',
      'strikeoutToolButton3',
      'strikeoutToolButton4',
      'squigglyToolButton',
      'squigglyToolButton2',
      'squigglyToolButton3',
      'squigglyToolButton4',
      'stickyToolButton',
      'stickyToolButton2',
      'stickyToolButton3',
      'stickyToolButton4',
      'stickyToolButton',
      'stickyToolButton2',
      'stickyToolButton3',
      'stickyToolButton4',
      'freeTextToolButton',
      'freeTextToolButton2',
      'freeTextToolButton3',
      'freeTextToolButton4',
      'freeHandToolButton',
      'freeHandToolButton2',
      'freeHandToolButton3',
      'freeHandToolButton4',
    ]);
    instance.UI.disableFeatures([instance.UI.Feature.Print]);
    // disable text selection
    instance.UI.disableFeatures([instance.UI.Feature.TextSelection]);
  }
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:

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

4

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:

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:

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