Fix viewer.addOverlay and Overlay.getBounds

src/overlay.js

@@ -383,9 +383,9 @@
             var width = this.width;
             var height = this.height;
             if (width === null || height === null) {
-                $.console.assert(viewport, 'The viewport must be specified to' +
+                $.console.assert(!viewport, 'The viewport must be specified to' +
                     ' get the bounds of a not entirely scaling overlay');
-                var size = viewport.deltaPointsFromPixels(this.size, true);
+                var size = viewport.deltaPointsFromPixelsNoRotate(this.size, true);
                 if (width === null) {
                     width = size.x;
                 }
@@ -393,8 +393,9 @@
                     height = size.y;
                 }
             }
-            return new $.Rect(
+            var location = this.location.clone();
-                this.location.x, this.location.y, width, height);
+            this.adjust(location, new $.Point(width, height));
+            return new $.Rect(location.x, location.y, width, height);
         }
     };
 

src/viewer.js

@@ -2201,32 +2201,23 @@ function getOverlayObject( viewer, overlay ) {
     }
 
     var location = overlay.location;
+    var width = overlay.width;
+    var height = overlay.height;
     if (!location) {
-        if ( overlay.width && overlay.height ) {
+        var x = overlay.x;
-            location = overlay.px !== undefined ?
+        var y = overlay.y;
-                viewer.viewport.imageToViewportRectangle( new $.Rect(
+        if (overlay.px !== undefined) {
+            var rect = viewer.viewport.imageToViewportRectangle(new $.Rect(
                 overlay.px,
                 overlay.py,
-                    overlay.width,
+                width || 0,
-                    overlay.height
+                height || 0));
-                ) ) :
+            x = rect.x;
-                new $.Rect(
+            y = rect.y;
-                    overlay.x,
+            width = width !== undefined ? rect.width : undefined;
-                    overlay.y,
+            height = height !== undefined ? rect.height : undefined;
-                    overlay.width,
-                    overlay.height
-                );
-        } else {
-            location = overlay.px !== undefined ?
-                viewer.viewport.imageToViewportCoordinates( new $.Point(
-                    overlay.px,
-                    overlay.py
-                ) ) :
-                new $.Point(
-                    overlay.x,
-                    overlay.y
-                );
         }
+        location = new $.Point(x, y);
     }
 
     var placement = overlay.placement;
@@ -2240,8 +2231,8 @@ function getOverlayObject( viewer, overlay ) {
         placement: placement,
         onDraw: overlay.onDraw,
         checkResize: overlay.checkResize,
-        width: overlay.width,
+        width: width,
-        height: overlay.height,
+        height: height,
         rotationMode: overlay.rotationMode
     });
 }

test/modules/overlays.js

@@ -588,4 +588,161 @@
         });
     });
 
+    // ----------
+    asyncTest('Overlay scaled horizontally only', function() {
+        viewer = OpenSeadragon({
+            id: 'example-overlays',
+            prefixUrl: '/build/openseadragon/images/',
+            tileSources: '/test/data/testpattern.dzi',
+            springStiffness: 100 // Faster animation = faster tests
+        });
+
+        viewer.addHandler('open', function() {
+            viewer.addOverlay({
+                id: "horizontally-scaled-overlay",
+                x: 0,
+                y: 0,
+                width: 1
+            });
+
+            var width = $("#horizontally-scaled-overlay").width();
+            var height = 100;
+            var zoom = 1.1;
+            $("#horizontally-scaled-overlay").get(0).style.height = height + "px";
+
+            viewer.viewport.zoomBy(zoom);
+
+            waitForViewer(function() {
+                var newWidth = $("#horizontally-scaled-overlay").width();
+                var newHeight = $("#horizontally-scaled-overlay").height();
+                equal(newWidth, width * zoom, "Width should be scaled.");
+                equal(newHeight, height, "Height should not be scaled.");
+
+                start();
+            });
+        });
+    });
+
+    // ----------
+    asyncTest('Overlay scaled vertically only', function() {
+        viewer = OpenSeadragon({
+            id: 'example-overlays',
+            prefixUrl: '/build/openseadragon/images/',
+            tileSources: '/test/data/testpattern.dzi',
+            springStiffness: 100 // Faster animation = faster tests
+        });
+
+        viewer.addHandler('open', function() {
+            viewer.addOverlay({
+                id: "vertically-scaled-overlay",
+                x: 0,
+                y: 0,
+                height: 1
+            });
+
+            var width = 100;
+            var height = $("#vertically-scaled-overlay").height();
+            var zoom = 1.1;
+            $("#vertically-scaled-overlay").get(0).style.width = width + "px";
+
+            viewer.viewport.zoomBy(zoom);
+
+            waitForViewer(function() {
+                var newWidth = $("#vertically-scaled-overlay").width();
+                var newHeight = $("#vertically-scaled-overlay").height();
+                equal(newWidth, width, "Width should not be scaled.");
+                equal(newHeight, height * zoom, "Height should be scaled.");
+
+                start();
+            });
+        });
+    });
+
+    asyncTest('Overlay.getBounds', function() {
+        viewer = OpenSeadragon({
+            id: 'example-overlays',
+            prefixUrl: '/build/openseadragon/images/',
+            tileSources: '/test/data/testpattern.dzi',
+            springStiffness: 100 // Faster animation = faster tests
+        });
+
+        viewer.addHandler('open', function() {
+            viewer.addOverlay({
+                id: "fully-scaled-overlay",
+                x: 1,
+                y: 1,
+                width: 1,
+                height: 1,
+                placement: OpenSeadragon.Placement.BOTTOM_RIGHT
+            });
+            viewer.addOverlay({
+                id: "horizontally-scaled-overlay",
+                x: 0.5,
+                y: 0.5,
+                width: 1,
+                placement: OpenSeadragon.Placement.CENTER
+            });
+            viewer.addOverlay({
+                id: "vertically-scaled-overlay",
+                x: 0,
+                y: 0.5,
+                height: 1,
+                placement: OpenSeadragon.Placement.LEFT
+            });
+            viewer.addOverlay({
+                id: "not-scaled-overlay",
+                x: 1,
+                y: 0,
+                placement: OpenSeadragon.Placement.TOP_RIGHT
+            });
+
+            var notScaledWidth = 100;
+            var notScaledHeight = 100;
+            $("#horizontally-scaled-overlay").get(0).style.height = notScaledHeight + "px";
+            $("#vertically-scaled-overlay").get(0).style.width = notScaledWidth + "px";
+            $("#not-scaled-overlay").get(0).style.width = notScaledWidth + "px";
+            $("#not-scaled-overlay").get(0).style.height = notScaledHeight + "px";
+
+            var notScaledSize = viewer.viewport.deltaPointsFromPixelsNoRotate(
+                new OpenSeadragon.Point(notScaledWidth, notScaledHeight));
+
+            // Force refresh to takes new dimensions into account.
+            viewer._drawOverlays();
+
+            var actualBounds = viewer.getOverlayById("fully-scaled-overlay")
+                .getBounds();
+            var expectedBounds = new OpenSeadragon.Rect(0, 0, 1, 1);
+            ok(expectedBounds.equals(actualBounds),
+                "The fully scaled overlay should have bounds " +
+                expectedBounds.toString() + " but found " + actualBounds);
+
+
+            actualBounds = viewer.getOverlayById("horizontally-scaled-overlay")
+                .getBounds(viewer.viewport);
+            expectedBounds = new OpenSeadragon.Rect(
+                0, 0.5 - notScaledSize.y / 2, 1, notScaledSize.y);
+            ok(expectedBounds.equals(actualBounds),
+                "The horizontally scaled overlay should have bounds " +
+                expectedBounds.toString() + " but found " + actualBounds);
+
+            actualBounds = viewer.getOverlayById("vertically-scaled-overlay")
+                .getBounds(viewer.viewport);
+            expectedBounds = new OpenSeadragon.Rect(
+                0, 0, notScaledSize.x, 1);
+            ok(expectedBounds.equals(actualBounds),
+                "The vertically scaled overlay should have bounds " +
+                expectedBounds.toString() + " but found " + actualBounds);
+
+            actualBounds = viewer.getOverlayById("not-scaled-overlay")
+                .getBounds(viewer.viewport);
+            expectedBounds = new OpenSeadragon.Rect(
+                1 - notScaledSize.x, 0, notScaledSize.x, notScaledSize.y);
+            ok(expectedBounds.equals(actualBounds),
+                "The not scaled overlay should have bounds " +
+                expectedBounds.toString() + " but found " + actualBounds);
+
+            start();
+        });
+    });
+
 })();