Rotate StampAnnotation

Technical Support
2

Hi,

If you’re looking to rotate the stamp programmatically, you can set the Rotation property on the annotation to 0, 90, 180, or 270. (In your code sample you’re setting rotation to 90)

We currently do not have an option to rotate the stamp in the UI right now, but you can add one with a custom button. The following code should do something similar to what you’re looking for:

Webviewer({
  path: '/lib',
}, document.getElementById('viewer')).then(instance => {

  const { annotManager, Annotations } = instance;

  instance.annotationPopup.add({
    type: 'actionButton',

    dataElement: 'annot-rotate',
    img: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#abb0c4;}</style></defs><title>icon - header - page manipulation - page rotation - counterclockwise - line</title><path class="cls-1" d="M22.39,11.17H20.72a5,5,0,0,0-4.17-4.93V8.67L12.39,5.33,16.55,2V4.56a6.66,6.66,0,0,1,5.84,6.61Zm-8,1s0,0,0,.05V20.5a1.5,1.5,0,0,1-1.5,1.5h-9a1.5,1.5,0,0,1-1.5-1.5V8.5A1.5,1.5,0,0,1,3.89,7H9.18a.71.71,0,0,1,.2,0l.07,0a1.07,1.07,0,0,1,.22.15l4.5,4.5a.86.86,0,0,1,.15.22.19.19,0,0,0,0,.07A1.29,1.29,0,0,1,14.38,12.2Zm-2,7.8V13H9.14a.75.75,0,0,1-.75-.75V9h-4V20Z"></path></svg>',
    onClick: () => {
      const annots = annotManager.getSelectedAnnotations();
      if (!annots || !annots[0]) return;
      const [annot] = annots;
      if (annot.Rotation === 270) {
        annot.Rotation = 0
      } else {
        annot.Rotation += 90;
      }
      annotManager.redrawAnnotation(annot);
    },
  });

  annotManager.on('annotationSelected', (annots, action) => {
    if (!annots || !annots[0]) {
      instance.disableElements(['annot-rotate'])
      return;
    }
    const [annot] = annots;
    if (annot instanceof Annotations.StampAnnotation) {
      if (action === 'selected') {
        instance.enableElements(['annot-rotate']);
        return;
      }
    }
    instance.disableElements(['annot-rotate'])
  })
});

I hope this helps!
Thanks,
Logan