Merge pull request #796 from avandecreme/rotation

Fix coordinates conversion with rotation.

src/drawer.js

@@ -267,13 +267,14 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
     },
 
     /**
-     * Translates from OpenSeadragon viewer rectangle to drawer rectangle.
+     * Scale from OpenSeadragon viewer rectangle to drawer rectangle
+     * (ignoring rotation)
      * @param {OpenSeadragon.Rect} rectangle - The rectangle in viewport coordinate system.
      * @return {OpenSeadragon.Rect} Rectangle in drawer coordinate system.
      */
     viewportToDrawerRectangle: function(rectangle) {
-        var topLeft = this.viewport.pixelFromPoint(rectangle.getTopLeft(), true);
+        var topLeft = this.viewport.pixelFromPointNoRotate(rectangle.getTopLeft(), true);
-        var size = this.viewport.deltaPixelsFromPoints(rectangle.getSize(), true);
+        var size = this.viewport.deltaPixelsFromPointsNoRotate(rectangle.getSize(), true);
 
         return new $.Rect(
             topLeft.x * $.pixelDensityRatio,
@@ -300,15 +301,7 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
         if (this.useCanvas) {
             var context = this._getContext(useSketch);
             scale = scale || 1;
-            // TODO do this in a more performant way
-            // specifically, don't save,rotate,restore every time we draw a tile
-            if( this.viewport.degrees !== 0 ) {
-                this._offsetForRotation( tile, this.viewport.degrees, useSketch );
             tile.drawCanvas(context, drawingHandler, scale, translate);
-                this._restoreRotationChanges( tile, useSketch );
-            } else {
-                tile.drawCanvas( context, drawingHandler, scale, translate );
-            }
         } else {
             tile.drawHTML( this.canvas );
         }
@@ -418,7 +411,7 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
         context.fillStyle = this.debugGridColor;
 
         if ( this.viewport.degrees !== 0 ) {
-            this._offsetForRotation( tile, this.viewport.degrees );
+            this._offsetForRotation(this.viewport.degrees);
         }
 
         context.strokeRect(
@@ -480,7 +473,7 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
         );
 
         if ( this.viewport.degrees !== 0 ) {
-            this._restoreRotationChanges( tile );
+            this._restoreRotationChanges();
         }
         context.restore();
     },
@@ -506,9 +499,9 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
     },
 
     // private
-    _offsetForRotation: function( tile, degrees, useSketch ){
+    _offsetForRotation: function(degrees, useSketch) {
-        var cx = this.canvas.width / 2,
+        var cx = this.canvas.width / 2;
-            cy = this.canvas.height / 2;
+        var cy = this.canvas.height / 2;
 
         var context = this._getContext(useSketch);
         context.save();
@@ -519,7 +512,7 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
     },
 
     // private
-    _restoreRotationChanges: function( tile, useSketch ){
+    _restoreRotationChanges: function(useSketch) {
         var context = this._getContext(useSketch);
         context.restore();
     },

src/navigator.js

@@ -301,8 +301,8 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
 
         if( viewport && this.viewport ) {
             bounds      = viewport.getBounds( true );
-            topleft     = this.viewport.pixelFromPoint( bounds.getTopLeft(), false );
+            topleft     = this.viewport.pixelFromPointNoRotate(bounds.getTopLeft(), false);
-            bottomright = this.viewport.pixelFromPoint( bounds.getBottomRight(), false )
+            bottomright = this.viewport.pixelFromPointNoRotate(bounds.getBottomRight(), false)
                 .minus( this.totalBorderWidths );
 
             //update style for navigator-box

src/point.js

@@ -179,13 +179,45 @@ $.Point.prototype = /** @lends OpenSeadragon.Point.prototype */{
      * From http://stackoverflow.com/questions/4465931/rotate-rectangle-around-a-point
      * @function
      * @param {Number} degress to rotate around the pivot.
-     * @param {OpenSeadragon.Point} pivot Point about which to rotate.
+     * @param {OpenSeadragon.Point} [pivot=(0,0)] Point around which to rotate.
+     * Defaults to the origin.
      * @returns {OpenSeadragon.Point}. A new point representing the point rotated around the specified pivot
      */
     rotate: function (degrees, pivot) {
-        var angle = degrees * Math.PI / 180.0,
+        pivot = pivot || new $.Point(0, 0);
-            x = Math.cos( angle ) * ( this.x - pivot.x ) - Math.sin( angle ) * ( this.y - pivot.y ) + pivot.x,
+        var cos;
-            y = Math.sin( angle ) * ( this.x - pivot.x ) + Math.cos( angle ) * ( this.y - pivot.y ) + pivot.y;
+        var sin;
+        // Avoid float computations when possible
+        if (degrees % 90 === 0) {
+            var d = degrees % 360;
+            if (d < 0) {
+                d += 360;
+            }
+            switch (d) {
+                case 0:
+                    cos = 1;
+                    sin = 0;
+                    break;
+                case 90:
+                    cos = 0;
+                    sin = 1;
+                    break;
+                case 180:
+                    cos = -1;
+                    sin = 0;
+                    break;
+                case 270:
+                    cos = 0;
+                    sin = -1;
+                    break;
+            }
+        } else {
+            var angle = degrees * Math.PI / 180.0;
+            cos = Math.cos(angle);
+            sin = Math.sin(angle);
+        }
+        var x = cos * (this.x - pivot.x) - sin * (this.y - pivot.y) + pivot.x;
+        var y = sin * (this.x - pivot.x) + cos * (this.y - pivot.y) + pivot.y;
         return new $.Point(x, y);
     },
 

src/rectangle.js

@@ -351,7 +351,7 @@ $.Rect.prototype = /** @lends OpenSeadragon.Rect.prototype */{
             (Math.round(this.y * 100) / 100) + "," +
             (Math.round(this.width * 100) / 100) + "x" +
             (Math.round(this.height * 100) / 100) + "," +
-            (Math.round(this.degrees * 100) / 100) + "°" +
+            (Math.round(this.degrees * 100) / 100) + "deg" +
             "]";
     }
 };

src/tiledimage.js

@@ -357,23 +357,23 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
      * @return {OpenSeadragon.Rect} A rect representing the coordinates in the viewport.
      */
     imageToViewportRectangle: function( imageX, imageY, pixelWidth, pixelHeight, current ) {
-        if (imageX instanceof $.Rect) {
+        var rect = imageX;
+        if (rect instanceof $.Rect) {
             //they passed a rect instead of individual components
             current = imageY;
-            pixelWidth = imageX.width;
+        } else {
-            pixelHeight = imageX.height;
+            rect = new $.Rect(imageX, imageY, pixelWidth, pixelHeight);
-            imageY = imageX.y;
-            imageX = imageX.x;
         }
 
-        var coordA = this.imageToViewportCoordinates(imageX, imageY, current);
+        var coordA = this.imageToViewportCoordinates(rect.getTopLeft(), current);
-        var coordB = this._imageToViewportDelta(pixelWidth, pixelHeight, current);
+        var coordB = this._imageToViewportDelta(rect.width, rect.height, current);
 
         return new $.Rect(
             coordA.x,
             coordA.y,
             coordB.x,
-            coordB.y
+            coordB.y,
+            rect.degrees
         );
     },
 
@@ -389,23 +389,23 @@ $.extend($.TiledImage.prototype, $.EventSource.prototype, /** @lends OpenSeadrag
      * @return {OpenSeadragon.Rect} A rect representing the coordinates in the image.
      */
     viewportToImageRectangle: function( viewerX, viewerY, pointWidth, pointHeight, current ) {
+        var rect = viewerX;
         if (viewerX instanceof $.Rect) {
             //they passed a rect instead of individual components
             current = viewerY;
-            pointWidth = viewerX.width;
+        } else {
-            pointHeight = viewerX.height;
+            rect = new $.Rect(viewerX, viewerY, pointWidth, pointHeight);
-            viewerY = viewerX.y;
-            viewerX = viewerX.x;
         }
 
-        var coordA = this.viewportToImageCoordinates(viewerX, viewerY, current);
+        var coordA = this.viewportToImageCoordinates(rect.getTopLeft(), current);
-        var coordB = this._viewportToImageDelta(pointWidth, pointHeight, current);
+        var coordB = this._viewportToImageDelta(rect.width, rect.height, current);
 
         return new $.Rect(
             coordA.x,
             coordA.y,
             coordB.x,
-            coordB.y
+            coordB.y,
+            rect.degrees
         );
     },
 
@@ -652,7 +652,7 @@ function updateViewport( tiledImage ) {
         haveDrawn       = false,
         currentTime     = $.now(),
         viewportBounds  = tiledImage.viewport.getBoundsWithMargins( true ),
-        zeroRatioC      = tiledImage.viewport.deltaPixelsFromPoints(
+        zeroRatioC      = tiledImage.viewport.deltaPixelsFromPointsNoRotate(
             tiledImage.source.getPixelRatio( 0 ),
             true
         ).x * tiledImage._scaleSpring.current.value,
@@ -733,7 +733,7 @@ function updateViewport( tiledImage ) {
         drawLevel = false;
 
         //Avoid calculations for draw if we have already drawn this
-        renderPixelRatioC = tiledImage.viewport.deltaPixelsFromPoints(
+        renderPixelRatioC = tiledImage.viewport.deltaPixelsFromPointsNoRotate(
             tiledImage.source.getPixelRatio( level ),
             true
         ).x * tiledImage._scaleSpring.current.value;
@@ -747,12 +747,12 @@ function updateViewport( tiledImage ) {
         }
 
         //Perform calculations for draw if we haven't drawn this
-        renderPixelRatioT = tiledImage.viewport.deltaPixelsFromPoints(
+        renderPixelRatioT = tiledImage.viewport.deltaPixelsFromPointsNoRotate(
             tiledImage.source.getPixelRatio( level ),
             false
         ).x * tiledImage._scaleSpring.current.value;
 
-        zeroRatioT      = tiledImage.viewport.deltaPixelsFromPoints(
+        zeroRatioT      = tiledImage.viewport.deltaPixelsFromPointsNoRotate(
             tiledImage.source.getPixelRatio(
                 Math.max(
                     tiledImage.source.getClosestLevel( tiledImage.viewport.containerSize ) - 1,
@@ -1050,12 +1050,12 @@ function onTileLoad( tiledImage, tile, time, image, errorMsg ) {
          * @property {string} message - The error message.
          */
         tiledImage.viewer.raiseEvent("tile-load-failed", {tile: tile, tiledImage: tiledImage, time: time, message: errorMsg});
-        if( !tiledImage.debugMode ){
         tile.loading = false;
         tile.exists = false;
         return;
     }
-    } else if ( time < tiledImage.lastResetTime ) {
+
+    if ( time < tiledImage.lastResetTime ) {
         $.console.log( "Ignoring tile %s loaded before reset: %s", tile, tile.url );
         tile.loading = false;
         return;
@@ -1140,10 +1140,10 @@ function positionTile( tile, overlap, viewport, viewportCenter, levelVisibility,
     boundsSize.x *= tiledImage._scaleSpring.current.value;
     boundsSize.y *= tiledImage._scaleSpring.current.value;
 
-    var positionC    = viewport.pixelFromPoint( boundsTL, true ),
+    var positionC    = viewport.pixelFromPointNoRotate(boundsTL, true),
-        positionT    = viewport.pixelFromPoint( boundsTL, false ),
+        positionT    = viewport.pixelFromPointNoRotate(boundsTL, false),
-        sizeC        = viewport.deltaPixelsFromPoints( boundsSize, true ),
+        sizeC        = viewport.deltaPixelsFromPointsNoRotate(boundsSize, true),
-        sizeT        = viewport.deltaPixelsFromPoints( boundsSize, false ),
+        sizeT        = viewport.deltaPixelsFromPointsNoRotate(boundsSize, false),
         tileCenter   = positionT.plus( sizeT.divide( 2 ) ),
         tileDistance = viewportCenter.distanceTo( tileCenter );
 
@@ -1331,6 +1331,10 @@ function drawTiles( tiledImage, lastDrawn ) {
         tiledImage._drawer._clear( true );
     }
 
+    if (tiledImage.viewport.degrees !== 0) {
+        tiledImage._drawer._offsetForRotation(tiledImage.viewport.degrees, useSketch);
+    }
+
     var usedClip = false;
     if ( tiledImage._clip ) {
         tiledImage._drawer.saveContext(useSketch);
@@ -1396,6 +1400,10 @@ function drawTiles( tiledImage, lastDrawn ) {
         tiledImage._drawer.restoreContext( useSketch );
     }
 
+    if (tiledImage.viewport.degrees !== 0) {
+        tiledImage._drawer._restoreRotationChanges(useSketch);
+    }
+
     if ( useSketch ) {
         tiledImage._drawer.blendSketch( tiledImage.opacity, sketchScale, sketchTranslate );
     }

src/viewport.js

@@ -704,7 +704,6 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
             this.centerSpringX.target.value,
             this.centerSpringY.target.value
         );
-        delta = delta.rotate( -this.degrees, new $.Point( 0, 0 ) );
         return this.panTo( center.plus( delta ), immediately );
     },
 
@@ -751,13 +750,8 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
      * @fires OpenSeadragon.Viewer.event:zoom
      */
     zoomBy: function(factor, refPoint, immediately) {
-        if( refPoint instanceof $.Point && !isNaN( refPoint.x ) && !isNaN( refPoint.y ) ) {
+        return this.zoomTo(
-            refPoint = refPoint.rotate(
+            this.zoomSpring.target.value * factor, refPoint, immediately);
-                -this.degrees,
-                new $.Point( this.centerSpringX.target.value, this.centerSpringY.target.value )
-            );
-        }
-        return this.zoomTo( this.zoomSpring.target.value * factor, refPoint, immediately );
     },
 
     /**
@@ -936,40 +930,89 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
         return changed;
     },
 
-
     /**
-     * Convert a delta (translation vector) from pixels coordinates to viewport coordinates
+     * Convert a delta (translation vector) from viewport coordinates to pixels
-     * @function
+     * coordinates. This method does not take rotation into account.
-     * @param {Boolean} current - Pass true for the current location; defaults to false (target location).
+     * Consider using deltaPixelsFromPoints if you need to account for rotation.
+     * @param {OpenSeadragon.Point} deltaPoints - The translation vector to convert.
+     * @param {Boolean} [current=false] - Pass true for the current location;
+     * defaults to false (target location).
+     * @returns {OpenSeadragon.Point}
      */
-    deltaPixelsFromPoints: function( deltaPoints, current ) {
+    deltaPixelsFromPointsNoRotate: function(deltaPoints, current) {
         return deltaPoints.times(
             this._containerInnerSize.x * this.getZoom(current)
         );
     },
 
     /**
-     * Convert a delta (translation vector) from viewport coordinates to pixels coordinates.
+     * Convert a delta (translation vector) from viewport coordinates to pixels
-     * @function
+     * coordinates.
-     * @param {Boolean} current - Pass true for the current location; defaults to false (target location).
+     * @param {OpenSeadragon.Point} deltaPoints - The translation vector to convert.
+     * @param {Boolean} [current=false] - Pass true for the current location;
+     * defaults to false (target location).
+     * @returns {OpenSeadragon.Point}
      */
-    deltaPointsFromPixels: function( deltaPixels, current ) {
+    deltaPixelsFromPoints: function(deltaPoints, current) {
+        return this.deltaPixelsFromPointsNoRotate(
+            deltaPoints.rotate(this.getRotation()),
+            current);
+    },
+
+    /**
+     * Convert a delta (translation vector) from pixels coordinates to viewport
+     * coordinates. This method does not take rotation into account.
+     * Consider using deltaPointsFromPixels if you need to account for rotation.
+     * @param {OpenSeadragon.Point} deltaPixels - The translation vector to convert.
+     * @param {Boolean} [current=false] - Pass true for the current location;
+     * defaults to false (target location).
+     * @returns {OpenSeadragon.Point}
+     */
+    deltaPointsFromPixelsNoRotate: function(deltaPixels, current) {
         return deltaPixels.divide(
             this._containerInnerSize.x * this.getZoom(current)
         );
     },
 
     /**
-     * Convert image pixel coordinates to viewport coordinates.
+     * Convert a delta (translation vector) from pixels coordinates to viewport
-     * @function
+     * coordinates.
-     * @param {Boolean} current - Pass true for the current location; defaults to false (target location).
+     * @param {OpenSeadragon.Point} deltaPixels - The translation vector to convert.
+     * @param {Boolean} [current=false] - Pass true for the current location;
+     * defaults to false (target location).
+     * @returns {OpenSeadragon.Point}
+     */
+    deltaPointsFromPixels: function(deltaPixels, current) {
+        return this.deltaPointsFromPixelsNoRotate(deltaPixels, current)
+            .rotate(-this.getRotation());
+    },
+
+    /**
+     * Convert viewport coordinates to pixels coordinates.
+     * This method does not take rotation into account.
+     * Consider using pixelFromPoint if you need to account for rotation.
+     * @param {OpenSeadragon.Point} point the viewport coordinates
+     * @param {Boolean} [current=false] - Pass true for the current location;
+     * defaults to false (target location).
+     * @returns {OpenSeadragon.Point}
+     */
+    pixelFromPointNoRotate: function(point, current) {
+        return this._pixelFromPointNoRotate(point, this.getBounds(current));
+    },
+
+    /**
+     * Convert viewport coordinates to pixel coordinates.
+     * @param {OpenSeadragon.Point} point the viewport coordinates
+     * @param {Boolean} [current=false] - Pass true for the current location;
+     * defaults to false (target location).
+     * @returns {OpenSeadragon.Point}
      */
     pixelFromPoint: function(point, current) {
         return this._pixelFromPoint(point, this.getBounds(current));
     },
 
     // private
-    _pixelFromPoint: function( point, bounds ) {
+    _pixelFromPointNoRotate: function(point, bounds) {
         return point.minus(
             bounds.getTopLeft()
         ).times(
@@ -979,12 +1022,23 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
         );
     },
 
+    // private
+    _pixelFromPoint: function(point, bounds) {
+        return this._pixelFromPointNoRotate(
+            point.rotate(this.getRotation(), this.getCenter(true)),
+            bounds);
+    },
+
     /**
-     * Convert viewport coordinates to image pixel coordinates.
+     * Convert pixel coordinates to viewport coordinates.
-     * @function
+     * This method does not take rotation into account.
-     * @param {Boolean} current - Pass true for the current location; defaults to false (target location).
+     * Consider using pointFromPixel if you need to account for rotation.
+     * @param {OpenSeadragon.Point} pixel Pixel coordinates
+     * @param {Boolean} [current=false] - Pass true for the current location;
+     * defaults to false (target location).
+     * @returns {OpenSeadragon.Point}
      */
-    pointFromPixel: function( pixel, current ) {
+    pointFromPixelNoRotate: function(pixel, current) {
         var bounds = this.getBounds( current );
         return pixel.minus(
             new $.Point(this._margins.left, this._margins.top)
@@ -995,6 +1049,20 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
         );
     },
 
+    /**
+     * Convert pixel coordinates to viewport coordinates.
+     * @param {OpenSeadragon.Point} pixel Pixel coordinates
+     * @param {Boolean} [current=false] - Pass true for the current location;
+     * defaults to false (target location).
+     * @returns {OpenSeadragon.Point}
+     */
+    pointFromPixel: function(pixel, current) {
+        return this.pointFromPixelNoRotate(pixel, current).rotate(
+            -this.getRotation(),
+            this.getCenter(true)
+        );
+    },
+
     // private
     _viewportToImageDelta: function( viewerX, viewerY ) {
         var scale = this.homeBounds.width;
@@ -1076,28 +1144,20 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
      * @param {Number} pixelHeight the height in pixel of the rectangle.
      */
     imageToViewportRectangle: function(imageX, imageY, pixelWidth, pixelHeight) {
-        var coordA,
+        var rect = imageX;
-            coordB,
+        if (!(rect instanceof $.Rect)) {
-            rect;
+            //they passed individual components instead of a rectangle
-        if( arguments.length == 1 ) {
+            rect = new $.Rect(imageX, imageY, pixelWidth, pixelHeight);
-            //they passed a rectangle instead of individual components
-            rect = imageX;
-            return this.imageToViewportRectangle(
-                rect.x, rect.y, rect.width, rect.height
-            );
         }
 
-        coordA = this.imageToViewportCoordinates(
+        var coordA = this.imageToViewportCoordinates(rect.x, rect.y);
-            imageX, imageY
+        var coordB = this._imageToViewportDelta(rect.width, rect.height);
-        );
-        coordB = this._imageToViewportDelta(
-            pixelWidth, pixelHeight
-        );
         return new $.Rect(
             coordA.x,
             coordA.y,
             coordB.x,
-            coordB.y
+            coordB.y,
+            rect.degrees
         );
     },
 
@@ -1117,24 +1177,20 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
      * @param {Number} pointHeight the height of the rectangle in viewport coordinate system.
      */
     viewportToImageRectangle: function(viewerX, viewerY, pointWidth, pointHeight) {
-        var coordA,
+        var rect = viewerX;
-            coordB,
+        if (!(rect instanceof $.Rect)) {
-            rect;
+            //they passed individual components instead of a rectangle
-        if ( arguments.length == 1 ) {
+            rect = new $.Rect(viewerX, viewerY, pointWidth, pointHeight);
-            //they passed a rectangle instead of individual components
-            rect = viewerX;
-            return this.viewportToImageRectangle(
-                rect.x, rect.y, rect.width, rect.height
-            );
         }
 
-        coordA = this.viewportToImageCoordinates( viewerX, viewerY );
+        var coordA = this.viewportToImageCoordinates(rect.x, rect.y);
-        coordB = this._viewportToImageDelta(pointWidth, pointHeight);
+        var coordB = this._viewportToImageDelta(rect.width, rect.height);
         return new $.Rect(
             coordA.x,
             coordA.y,
             coordB.x,
-            coordB.y
+            coordB.y,
+            rect.degrees
         );
     },
 

test/demo/coordinates.html

@@ -24,38 +24,55 @@
                 <th></th>
                 <th>Window (pixel)</th>
                 <th>Container (pixel)</th>
-                <th>Image 1 - top left (pixel)</th>
-                <th>Image 2 - bottom right (pixel)</th>
                 <th>Viewport (point)</th>
+                <th>Big Image (pixel)</th>
+                <th>Small Image (pixel)</th>
             </tr>
             <tr>
                 <th>Cursor position</th>
-                <td id="windowPosition"></td>
+                <td id="cursorWindowPosition"></td>
-                <td id="containerPosition"></td>
+                <td id="cursorContainerPosition"></td>
-                <td id="image1Position"></td>
+                <td id="cursorViewportPosition"></td>
-                <td id="image2Position"></td>
+                <td id="cursorImage1Position"></td>
-                <td id="viewportPosition"></td>
+                <td id="cursorImage2Position"></td>
+            </tr>
+            <tr>
+                <th>Big Image top left position</th>
+                <td id="image1WindowPosition"></td>
+                <td id="image1ContainerPosition"></td>
+                <td id="image1ViewportPosition"></td>
+                <td id="image1Image1Position"></td>
+                <td id="image1Image2Position"></td>
+            </tr>
+            <tr>
+                <th>Small Image top left position</th>
+                <td id="image2WindowPosition"></td>
+                <td id="image2ContainerPosition"></td>
+                <td id="image2ViewportPosition"></td>
+                <td id="image2Image1Position"></td>
+                <td id="image2Image2Position"></td>
             </tr>
             <tr>
                 <th>Zoom</th>
                 <td>-</td>
                 <td>-</td>
+                <td id="viewportZoom"></td>
                 <td id="image1Zoom"></td>
                 <td id="image2Zoom"></td>
-                <td id="viewportZoom"></td>
             </tr>
         </table>
     </div>
+    <button onclick="rotate();">Rotate</button>
     <script type="text/javascript">
 
         var viewer = OpenSeadragon({
-            // debugMode: true,
+            debugMode: true,
             id: "contentDiv",
             prefixUrl: "../../build/openseadragon/images/",
             tileSources: [{
-                    tileSource: "../data/testpattern.dzi"
+                    tileSource: "../data/testpattern.dzi",
-                },
+                    clip: new OpenSeadragon.Rect(0, 0, 500, 1000)
-                {
+                }, {
                     tileSource: "../data/testpattern.dzi",
                     x: 1,
                     y: 1,
@@ -64,28 +81,29 @@
             ],
             showNavigator: true
         });
+        viewer.addHandler("open", onAnimation);
 
         function pointToString(point) {
             return point.x.toPrecision(4) + "," + point.y.toPrecision(4);
         }
 
-        var onMouseTrackerMove = function (event) {
+        function onMouseTrackerMove(event) {
             var viewerX = event.position.x;
             var viewerY = event.position.y;
             var windowPoint = new OpenSeadragon.Point(viewerX, viewerY);
-            $("#windowPosition").text(pointToString(windowPoint));
+            $("#cursorWindowPosition").text(pointToString(windowPoint));
             var containerPoint = windowPoint.minus(
                     OpenSeadragon.getElementPosition(viewer.element));
-            $("#containerPosition").text(pointToString(containerPoint));
+            $("#cursorContainerPosition").text(pointToString(containerPoint));
             var image1 = viewer.world.getItemAt(0);
             var imagePoint = image1.windowToImageCoordinates(windowPoint);
-            $("#image1Position").text(pointToString(imagePoint));
+            $("#cursorImage1Position").text(pointToString(imagePoint));
             var image2 = viewer.world.getItemAt(1);
             var imagePoint = image2.windowToImageCoordinates(windowPoint);
-            $("#image2Position").text(pointToString(imagePoint));
+            $("#cursorImage2Position").text(pointToString(imagePoint));
             var viewportPoint = viewer.viewport.windowToViewportCoordinates(windowPoint);
-            $("#viewportPosition").text(pointToString(viewportPoint));
+            $("#cursorViewportPosition").text(pointToString(viewportPoint));
-        };
+        }
         mouseTracker = new OpenSeadragon.MouseTracker({
             element: document,
             moveHandler: onMouseTrackerMove
@@ -100,9 +118,40 @@
             var image2 = viewer.world.getItemAt(1);
             var image2Zoom = image2.viewportToImageZoom(viewportZoom);
             $("#image2Zoom").text(image2Zoom.toFixed(3));
+
+            var origin = new OpenSeadragon.Point(0, 0);
+            var image1WindowPoint = image1.imageToWindowCoordinates(origin);
+            $("#image1WindowPosition").text(pointToString(image1WindowPoint));
+            var image1ContainerPoint = image1.imageToViewerElementCoordinates(origin);
+            $("#image1ContainerPosition").text(pointToString(image1ContainerPoint));
+            var image1Image1Position = image1.viewportToImageCoordinates(
+                image1.getBounds(true).getTopLeft());
+            $("#image1Image1Position").text(pointToString(image1Image1Position));
+            var image1Image2Position = image1.viewportToImageCoordinates(
+                image2.getBounds(true).getTopLeft());
+            $("#image1Image2Position").text(pointToString(image1Image2Position));
+            var image1ViewportPoint = image1.imageToViewportCoordinates(origin);
+            $("#image1ViewportPosition").text(pointToString(image1ViewportPoint));
+
+            var image2WindowPoint = image2.imageToWindowCoordinates(origin);
+            $("#image2WindowPosition").text(pointToString(image2WindowPoint));
+            var image2ContainerPoint = image2.imageToViewerElementCoordinates(origin);
+            $("#image2ContainerPosition").text(pointToString(image2ContainerPoint));
+            var image2Image1Position = image2.viewportToImageCoordinates(
+                image1.getBounds(true).getTopLeft());
+            $("#image2Image1Position").text(pointToString(image2Image1Position));
+            var image2Image2Position = image2.viewportToImageCoordinates(
+                image2.getBounds(true).getTopLeft());
+            $("#image2Image2Position").text(pointToString(image2Image2Position));
+            var image2ViewportPoint = image2.imageToViewportCoordinates(origin);
+            $("#image2ViewportPosition").text(pointToString(image2ViewportPoint));
         }
         viewer.addHandler("animation", onAnimation);
 
+        function rotate() {
+            viewer.viewport.setRotation(viewer.viewport.getRotation() + 45);
+            onAnimation();
+        }
     </script>
 </body>
 </html>

test/modules/units.js

@@ -2,6 +2,7 @@
 
 (function () {
     var viewer;
+    var precision = 0.00000001;
 
     module('Units', {
         setup: function () {
@@ -26,8 +27,8 @@
 
 
     function pointEqual(a, b, message) {
-        Util.assessNumericValue(a.x, b.x, 0.00000001, message);
+        Util.assessNumericValue(a.x, b.x, precision, message);
-        Util.assessNumericValue(a.y, b.y, 0.00000001, message);
+        Util.assessNumericValue(a.y, b.y, precision, message);
     }
 
     // Check that f^-1 ( f(x) ) = x
@@ -151,8 +152,6 @@
                 start();
             });
             viewer.viewport.zoomTo(0.8).panTo(new OpenSeadragon.Point(0.1, 0.2));
-
-            start();
         });
 
         viewer.open([{
@@ -167,6 +166,68 @@
     });
 
 
+    // ---------
+    asyncTest('Multiple images coordinates conversion with viewport rotation', function () {
+
+        viewer.addHandler("open", function () {
+            var viewport = viewer.viewport;
+            var tiledImage1 = viewer.world.getItemAt(0);
+            var tiledImage2 = viewer.world.getItemAt(1);
+            var imageWidth = viewer.source.dimensions.x;
+            var imageHeight = viewer.source.dimensions.y;
+
+            var viewerWidth = $(viewer.element).width();
+            var viewerHeight = $(viewer.element).height();
+            var viewerMiddleTop = new OpenSeadragon.Point(viewerWidth / 2, 0);
+            var viewerMiddleBottom = new OpenSeadragon.Point(viewerWidth / 2, viewerHeight);
+
+            var point0_0 = new OpenSeadragon.Point(0, 0);
+            var point = viewport.viewerElementToViewportCoordinates(viewerMiddleTop);
+            pointEqual(point, point0_0, 'When opening, viewer middle top is also viewport 0,0');
+            var image1Pixel = tiledImage1.viewerElementToImageCoordinates(viewerMiddleTop);
+            pointEqual(image1Pixel, point0_0, 'When opening, viewer middle top is also image 1 pixel 0,0');
+            var image2Pixel = tiledImage2.viewerElementToImageCoordinates(viewerMiddleTop);
+            pointEqual(image2Pixel,
+                    new OpenSeadragon.Point(-2 * imageWidth, -2 * imageHeight),
+                    'When opening, viewer middle top is also image 2 pixel -2*imageWidth, -2*imageHeight');
+
+            point = viewport.viewerElementToViewportCoordinates(viewerMiddleBottom);
+            pointEqual(point, new OpenSeadragon.Point(1.5, 1.5),
+                    'Viewer middle bottom has viewport coordinates 1.5,1.5.');
+            image1Pixel = tiledImage1.viewerElementToImageCoordinates(viewerMiddleBottom);
+            pointEqual(image1Pixel,
+                    new OpenSeadragon.Point(imageWidth * 1.5, imageHeight * 1.5),
+                    'Viewer middle bottom has image 1 pixel coordinates imageWidth * 1.5, imageHeight * 1.5');
+            image2Pixel = tiledImage2.viewerElementToImageCoordinates(viewerMiddleBottom);
+            pointEqual(image2Pixel,
+                    new OpenSeadragon.Point(imageWidth, imageHeight),
+                    'Viewer middle bottom has image 2 pixel coordinates imageWidth,imageHeight.');
+
+
+            checkPoint(' after opening');
+            viewer.addHandler('animation-finish', function animationHandler() {
+                viewer.removeHandler('animation-finish', animationHandler);
+                checkPoint(' after zoom and pan');
+
+                //Restore rotation
+                viewer.viewport.setRotation(0);
+                start();
+            });
+            viewer.viewport.zoomTo(0.8).panTo(new OpenSeadragon.Point(0.1, 0.2));
+        });
+
+        viewer.viewport.setRotation(45);
+        viewer.open([{
+                tileSource: "/test/data/testpattern.dzi"
+            }, {
+                tileSource: "/test/data/testpattern.dzi",
+                x: 1,
+                y: 1,
+                width: 0.5
+            }
+        ]);
+    });
+
     // ----------
     asyncTest('ZoomRatio 1 image', function () {
         viewer.addHandler("open", function () {
@@ -188,10 +249,10 @@
                 var expectedViewportZoom = viewport.getZoom(true);
                 var actualImageZoom = viewport.viewportToImageZoom(
                         expectedViewportZoom);
-                equal(actualImageZoom, expectedImageZoom);
+                Util.assessNumericValue(actualImageZoom, expectedImageZoom, precision);
 
                 var actualViewportZoom = viewport.imageToViewportZoom(actualImageZoom);
-                equal(actualViewportZoom, expectedViewportZoom);
+                Util.assessNumericValue(actualViewportZoom, expectedViewportZoom, precision);
             }
 
             checkZoom();
@@ -234,11 +295,11 @@
                 var actualImageZoom = image.viewportToImageZoom(
                         expectedViewportZoom);
                 Util.assessNumericValue(actualImageZoom, expectedImageZoom,
-                        0.00000001);
+                        precision);
 
                 var actualViewportImage1Zoom = image.imageToViewportZoom(actualImageZoom);
                 Util.assessNumericValue(
-                        actualViewportImage1Zoom, expectedViewportZoom, 0.00000001);
+                        actualViewportImage1Zoom, expectedViewportZoom, precision);
             }
 
             checkZoom(image1);