Disable Opacity and Stroke Sliders for Specific Annotation Types (Rectangle & Highlight) in Tool Style Popup

Technical Support
1

Which product are you using?

PDF.js Express PLUS

PDF.js Express Version

  • UI version: 8.7.0
  • Core version: 8.7.2
  • webviewer.min.js: 8.7.2

Detailed Description of Issue

I want to disable the opacity and stroke sliders in the tool style popup only for Rectangle and Highlight annotations.

I tried using viewer.UI.disableElements(['opacitySlider', 'strokeStyleSlider']);, but it disables the sliders for all annotation types, including other tools like Ellipse, Line, and Arrow.

Additionally, I attempted to use the annotationChanged event to dynamically disable the sliders based on the selected annotation type. While the event is firing, the sliders are not disabled specifically for RectangleAnnotation and HighlightAnnotation as intended.

Furthermore, the openPopup event does not trigger when the tool style popup opens, making it challenging to handle this case.

Expected Behaviour

The opacity and stroke sliders should be disabled only for RectangleAnnotation and HighlightAnnotation. Other annotation types should retain full functionality in the style popup.

Example Expected Behavior:

  • Rectangle: Opacity and Stroke sliders are hidden.
  • Highlight: Opacity and Stroke sliders are hidden.
  • Ellipse, Line, Arrow, etc.: Sliders remain visible.

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

The issue happens with every document.

Link to Document

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

Code Snippet

Please let me know if there’s an alternative event or approach that works for handling this use case.

3

Hi there,

You can use the toolModeUpdated event to disable/enable those elements.
i.e.

documentViewer.addEventListener('toolModeUpdated', (newTool, oldTool) => {
    console.log(newTool.name);
    if (newTool.name === 'AnnotationCreateRectangle' || newTool.name === 'AnnotationCreateTextHighlight') {
        console.log('disabling sliders');
        UI.disableElements(['opacitySlider', 'strokeStyleSlider'])
    } else {
        console.log('enabling sliders');
        UI.enableElements(['opacitySlider', 'strokeStyleSlider'])
    }
})

Here’s the toolNames list for reference:
https://pdfjs.express/api/Core.Tools.html#.ToolNames

Best regards,
Kevin