INFO: Rotation in WebDocumentViewer(New in 10.6.1.5)


Starting in DotImage 10.6, ServicePack 1, FixPack 5 (10.6.1.5.05135), clientside-initiated rotation has been added to WebDocumentViewer

PAGE ROTATION

There are "Rotate Left" and "Rotate Right" buttons in the toolbar

These effectively SUBTRACT or ADD 90 degrees from the page's rotation

DEFAULT BEHAVIOR

The default behavior will be for the WDV to show two new buttons in the toolbar:

Rotate Left and Rotate Right.

When clicked by the user (or triggered programmatically), they will rotate the current page by 90 degrees either left or right. The rotation is "additive" so clicking Rotate Right 2 times will rotate a total of 180 - 3 times would effectively put it at 270 (or 90 degrees left) and 4 times would return back to the start (0 rotation)

CHANGING DEFAULT BEHAVIOR

If your business needs do not call for / do not want rotation, then you can disable the buttons by hiding them from the toolbar:

HIDE
$('.atala-ui-icon-rotate-left').parent().hide();
$('.atala-ui-icon-rotate-right').parent().hide();

SHOW
$('.atala-ui-icon-rotate-left').parent().show();
$('.atala-ui-icon-rotate-right').parent().show();

NOTE: you can't just drop those directly into the markup to get the buttons to hide at page load. This is because the control needs to initialize first in order for there to be buttons to hide. so, the practical implementation of "hide the buttons at page load" would be:

HIDE ON LOAD
_viewer.bind('initialized', function(e) {
    $('.atala-ui-icon-rotate-left').parent().hide();
    $('.atala-ui-icon-rotate-right').parent().hide();
});

PROGRAMMATICALLY CALLING ROTATION

These effectively SUBTRACT or ADD 90 degrees from the page's rotation

_viewer.trigger('menuclickrotate-right');
_viewer.trigger('menuclickrotate-left');

NOTE: The built in buttons do not have a 180.
However, you can rotate programmatically by using

_viewer.document.rotatePage(pageIndex, angle[, callBack]);

NOTE: Angle here is the total angle of rotation from original (0)
so, the following will NOT rotate BY 180 degrees.. it will rotate TO 180

_viewer.document.rotatePage(0, 180);

if you call that twice, it looks like the second call did nothing - this is by design - because it's already at 180

If your intent is to "rotate page 0 ~by~ 180 degrees" (turn it upside down from current) you just use this:

Rotate document BY 180 degrees from current

_viewer.document.rotatePage(0, _viewer.document.getPageRotation(0) + 180);

GET ROTATION VALUE FOR A PAGE

If you need to get the current rotation value of a specific page

_viewer.document.getPageRotation(pageIndex);

ROTATING ANNOTIONS INDIVIDUALLY

Built in to the SDK, there are two ways to rotate a given annotation arbitrarily

  1. Interactively via the "rotation Grip" (green circle) when an annotation is selected,  in addition to its usual grips, it will have a green "rotate grip" users can arbitrarily rotate the annotation to any angle
  2. Via the Annotation properties context menu right click on an annotation and select properties Rotation (in degrees) is the top option change that value to desired angle and close the properties box
  3. DISCOURAGED: Serialization/deserialization if you save annotations that have been rotated, the rotation will be applied when loaded back in theoretically, you can alter that value in the serialized AnnotationData, but this is not recommended
  4. SUPPORTED in 10.6.1.5.05198 and later: At the time of release of 10.6.1.5, full support for programmatic annotation rotation was not supported. However, this issue has been addressed, so long as you're using build 5198 or later

    Given a single annotation object, rotate it 90 degrees clockwise from current rotation angle:
    anno.rotation +=90;
    anno.update();


    Example: Rotate all selected annotations on all pages:

    function rotateSelected() {
        var
    sel = _viewer.annotations.getSelected();
        for (var
    i = 0; i < sel.length; i++) {
            for (var
    j = 0; j < sel[i].length; j++) {
                var
    anno = sel[i][j];
                anno.rotation += 90;
                anno.update();
            }
        }
        // If you are not using WebDocumentThumbnailer or if you do not want the
       
    // thumbnailer to update visible annotations, comment out the next line
       
    _thumbs.trigger('documentchanged'
    );
    }


EVENTS RELATED TO ROTATION

_viewer.events
   menuclickrotate-left
   menuclickrotate-right

_viewer.annotations.events
  annotationrotated

_viewer.document.events
  pagerotated

 

Original Article:
Q10426 - INFO: Rotation in WebDocumentViewer(New in 10.6.1.5)