Configure toolStylePopup

Technical Support
1

PDF.js Express Version
8.0.1

Detailed description of issue
I would like to use pdfs express to allow our users to highlight specific things within a document. Therefore I would like to setup a color code and restrict the users to those specific colors. Ideally I would like to put 4 or 5 specific colors in the toolStylePopup and remove all other options.

Thank you very much in advance for your help.

Evrard

2

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:

3

Ok I found a way to do it. In case someone is interested, here is my code:

instance.UI.setHeaderItems(function (header: any) {
        const toolsOverlay = header.getHeader('toolbarGroup-Annotate').get('toolsOverlay');
        header.getHeader('toolbarGroup-Annotate').delete('toolsOverlay');
        header.getHeader('default').push({
          type: 'toolButton',
          toolName: 'AnnotationEraserTool',
        });
        header.getHeader('default').push({
          type: 'toolGroupButton',
          toolGroup: 'highlightTools',
          dataElement: 'highlightToolGroupButton',
          title: 'annotation.highlight',
        });
        header.push(toolsOverlay);
      });

      console.log(Tools);

      instance.UI.setColorPalette({
        toolNames: [Tools.ToolNames.HIGHLIGHT],
        colors: ['#ed8936', '#48bb78', '#4299e1', '#667eea'],
      });

      documentViewer.getTool('AnnotationCreateTextHighlight').setStyles({
        StrokeColor: new Annotations.Color(237, 137, 54),
      });

      instance.disableFeatures([instance.Feature.Annotations.all]);

      instance.UI.disableElements([
        'toggleNotesButton',
        'toolsHeader',
        'ribbons',
        'annotationCommentButton',
        'annotationStyleEditButton',
        'annotationDeleteButton',
        'annotationCropButton',
        'annotationRedactButton',
        'annotationGroupButton',
        'annotationUngroupButton',
        'calibrateButton',
        'linkButton',
        'fileAttachmentDownload',
        'annotationStylePopup',
        // 'toolStylePopup',
        'colorPickerColors',
        'stylePopup',
        'textPopup',
        'contextMenuPopup',
        'ColorPickerModal',
        // 'opacitySlider',
        'highlightToolButton2',
        'highlightToolButton3',
        'highlightToolButton4',
      ]);
2 Likes
4

Glad you found a solution!

Let us know if you have any other questions.