Can you reproduce using one of our samples or online demos?
Yes.
Are you using the WebViewer server?
No.
Does the issue only happen on certain browsers?
No.
Is your issue related to a front-end framework?
Yes.
Is your issue related to annotations?
No
Please give a brief summary of your issue:
How to enable thumbRotateCounterClockwise button in thumbnails panel
Please describe your issue and provide steps to reproduce it:
I would like to add a counter clockwise rotation button next to the clockwise rotation button in the panel thumbnail actions, here:
I know it is available in the 3 dot menu, but other than the rotations (clockwise and counterclockwise) we don’t need any other operations from the 3 dot menu, so we disabled the delete button and the 3 dot menu.
I tried to enable the feature like this, but it doesn’t work:
I’ve seen this discussion, but it’s probably for an older version of the WebViewer, because the thumbnailControlMenu doesn’t seem to exist anymore.
I know that it’s possible to have both the rotate clockwise and counter clockwise buttons in the thumbnail panel, because in this demo both buttons are there, as I would expect, but the only difference is that this demo uses the WebViewer server, but we don’t need that functionality.
We just need a simple client WebViewer with both the rotate clockwise and counter clockwise buttons.
The thumbnailControlMenu does exist but it’s actually in a newer version of WebViewer from the one you are using (8.6+). To you use it, you would have to upgrade your WebViewer version which will also give you access to our latest optimizations and new features.
You should be able to target the document viewer using instance.Core.documentViewer. Please give that a try and let us know if you’re still having issues with this.
instance.UI.thumbnailControlMenu.add([
{
title: “Rotate”, // Button title
img: “icon-header-page-manipulation-page-rotation-clockwise-line”, // Icon image
onClick: (selectedPageNumbers) => {
// onClick handler
// Check if any page is selected
if (selectedPageNumbers) {
// Rotate the selected pages counter-clockwise
const rotationDelta = 90; // Rotate by 90 degrees clockwise
documentViewer.rotateClockwise(
selectedPageNumbers,
rotationDelta
);
// Refresh the viewer to apply the rotation
documentViewer.refreshAll();
} else {
console.error(“No page selected to rotate.”);
}
},
dataElement: “rotateCounterClockwise”, // Optional data element
},
]);
i have apply it like this but its generate custome button but how can i get its built in function and also how to get its xml
I’m not quite sure what it is that you’re asking for here. The code snippet you posted is creating a custom button. There should already be a “Rotate Page Clockwise” button included in the thumbnails panel as shown in the attached image where you can also see the element in the DOM for reference.
