Add scaleWidth and scaleHeight options to overlays.

changelog.txt

@@ -30,6 +30,7 @@ OPENSEADRAGON CHANGELOG
 * Fixed issue causing HTML pages to jump unwantedly to the reference strip upon loading (#872)
 * Added addOnceHandler method to EventSource (#887)
 * Added TiledImage.fitBounds method (#888)
+* Added scaledWidth and scaleHeight options to Rect overlays to allow to scale in only one dimension.
 
 2.1.0:
 

src/overlay.js

@@ -75,6 +75,12 @@
      * check the size of the overlay everytime it is drawn when using a
      * {@link OpenSeadragon.Point} as options.location. It will improve
      * performances but will cause a misalignment if the overlay size changes.
+     * @param {Boolean} [options.scaleWidth=true] Whether the width of the
+     * overlay should be adjusted when the zoom changes when using a
+     * {@link OpenSeadragon.Rect} as options.location
+     * @param {Boolean} [options.scaleHeight=true] Whether the height of the
+     * overlay should be adjusted when the zoom changes when using a
+     * {@link OpenSeadragon.Rect} as options.location
      */
     $.Overlay = function(element, location, placement) {
 
@@ -105,29 +111,35 @@
             options.location.x,
             options.location.y,
             options.location.width,
-            options.location.height
+            options.location.height);
-        );
+
-        this.position   = new $.Point(
+        // this.position is never read by this class but is kept for backward
-            options.location.x,
+        // compatibility
-            options.location.y
+        this.position = this.bounds.getTopLeft();
-        );
+
-        this.size       = new $.Point(
+        // this.size is only used by PointOverlay with options.checkResize === false
-            options.location.width,
+        this.size = this.bounds.getSize();
-            options.location.height
+
-        );
         this.style = options.element.style;
-        // rects are always top-left
+
+        // rects are always top-left (RectOverlays don't use placement)
         this.placement = options.location instanceof $.Point ?
             options.placement : $.Placement.TOP_LEFT;
         this.onDraw = options.onDraw;
         this.checkResize = options.checkResize === undefined ?
             true : options.checkResize;
+        this.scaleWidth = options.scaleWidth === undefined ?
+            true : options.scaleWidth;
+        this.scaleHeight = options.scaleHeight === undefined ?
+            true : options.scaleHeight;
     };
 
     /** @lends OpenSeadragon.Overlay.prototype */
     $.Overlay.prototype = {
 
         /**
+         * Internal function to adjust the position of a PointOverlay
+         * depending on it size and anchor.
          * @function
          * @param {OpenSeadragon.Point} position
          * @param {OpenSeadragon.Point} size
@@ -153,8 +165,8 @@
          * @function
          */
         destroy: function() {
-            var element = this.element,
+            var element = this.element;
-                style   = this.style;
+            var style = this.style;
 
             if (element.parentNode) {
                 element.parentNode.removeChild(element);
@@ -178,9 +190,13 @@
             style.position = "";
 
             if (this.scales) {
+                if (this.scaleWidth) {
                     style.width = "";
+                }
+                if (this.scaleHeight) {
                     style.height = "";
                 }
+            }
         },
 
         /**
@@ -188,18 +204,8 @@
          * @param {Element} container
          */
         drawHTML: function(container, viewport) {
-            var element = this.element,
+            var element = this.element;
-                style   = this.style,
+            if (element.parentNode !== container) {
-                scales  = this.scales,
-                degrees  = viewport.degrees,
-                position = viewport.pixelFromPoint(
-                    this.bounds.getTopLeft(),
-                    true
-                ),
-                size,
-                overlayCenter;
-
-            if ( element.parentNode != container ) {
                 //save the source parent for later if we need it
                 element.prevElementParent = element.parentNode;
                 element.prevNextSibling = element.nextSibling;
@@ -207,67 +213,65 @@
                 this.size = $.getElementSize(element);
             }
 
-            if ( scales ) {
+            var positionAndSize = this.scales ?
-                size = viewport.deltaPixelsFromPoints(
+                this._getRectOverlayPositionAndSize(viewport) :
-                    this.bounds.getSize(),
+                this._getPointOverlayPositionAndSize(viewport);
-                    true
-                );
-            } else if ( this.checkResize ) {
-                size = $.getElementSize( element );
-            } else {
-                size = this.size;
-            }
 
-            this.position = position;
+            var position = this.position = positionAndSize.position;
-            this.size     = size;
+            var size = this.size = positionAndSize.size;
-
-            this.adjust( position, size );
 
             position = position.apply(Math.round);
             size = size.apply(Math.round);
 
-            // rotate the position of the overlay
-            // TODO only rotate overlays if in canvas mode
-            // TODO replace the size rotation with CSS3 transforms
-            // TODO add an option to overlays to not rotate with the image
-            // Currently only rotates position and size
-            if( degrees !== 0 && this.scales ) {
-                overlayCenter = new $.Point( size.x / 2, size.y / 2 );
-
-                var drawerCenter = new $.Point(
-                    viewport.viewer.drawer.canvas.width / 2,
-                    viewport.viewer.drawer.canvas.height / 2
-                );
-                position = position.plus( overlayCenter ).rotate(
-                    degrees,
-                    drawerCenter
-                ).minus( overlayCenter );
-
-                size = size.rotate( degrees, new $.Point( 0, 0 ) );
-                size = new $.Point( Math.abs( size.x ), Math.abs( size.y ) );
-            }
-
             // call the onDraw callback if it exists to allow one to overwrite
             // the drawing/positioning/sizing of the overlay
             if (this.onDraw) {
-                this.onDraw( position, size, element );
+                this.onDraw(position, size, this.element);
             } else {
+                var style = this.style;
                 style.left = position.x + "px";
                 style.top = position.y + "px";
+                if (this.scales) {
+                    if (this.scaleWidth) {
+                        style.width = size.x + "px";
+                    }
+                    if (this.scaleHeight) {
+                        style.height = size.y + "px";
+                    }
+                }
                 style.position = "absolute";
 
-                if (style.display != 'none') {
+                if (style.display !== 'none') {
                     style.display = 'block';
                 }
-
-                if ( scales ) {
-                    style.width  = size.x + "px";
-                    style.height = size.y + "px";
-                }
             }
         },
 
+        // private
+        _getRectOverlayPositionAndSize: function(viewport) {
+            return {
+                position: viewport.pixelFromPoint(
+                    this.bounds.getTopLeft(), true),
+                size: viewport.deltaPixelsFromPoints(
+                    this.bounds.getSize(), true)
+            };
+        },
+
+        // private
+        _getPointOverlayPositionAndSize: function(viewport) {
+            var element = this.element;
+            var position = viewport.pixelFromPoint(
+                this.bounds.getTopLeft(), true);
+            var size = this.checkResize ? $.getElementSize(element) : this.size;
+            this.adjust(position, size);
+            return {
+                position: position,
+                size: size
+            };
+        },
+
         /**
+         * Changes the location and placement of the overlay.
          * @function
          * @param {OpenSeadragon.Point|OpenSeadragon.Rect} location
          * @param {OpenSeadragon.Placement} position
@@ -278,8 +282,7 @@
                 location.x,
                 location.y,
                 location.width,
-                location.height
+                location.height);
-            );
             // rects are always top-left
             this.placement = location instanceof $.Point ?
                 placement : $.Placement.TOP_LEFT;

src/viewer.js

@@ -1788,7 +1788,9 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
      * is closed which include when changing page.
      * @method
      * @param {Element|String|Object} element - A reference to an element or an id for
-     *      the element which will be overlayed. Or an Object specifying the configuration for the overlay
+     *      the element which will be overlayed. Or an Object specifying the configuration for the overlay.
+     *      If using an object, see {@link OpenSeadragon.Overlay} for a list of
+     *      all available options.
      * @param {OpenSeadragon.Point|OpenSeadragon.Rect} location - The point or
      *      rectangle which will be overlayed. This is a viewport relative location.
      * @param {OpenSeadragon.Placement} placement - The position of the
@@ -2237,7 +2239,9 @@ function getOverlayObject( viewer, overlay ) {
         location: location,
         placement: placement,
         onDraw: overlay.onDraw,
-        checkResize: overlay.checkResize
+        checkResize: overlay.checkResize,
+        scaleWidth: overlay.scaleWidth,
+        scaleHeight: overlay.scaleHeight
     });
 }
 

test/demo/overlay.html

@@ -14,7 +14,7 @@
 <body>
     <div id="contentDiv" class="openseadragon1"></div>
     <div id="annotation-div">
-        <input type="button" value="Hide Overlay" id="hideOverlay">
+        <input type="button" value="Hide Overlays" id="hideOverlays">
     </div>
 
     <script type="text/javascript">
@@ -22,19 +22,61 @@
         var viewer = OpenSeadragon({
             id: "contentDiv",
             prefixUrl: "../../build/openseadragon/images/",
-            tileSources: "../data/testpattern.dzi"
+            tileSources: "../data/testpattern.dzi",
+            minZoomImageRatio: 0,
+            maxZoomPixelRatio: 10
         });
 
         viewer.addHandler("open", function(event) {
             var elt = document.createElement("div");
+            elt.className = "runtime-overlay";
             elt.style.background = "green";
-            elt.id = "runtime-overlay";
             elt.style.border = "1px solid red";
-            viewer.addOverlay( elt, new OpenSeadragon.Rect(0.2, 0.2, 0.75, 0.75)  );
+            elt.textContent = "Scaled overlay";
+            viewer.addOverlay(elt, new OpenSeadragon.Rect(0.2, 0.2, 0.1, 0.1));
+
+            elt = document.createElement("div");
+            elt.className = "runtime-overlay";
+            elt.style.background = "white";
+            elt.style.border = "3px solid red";
+            elt.style.width = "100px";
+            elt.textContent = "Scaled vertically";
+            viewer.addOverlay({
+                element: elt,
+                location: new OpenSeadragon.Rect(0.6, 0.6, 0.1, 0.1),
+                scaleWidth: false
             });
 
-        $("#hideOverlay").click(function(){
+            elt = document.createElement("div");
-            $("#runtime-overlay").toggle();
+            elt.className = "runtime-overlay";
+            elt.style.background = "white";
+            elt.style.opacity = "0.5";
+            elt.style.border = "1px solid blue";
+            elt.style.height = "100px";
+            elt.textContent = "Scaled horizontally";
+            viewer.addOverlay({
+                element: elt,
+                location: new OpenSeadragon.Rect(0.1, 0.5, 0.1, 0.1),
+                scaleHeight: false
+            });
+
+            elt = document.createElement("div");
+            elt.className = "runtime-overlay";
+            elt.style.background = "white";
+            elt.style.opacity = "0.5";
+            elt.style.border = "1px solid pink";
+            elt.style.width = "100px";
+            elt.style.height = "100px";
+            elt.textContent = "Not scaled, centered in the middle";
+            viewer.addOverlay({
+                element: elt,
+                location: new OpenSeadragon.Point(0.5, 0.5),
+                placement: OpenSeadragon.Placement.CENTER
+            });
+
+        });
+        $("#hideOverlays").click(function(){
+            $(".runtime-overlay").toggle();
         });
 
     </script>