Add unit test and fix code review comments.

src/drawer.js

@@ -479,9 +479,9 @@ $.Drawer.prototype = {
         if ( this.viewport.degrees !== 0 ) {
             this._offsetForRotation(this.viewport.degrees);
         }
-        if (tiledImage.degrees) {
+        if (tiledImage.getRotation() !== 0) {
             this._offsetForRotation(
-                tiledImage.degrees,
+                tiledImage.getRotation(),
                 tiledImage.viewport.pixelFromPointNoRotate(
                     tiledImage.getBounds(true).getTopLeft(), true));
         }
@@ -547,7 +547,7 @@ $.Drawer.prototype = {
         if ( this.viewport.degrees !== 0 ) {
             this._restoreRotationChanges();
         }
-        if (tiledImage.degrees) {
+        if (tiledImage.getRotation() !== 0) {
             this._restoreRotationChanges();
         }
         context.restore();

src/tiledimage.js

@@ -132,6 +132,9 @@ $.TiledImage = function( options ) {
     var fitBoundsPlacement = options.fitBoundsPlacement || OpenSeadragon.Placement.CENTER;
     delete options.fitBoundsPlacement;
 
+    this._degrees = $.positiveModulo(options.degrees || 0, 360);
+    delete options.degrees;
+
     $.extend( true, this, {
 
         //internal state properties
@@ -159,8 +162,7 @@ $.TiledImage = function( options ) {
         crossOriginPolicy:      $.DEFAULT_SETTINGS.crossOriginPolicy,
         placeholderFillStyle:   $.DEFAULT_SETTINGS.placeholderFillStyle,
         opacity:                $.DEFAULT_SETTINGS.opacity,
-        compositeOperation:     $.DEFAULT_SETTINGS.compositeOperation,
+        compositeOperation:     $.DEFAULT_SETTINGS.compositeOperation
-        degrees:                0
     }, options );
 
     this._xSpring = new $.Spring({
@@ -280,13 +282,13 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
                 this._ySpring.current.value,
                 this._worldWidthCurrent,
                 this._worldHeightCurrent,
-                this.degrees) :
+                this._degrees) :
             new $.Rect(
                 this._xSpring.target.value,
                 this._ySpring.target.value,
                 this._worldWidthTarget,
                 this._worldHeightTarget,
-                this.degrees);
+                this._degrees);
     },
 
     // deprecated
@@ -311,7 +313,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
                 bounds.y + clip.y,
                 clip.width,
                 clip.height,
-                this.degrees);
+                this._degrees);
         }
         return bounds;
     },
@@ -698,7 +700,7 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
      * @returns {Number} the current rotation of this tiled image in degrees.
      */
     getRotation: function() {
-        return this.degrees;
+        return this._degrees;
     },
 
     /**
@@ -706,8 +708,13 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
      * @param {Number} the rotation in degrees.
      */
     setRotation: function(degrees) {
-        this.degrees = $.positiveModulo(degrees, 360);
+        degrees = $.positiveModulo(degrees, 360);
+        if (this._degrees === degrees) {
+            return;
+        }
+        this._degrees = degrees;
         this._needsDraw = true;
+        this._raiseBoundsChange();
     },
 
     /**
@@ -1498,9 +1505,9 @@ function drawTiles( tiledImage, lastDrawn ) {
             tiledImage._drawer._offsetForRotation(
                 tiledImage.viewport.degrees, useSketch);
         }
-        if (tiledImage.degrees !== 0) {
+        if (tiledImage._degrees !== 0) {
             tiledImage._drawer._offsetForRotation(
-                tiledImage.degrees,
+                tiledImage._degrees,
                 tiledImage.viewport.pixelFromPointNoRotate(
                     tiledImage.getBounds(true).getTopLeft(), true),
                 useSketch);
@@ -1573,7 +1580,7 @@ function drawTiles( tiledImage, lastDrawn ) {
     }
 
     if (!sketchScale) {
-        if (tiledImage.degrees !== 0) {
+        if (tiledImage._degrees !== 0) {
             tiledImage._drawer._restoreRotationChanges(useSketch);
         }
         if (tiledImage.viewport.degrees !== 0) {
@@ -1587,9 +1594,9 @@ function drawTiles( tiledImage, lastDrawn ) {
                 tiledImage._drawer._offsetForRotation(
                     tiledImage.viewport.degrees, false);
             }
-            if (tiledImage.degrees !== 0) {
+            if (tiledImage._degrees !== 0) {
                 tiledImage._drawer._offsetForRotation(
-                    tiledImage.degrees,
+                    tiledImage._degrees,
                     tiledImage.viewport.pixelFromPointNoRotate(
                         tiledImage.getBounds(true).getTopLeft(), true),
                     useSketch);
@@ -1603,7 +1610,7 @@ function drawTiles( tiledImage, lastDrawn ) {
             bounds: bounds
         });
         if (sketchScale) {
-            if (tiledImage.degrees !== 0) {
+            if (tiledImage._degrees !== 0) {
                 tiledImage._drawer._restoreRotationChanges(false);
             }
             if (tiledImage.viewport.degrees !== 0) {

src/viewer.js

@@ -1228,6 +1228,8 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
      * (portions of the image outside of this area will not be visible). Only works on
      * browsers that support the HTML5 canvas.
      * @param {Number} [options.opacity] Opacity the tiled image should be drawn at by default.
+     * @param {Number} [options.degrees=0] Initial rotation of the tiled image around
+     * it top left corner in degrees.
      * @param {String} [options.compositeOperation] How the image is composited onto other images.
      * @param {String} [options.crossOriginPolicy] The crossOriginPolicy for this specific image,
      * overriding viewer.crossOriginPolicy.

test/modules/tiledimage.js

@@ -292,6 +292,35 @@
         });
     });
 
+    // ----------
+    asyncTest('rotation', function() {
+
+        function testDefaultRotation() {
+            var image = viewer.world.getItemAt(0);
+            strictEqual(image.getRotation(), 0, 'image has default rotation');
+
+            image.setRotation(400);
+            strictEqual(image.getRotation(), 40, 'rotation is set correctly');
+
+            viewer.addOnceHandler('open', testTileSourceRotation);
+            viewer.open({
+                tileSource: '/test/data/testpattern.dzi',
+                degrees: -60
+            });
+        }
+
+        function testTileSourceRotation() {
+            var image = viewer.world.getItemAt(0);
+            strictEqual(image.getRotation(), 300, 'image has correct rotation');
+            start();
+        }
+
+        viewer.addOnceHandler('open', testDefaultRotation);
+        viewer.open({
+            tileSource: '/test/data/testpattern.dzi',
+        });
+    });
+
     asyncTest('fitBounds', function() {
 
         function assertRectEquals(actual, expected, message) {