Adding onClick to signature button does not deselect icon on second click

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.5

Detailed description of issue
I’ve added an onClick function to call some code when the user clicks on the signature and rubber stamp buttons. When I click the signature button when it is active, it highlights the edit tool but it does not deselect the signature tool.

The default behaviour of the application is that when a tool is active and the user clicks on it again, the edit tool is selected and the Add New Signature in the drop down changes to No Presets.

I’ve added similar code for the rubber stamp button and this works as expected.

image
image832×319 17.8 KB

Expected behaviour
I expected that the signature button would be deactivated and that the edit tool would be enabled. This is what happens with the onClick function for the rubber stamp tool that I have included in the code snippet.

image
image828×213 6.72 KB

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

Link to document
N/A

Code snippet
I used this code on the PDF.js Express demo in the console and it showed the same behaviour.

const instance = WebViewer.getInstance();

instance.UI.updateElement('signatureToolGroupButton', {
    onClick: () => {
        if(instance.getToolMode().name === instance.Tools.ToolNames.SIGNATURE) {
            instance.setToolMode(instance.Tools.ToolNames.EDIT);
        } else {
            instance.setToolMode(instance.Tools.ToolNames.SIGNATURE);
        }
    }
});

instance.UI.updateElement('rubberStampToolGroupButton', {
    onClick: () => {
        if(instance.getToolMode().name === instance.Tools.ToolNames.RUBBER_STAMP) {
            instance.setToolMode(instance.Tools.ToolNames.EDIT);
        } else {
            instance.setToolMode(instance.Tools.ToolNames.RUBBER_STAMP);
        }
    }
});
3

Hello Tom,

The select tool is paired with the signature tool until a signature from the dropdown is selected.
As a workaround when you call setToolMode, you can querySelect and click the button.signature-row-content.interactable button element which will inherently deselect the select tool

image
image1086×274 14.7 KB

best regards,
Kevin

4

Hi Kevin,

Thanks for the help. It didn’t do exactly what I wanted but I was able to make some changes that worked in the end.

const instance = WebViewer.getInstance();

instance.UI.updateElement('signatureToolGroupButton', {
    onClick: () => {
        if(instance.getToolMode().name === instance.Tools.ToolNames.SIGNATURE) {
            instance.setToolMode(instance.Tools.ToolNames.EDIT);
            document.querySelectorAll('button[data-element="selectToolButton"]').forEach(button => {
                button.click();
            });
        } else {
            instance.setToolMode(instance.Tools.ToolNames.SIGNATURE);
        }
    }
});