Viewport getBounds and fitBounds methods now take rotation into account. Fix #924

src/navigator.js

@@ -307,7 +307,7 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
         }
 
         if (viewport && this.viewport) {
-            bounds      = viewport.getBounds( true );
+            bounds      = viewport.getBoundsNoRotate(true);
             topleft     = this.viewport.pixelFromPointNoRotate(bounds.getTopLeft(), false);
             bottomright = this.viewport.pixelFromPointNoRotate(bounds.getBottomRight(), false)
                 .minus( this.totalBorderWidths );

src/tiledimage.js

@@ -795,6 +795,7 @@ function updateViewport( tiledImage ) {
         levelOpacity,
         levelVisibility;
 
+    viewportBounds = viewportBounds.getBoundingBox();
     viewportBounds.x -= tiledImage._xSpring.current.value;
     viewportBounds.y -= tiledImage._ySpring.current.value;
 
@@ -804,18 +805,6 @@ function updateViewport( tiledImage ) {
         tile.beingDrawn = false;
     }
 
-    //Change bounds for rotation
-    if (degrees === 90 || degrees === 270) {
-        viewportBounds = viewportBounds.rotate( degrees );
-    } else if (degrees !== 0 && degrees !== 180) {
-        // This is just an approximation.
-        var orthBounds = viewportBounds.rotate(90);
-        viewportBounds.x -= orthBounds.width / 2;
-        viewportBounds.y -= orthBounds.height / 2;
-        viewportBounds.width += orthBounds.width;
-        viewportBounds.height += orthBounds.height;
-    }
-
     var viewportTL = viewportBounds.getTopLeft();
     var viewportBR = viewportBounds.getBottomRight();
 

src/viewer.js

@@ -2981,11 +2981,13 @@ function updateOnce( viewer ) {
         if ( !containerSize.equals( THIS[ viewer.hash ].prevContainerSize ) ) {
             if ( viewer.preserveImageSizeOnResize ) {
                 var prevContainerSize = THIS[ viewer.hash ].prevContainerSize;
-                var bounds = viewer.viewport.getBounds(true);
+                var bounds = viewer.viewport.getBoundsNoRotate(true);
                 var deltaX = (containerSize.x - prevContainerSize.x);
                 var deltaY = (containerSize.y - prevContainerSize.y);
-                var viewportDiff = viewer.viewport.deltaPointsFromPixels(new OpenSeadragon.Point(deltaX, deltaY), true);
+                var viewportDiff = viewer.viewport.deltaPointsFromPixels(
-                viewer.viewport.resize(new OpenSeadragon.Point(containerSize.x, containerSize.y), false);
+                    new $.Point(deltaX, deltaY), true);
+                viewer.viewport.resize(
+                    new $.Point(containerSize.x, containerSize.y), false);
 
                 // Keep the center of the image in the center and just adjust the amount of image shown
                 bounds.width += viewportDiff.x;
@@ -2996,7 +2998,7 @@ function updateOnce( viewer ) {
             }
             else {
                 // maintain image position
-                var oldBounds = viewer.viewport.getBounds();
+                var oldBounds = viewer.viewport.getBoundsNoRotate();
                 var oldCenter = viewer.viewport.getCenter();
                 resizeViewportAndRecenter(viewer, containerSize, oldBounds, oldCenter);
             }

src/viewport.js

@@ -237,6 +237,17 @@ $.Viewport.prototype = {
      * @returns {OpenSeadragon.Rect} The home bounds in vewport coordinates.
      */
     getHomeBounds: function() {
+        return this.getHomeBoundsNoRotate().rotate(-this.getRotation());
+    },
+
+    /**
+     * Returns the home bounds in viewport coordinates.
+     * This method ignores the viewport rotation. Use
+     * {@link OpenSeadragon.Viewport#getHomeBounds} to take it into account.
+     * @function
+     * @returns {OpenSeadragon.Rect} The home bounds in vewport coordinates.
+     */
+    getHomeBoundsNoRotate: function() {
         var center = this._contentBounds.getCenter();
         var width  = 1.0 / this.getHomeZoom();
         var height = width / this.getAspectRatio();
@@ -353,9 +364,21 @@ $.Viewport.prototype = {
      * @returns {OpenSeadragon.Rect} The location you are zoomed/panned to, in viewport coordinates.
      */
     getBounds: function(current) {
-        var center = this.getCenter( current ),
+        return this.getBoundsNoRotate(current).rotate(-this.getRotation());
-            width  = 1.0 / this.getZoom( current ),
+    },
-            height = width / this.getAspectRatio();
+
+    /**
+     * Returns the bounds of the visible area in viewport coordinates.
+     * This method ignores the viewport rotation. Use
+     * {@link OpenSeadragon.Viewport#getBounds} to take it into account.
+     * @function
+     * @param {Boolean} current - Pass true for the current location; defaults to false (target location).
+     * @returns {OpenSeadragon.Rect} The location you are zoomed/panned to, in viewport coordinates.
+     */
+    getBoundsNoRotate: function(current) {
+        var center = this.getCenter(current);
+        var width  = 1.0 / this.getZoom(current);
+        var height = width / this.getAspectRatio();
 
         return new $.Rect(
             center.x - (width / 2.0),
@@ -372,7 +395,18 @@ $.Viewport.prototype = {
      * including the space taken by margins, in viewport coordinates.
      */
     getBoundsWithMargins: function(current) {
-        var bounds = this.getBounds(current);
+        return this.getBoundsNoRotateWithMargins(current).rotate(
+            -this.getRotation(), this.getCenter(current));
+    },
+
+    /**
+     * @function
+     * @param {Boolean} current - Pass true for the current location; defaults to false (target location).
+     * @returns {OpenSeadragon.Rect} The location you are zoomed/panned to,
+     * including the space taken by margins, in viewport coordinates.
+     */
+    getBoundsNoRotateWithMargins: function(current) {
+        var bounds = this.getBoundsNoRotate(current);
         var factor = this._containerInnerSize.x * this.getZoom(current);
         bounds.x -= this._margins.left / factor;
         bounds.y -= this._margins.top / factor;
@@ -538,7 +572,7 @@ $.Viewport.prototype = {
             this.zoomTo( constrainedZoom, this.zoomPoint, immediately );
         }
 
-        bounds = this.getBounds();
+        bounds = this.getBoundsNoRotate();
 
         constrainedBounds = this._applyBoundaryConstraints( bounds, immediately );
 
@@ -571,26 +605,25 @@ $.Viewport.prototype = {
 
         var aspect = this.getAspectRatio();
         var center = bounds.getCenter();
+
+        // Compute width and height of bounding box.
         var newBounds = new $.Rect(
             bounds.x,
             bounds.y,
             bounds.width,
-            bounds.height
+            bounds.height,
-        );
+            bounds.degrees + this.getRotation())
+            .getBoundingBox();
 
         if (newBounds.getAspectRatio() >= aspect) {
-            newBounds.height = bounds.width / aspect;
+            newBounds.height = newBounds.width / aspect;
-            newBounds.y      = center.y - newBounds.height / 2;
         } else {
-            newBounds.width = bounds.height * aspect;
+            newBounds.width = newBounds.height * aspect;
-            newBounds.x     = center.x - newBounds.width / 2;
         }
 
-        this.panTo( this.getCenter( true ), true );
+        // Compute x and y from width, height and center position
-        this.zoomTo( this.getZoom( true ), null, true );
+        newBounds.x = center.x - newBounds.width / 2;
-
+        newBounds.y = center.y - newBounds.height / 2;
-        var oldBounds = this.getBounds();
-        var oldZoom   = this.getZoom();
         var newZoom = 1.0 / newBounds.width;
 
         if (constraints) {
@@ -617,21 +650,21 @@ $.Viewport.prototype = {
             return this.zoomTo(newZoom, null, true);
         }
 
+        this.panTo(this.getCenter(true), true);
+        this.zoomTo(this.getZoom(true), null, true);
+
+        var oldBounds = this.getBounds();
+        var oldZoom   = this.getZoom();
+
         if (Math.abs(newZoom - oldZoom) < 0.00000001 ||
                 Math.abs(newBounds.width - oldBounds.width) < 0.00000001) {
             return this.panTo(center, immediately);
         }
 
-        var referencePoint = oldBounds.getTopLeft().times(
+        newBounds = newBounds.rotate(-this.getRotation());
-            this._containerInnerSize.x / oldBounds.width
+        var referencePoint = newBounds.getTopLeft().divide(newBounds.width)
-        ).minus(
+            .minus(oldBounds.getTopLeft().divide(oldBounds.width))
-            newBounds.getTopLeft().times(
+            .divide(1 / newBounds.width - 1 / oldBounds.width);
-                this._containerInnerSize.x / newBounds.width
-            )
-        ).divide(
-            this._containerInnerSize.x / oldBounds.width -
-            this._containerInnerSize.x / newBounds.width
-        );
 
         return this.zoomTo(newZoom, referencePoint, immediately);
     },
@@ -754,7 +787,12 @@ $.Viewport.prototype = {
     },
 
     /**
+     * Zooms to the specified zoom level
      * @function
+     * @param {Number} zoom The zoom level to zoom to.
+     * @param {OpenSeadragon.Point} [refPoint] The point which will stay at
+     * the same screen location. Defaults to the viewport center.
+     * @param {Boolean} [immediately=false]
      * @return {OpenSeadragon.Viewport} Chainable.
      * @fires OpenSeadragon.Viewer.event:zoom
      */
@@ -844,7 +882,7 @@ $.Viewport.prototype = {
      * @fires OpenSeadragon.Viewer.event:resize
      */
     resize: function( newContainerSize, maintain ) {
-        var oldBounds = this.getBounds(),
+        var oldBounds = this.getBoundsNoRotate(),
             newBounds = oldBounds,
             widthDeltaFactor;
 
@@ -996,7 +1034,8 @@ $.Viewport.prototype = {
      * @returns {OpenSeadragon.Point}
      */
     pixelFromPointNoRotate: function(point, current) {
-        return this._pixelFromPointNoRotate(point, this.getBounds(current));
+        return this._pixelFromPointNoRotate(
+            point, this.getBoundsNoRotate(current));
     },
 
     /**
@@ -1007,7 +1046,7 @@ $.Viewport.prototype = {
      * @returns {OpenSeadragon.Point}
      */
     pixelFromPoint: function(point, current) {
-        return this._pixelFromPoint(point, this.getBounds(current));
+        return this._pixelFromPoint(point, this.getBoundsNoRotate(current));
     },
 
     // private
@@ -1038,7 +1077,7 @@ $.Viewport.prototype = {
      * @returns {OpenSeadragon.Point}
      */
     pointFromPixelNoRotate: function(pixel, current) {
-        var bounds = this.getBounds( current );
+        var bounds = this.getBoundsNoRotate(current);
         return pixel.minus(
             new $.Point(this._margins.left, this._margins.top)
         ).divide(

test/modules/viewport.js

@@ -5,6 +5,7 @@
     var VIEWER_ID = "example";
     var PREFIX_URL = "/build/openseadragon/images/";
     var SPRING_STIFFNESS = 100; // Faster animation = faster tests
+    var EPSILON = 0.0000000001;
 
      module("viewport", {
         setup: function () {
@@ -218,7 +219,27 @@
         });
     });
 
-    asyncTest('getHomeBoundsWithRotation', function() {
+    asyncTest('getHomeBoundsNoRotate with rotation', function() {
+        function openHandler() {
+            viewer.removeHandler('open', openHandler);
+            var viewport = viewer.viewport;
+            viewport.setRotation(-675);
+            Util.assertRectangleEquals(
+                viewport.getHomeBoundsNoRotate(),
+                new OpenSeadragon.Rect(
+                    (1 - Math.sqrt(2)) / 2,
+                    (1 - Math.sqrt(2)) / 2,
+                    Math.sqrt(2),
+                    Math.sqrt(2)),
+                0.00000001,
+                "Test getHomeBoundsNoRotate with degrees = -675");
+            start();
+        }
+        viewer.addHandler('open', openHandler);
+        viewer.open(DZI_PATH);
+    });
+
+    asyncTest('getHomeBounds with rotation', function() {
         function openHandler() {
             viewer.removeHandler('open', openHandler);
             var viewport = viewer.viewport;
@@ -226,10 +247,11 @@
             Util.assertRectangleEquals(
                 viewport.getHomeBounds(),
                 new OpenSeadragon.Rect(
-                    (1 - Math.sqrt(2)) / 2,
+                    0.5,
-                    (1 - Math.sqrt(2)) / 2,
+                    -0.5,
                     Math.sqrt(2),
-                    Math.sqrt(2)),
+                    Math.sqrt(2),
+                    45),
                 0.00000001,
                 "Test getHomeBounds with degrees = -675");
             start();
@@ -420,6 +442,33 @@
         new OpenSeadragon.Rect(-0.3, -0.3, 0.5, 0.5)
     ];
 
+    var expectedRectsFitBoundsWithRotation = [
+        new OpenSeadragon.Rect(
+            0.25,
+            -1,
+            Math.sqrt(0.125) + Math.sqrt(0.5),
+            Math.sqrt(0.125) + Math.sqrt(0.5),
+            45),
+        new OpenSeadragon.Rect(
+            0.75,
+            -0.25,
+            Math.sqrt(0.125) + Math.sqrt(8 / 25),
+            Math.sqrt(0.125) + Math.sqrt(8 / 25),
+            45),
+        new OpenSeadragon.Rect(
+            1,
+            0.5,
+            Math.sqrt(0.125) * 2,
+            Math.sqrt(0.125) * 2,
+            45),
+        new OpenSeadragon.Rect(
+            -0.05,
+            -0.55,
+            Math.sqrt(0.125) * 2,
+            Math.sqrt(0.125) * 2,
+            45)
+    ];
+
     var expectedRectsFitBoundsWithConstraints = [
         new OpenSeadragon.Rect(-0.25, -0.5, 1, 1),
         new OpenSeadragon.Rect(0.35, 0, 0.8, 0.8),
@@ -447,6 +496,28 @@
         viewer.open(DZI_PATH);
     });
 
+    asyncTest('fitBounds with viewport rotation', function(){
+        var openHandler = function(event) {
+            viewer.removeHandler('open', openHandler);
+            var viewport = viewer.viewport;
+            viewport.setRotation(45);
+
+            for(var i = 0; i < testRectsFitBounds.length; i++){
+                var rect = testRectsFitBounds[i];
+                viewport.fitBounds(rect, true);
+                Util.assertRectangleEquals(
+                    viewport.getBounds(),
+                    expectedRectsFitBoundsWithRotation[i],
+                    EPSILON,
+                    "Fit bounds correctly."
+                );
+            }
+            start();
+        };
+        viewer.addHandler('open', openHandler);
+        viewer.open(DZI_PATH);
+    });
+
     asyncTest('fitBoundsWithConstraints', function(){
         var openHandler = function(event) {
             viewer.removeHandler('open', openHandler);