How to enable thumbRotateCounterClockwise button in thumbnails panel

Technical Support WebViewer
1

WebViewer Version:
8.3

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:
1

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:

instance.UI.enableElements(['thumbRotateCounterClockwise'])

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.

Thanks.

2

Hello gabor,

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.

See: Apryse Documentation | Documentation

I was able to add a rotate counterclockwise button to the thumbnailControlMenu this way:

instance.UI.thumbnailControlMenu.add([
    {
      title: 'rotate counter clockwise',
      img: 'icon-header-page-manipulation-page-rotation-counterclockwise-line',
      onClick: (selectedPageNumbers) => {
        instance.getDocumentViewer().rotateCounterClockwise(selectedPageNumbers)
      },
      dataElement: 'rotateCounterClockwise',
    },
  ]);

Hope this helps!

Best Regards,

Carlo Mendoza
Web Developer
Apryse