Changelog for #2249

fixed viewport constraint behavior when viewer is rotated

changelog.txt

@@ -15,6 +15,7 @@ OPENSEADRAGON CHANGELOG
 * The viewer now emits before-destroy and destroy events (#2239 @pearcetm)
 * Improved documentation (#2211 @shyamkumaryadav)
 * Fixed: Cropping tiled images with polygons was broken (#2183 @altert)
+* Fixed: Boundary constraints were wrong when the viewport was rotated (#2249 @pearcetm)
 * Fixed: IIIF tile sizes would be calculated wrong on rare occasions (#2206 @filak)
 * Fixed: Disabling buttons only changed their appearance, but they were still clickable (#2187 @pearcetm)
 * Fixed: ImageTileSource produced an error having to do with getTileHashKey (#2190 @Aiosa)

src/viewer.js

@@ -3049,17 +3049,16 @@ function onCanvasDrag( event ) {
                 this.viewport.centerSpringX.target.value += delta.x;
                 this.viewport.centerSpringY.target.value += delta.y;
 
-                var bounds = this.viewport.getBounds();
                 var constrainedBounds = this.viewport.getConstrainedBounds();
 
                 this.viewport.centerSpringX.target.value -= delta.x;
                 this.viewport.centerSpringY.target.value -= delta.y;
 
-                if (bounds.x !== constrainedBounds.x) {
+                if (constrainedBounds.xConstrained) {
                     event.delta.x = 0;
                 }
 
-                if (bounds.y !== constrainedBounds.y) {
+                if (constrainedBounds.yConstrained) {
                     event.delta.y = 0;
                 }
             }

src/viewport.js

@@ -483,7 +483,7 @@ $.Viewport.prototype = {
         );
 
         newZoomPixel = this._pixelFromPoint(this.zoomPoint, bounds);
-        deltaZoomPixels = newZoomPixel.minus( oldZoomPixel );
+        deltaZoomPixels = newZoomPixel.minus( oldZoomPixel ).rotate(-this.getRotation(true));
         deltaZoomPoints = deltaZoomPixels.divide( this._containerInnerSize.x * zoom );
 
         return centerTarget.plus( deltaZoomPoints );
@@ -514,34 +514,37 @@ $.Viewport.prototype = {
      * @param {OpenSeadragon.Rect} bounds
      * @returns {OpenSeadragon.Rect} constrained bounds.
      */
-     _applyBoundaryConstraints: function(bounds) {
-        var newBounds = new $.Rect(
-                bounds.x,
-                bounds.y,
-                bounds.width,
-                bounds.height);
+    _applyBoundaryConstraints: function(bounds) {
+        var newBounds = this.viewportToViewerElementRectangle(bounds).getBoundingBox();
+        var cb = this.viewportToViewerElementRectangle(this._contentBoundsNoRotate).getBoundingBox();
+
+        var xConstrained = false;
+        var yConstrained = false;
 
         if (this.wrapHorizontal) {
             //do nothing
         } else {
             var boundsRight = newBounds.x + newBounds.width;
-            var contentRight = this._contentBoundsNoRotate.x + this._contentBoundsNoRotate.width;
+            var contentRight = cb.x + cb.width;
 
             var horizontalThreshold, leftDx, rightDx;
-            if (newBounds.width > this._contentBoundsNoRotate.width) {
-                horizontalThreshold = this.visibilityRatio * this._contentBoundsNoRotate.width;
+            if (newBounds.width > cb.width) {
+                horizontalThreshold = this.visibilityRatio * cb.width;
             } else {
                 horizontalThreshold = this.visibilityRatio * newBounds.width;
             }
 
-            leftDx = this._contentBoundsNoRotate.x - boundsRight + horizontalThreshold;
+            leftDx = cb.x - boundsRight + horizontalThreshold;
             rightDx = contentRight - newBounds.x - horizontalThreshold;
-            if (horizontalThreshold > this._contentBoundsNoRotate.width) {
+            if (horizontalThreshold > cb.width) {
                 newBounds.x += (leftDx + rightDx) / 2;
+                xConstrained = true;
             } else if (rightDx < 0) {
                 newBounds.x += rightDx;
+                xConstrained = true;
             } else if (leftDx > 0) {
                 newBounds.x += leftDx;
+                xConstrained = true;
             }
 
         }
@@ -550,28 +553,37 @@ $.Viewport.prototype = {
             //do nothing
         } else {
             var boundsBottom = newBounds.y + newBounds.height;
-            var contentBottom = this._contentBoundsNoRotate.y + this._contentBoundsNoRotate.height;
+            var contentBottom = cb.y + cb.height;
 
             var verticalThreshold, topDy, bottomDy;
-            if (newBounds.height > this._contentBoundsNoRotate.height) {
-                verticalThreshold = this.visibilityRatio * this._contentBoundsNoRotate.height;
+            if (newBounds.height > cb.height) {
+                verticalThreshold = this.visibilityRatio * cb.height;
             } else{
                 verticalThreshold = this.visibilityRatio * newBounds.height;
             }
 
-            topDy = this._contentBoundsNoRotate.y - boundsBottom + verticalThreshold;
+            topDy = cb.y - boundsBottom + verticalThreshold;
             bottomDy = contentBottom - newBounds.y - verticalThreshold;
-            if (verticalThreshold > this._contentBoundsNoRotate.height) {
+            if (verticalThreshold > cb.height) {
                 newBounds.y += (topDy + bottomDy) / 2;
+                yConstrained = true;
             } else if (bottomDy < 0) {
                 newBounds.y += bottomDy;
+                yConstrained = true;
             } else if (topDy > 0) {
                 newBounds.y += topDy;
+                yConstrained = true;
             }
 
         }
 
-        return newBounds;
+        var constraintApplied = xConstrained || yConstrained;
+        var newViewportBounds = constraintApplied ? this.viewerElementToViewportRectangle(newBounds) : bounds.clone();
+        newViewportBounds.xConstrained = xConstrained;
+        newViewportBounds.yConstrained = yConstrained;
+        newViewportBounds.constraintApplied = constraintApplied;
+
+        return newViewportBounds;
     },
 
     /**
@@ -605,7 +617,7 @@ $.Viewport.prototype = {
      * @function
      * @param {Boolean} [immediately=false]
      * @returns {OpenSeadragon.Viewport} Chainable.
-     * @fires OpenSeadragon.Viewer.event:constrain
+     * @fires OpenSeadragon.Viewer.event:constrain if constraints were applied
      */
     applyConstraints: function(immediately) {
         var actualZoom = this.getZoom();
@@ -615,17 +627,13 @@ $.Viewport.prototype = {
             this.zoomTo(constrainedZoom, this.zoomPoint, immediately);
         }
 
-        var bounds = this.getBoundsNoRotate();
-        var constrainedBounds = this._applyBoundaryConstraints(bounds);
-        this._raiseConstraintsEvent(immediately);
+        var constrainedBounds = this.getConstrainedBounds(false);
 
-        if (bounds.x !== constrainedBounds.x ||
-            bounds.y !== constrainedBounds.y ||
-            immediately) {
-            this.fitBounds(
-                constrainedBounds.rotate(-this.getRotation(true)),
-                immediately);
+        if(constrainedBounds.constraintApplied){
+            this.fitBounds(constrainedBounds, immediately);
+            this._raiseConstraintsEvent(immediately);
         }
+
         return this;
     },
 
@@ -675,45 +683,51 @@ $.Viewport.prototype = {
         newBounds.y = center.y - newBounds.height / 2;
         var newZoom = 1.0 / newBounds.width;
 
-        if (constraints) {
-            var newBoundsAspectRatio = newBounds.getAspectRatio();
-            var newConstrainedZoom = this._applyZoomConstraints(newZoom);
-
-            if (newZoom !== newConstrainedZoom) {
-                newZoom = newConstrainedZoom;
-                newBounds.width = 1.0 / newZoom;
-                newBounds.x = center.x - newBounds.width / 2;
-                newBounds.height = newBounds.width / newBoundsAspectRatio;
-                newBounds.y = center.y - newBounds.height / 2;
-            }
-
-            newBounds = this._applyBoundaryConstraints(newBounds);
-            center = newBounds.getCenter();
-            this._raiseConstraintsEvent(immediately);
-        }
-
         if (immediately) {
             this.panTo(center, true);
-            return this.zoomTo(newZoom, null, true);
+            this.zoomTo(newZoom, null, true);
+            if(constraints){
+                this.applyConstraints(true);
+            }
+            return this;
         }
 
-        this.panTo(this.getCenter(true), true);
-        this.zoomTo(this.getZoom(true), null, true);
+        var currentCenter = this.getCenter(true);
+        var currentZoom = this.getZoom(true);
+        this.panTo(currentCenter, true);
+        this.zoomTo(currentZoom, null, true);
 
         var oldBounds = this.getBounds();
         var oldZoom   = this.getZoom();
 
         if (oldZoom === 0 || Math.abs(newZoom / oldZoom - 1) < 0.00000001) {
-            this.zoomTo(newZoom, true);
-            return this.panTo(center, immediately);
+            this.zoomTo(newZoom, null, true);
+            this.panTo(center, immediately);
+            if(constraints){
+                this.applyConstraints(false);
+            }
+            return this;
         }
 
-        newBounds = newBounds.rotate(-this.getRotation());
-        var referencePoint = newBounds.getTopLeft().times(newZoom)
-            .minus(oldBounds.getTopLeft().times(oldZoom))
-            .divide(newZoom - oldZoom);
+        if(constraints){
+            this.panTo(center, false);
+            this.zoomTo(newZoom, null, false);
 
-        return this.zoomTo(newZoom, referencePoint, immediately);
+            var constrainedBounds = this.getConstrainedBounds();
+
+            this.panTo(currentCenter, true);
+            this.zoomTo(currentZoom, null, true);
+
+            this.fitBounds(constrainedBounds);
+        } else {
+            var rotatedNewBounds = newBounds.rotate(-this.getRotation());
+            var referencePoint = rotatedNewBounds.getTopLeft().times(newZoom)
+                .minus(oldBounds.getTopLeft().times(oldZoom))
+                .divide(newZoom - oldZoom);
+
+            this.zoomTo(newZoom, referencePoint, immediately);
+        }
+        return this;
     },
 
     /**
@@ -787,7 +801,10 @@ $.Viewport.prototype = {
      * Returns bounds taking constraints into account
      * Added to improve constrained panning
      * @param {Boolean} current - Pass true for the current location; defaults to false (target location).
-     * @returns {OpenSeadragon.Viewport} Chainable.
+     * @returns {OpenSeadragon.Rect} The bounds in viewport coordinates after applying constraints. The returned $.Rect
+     *                               contains additional properties constraintsApplied, xConstrained and yConstrained.
+     *                               These flags indicate whether the viewport bounds were modified by the constraints
+     *                               of the viewer rectangle, and in which dimension(s).
      */
     getConstrainedBounds: function(current) {
         var bounds,

test/demo/fitboundswithconstraints.html

@@ -3,111 +3,163 @@
 <head>
     <title>OpenSeadragon fitBoundsWithConstraints() Demo</title>
     <script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
+    <script type="text/javascript" src='../lib/jquery-1.9.1.min.js'></script>
     <style type="text/css">
 
       .openseadragon1 {
           width: 800px;
-          height: 600px;
+          height: 500px;
+          border:thin black solid;
+          margin-right:20px;
       }
-
-      #highlights li {
-        cursor: pointer;
+      #buttons button{
+        width:10em;
+        text-align:center;
+        margin:5px;
+      }
+      .layout{
+        display:grid;
+        grid-template-columns:auto 1fr;
+        padding:10px;
+      }
+      .method{
+        border:medium gray solid;
+        margin:2px;
+        background-color:rgb(240, 240, 240)
+      }
+      .method.selected{
+        border:medium red solid;
+        background-color: lightgoldenrodyellow;
       }
-
     </style>
 </head>
 <body>
-    <div>
-        Simple demo page to show 'viewport.fitBounds().applyConstraints()' issue.
+    <div class="layout">
+        <div id="contentDiv" class="openseadragon1"></div>
+        <div id="controls">
+            <div>
+                Simple demo page to show viewport.fitBounds() with and without constraints. The viewer
+                is set up with visibilityRatio = 1 and constrainDuringPan = true to clearly demonstrate the
+                constraints.
+            </div>
+
+            <h3>Pick a method to use:</h3>
+            <div>
+                <div class="method selected" data-value="0">
+                    <pre>viewport.fitBounds(bounds); //Ignores constraints</pre>
+                </div>
+                <div class="method" data-value="1">
+                    <pre>viewport.fitBoundsWithConstraints(bounds);</pre>
+                </div>
+                <div class="method" data-value="4">
+                    <pre>viewport.fitBoundsWithConstraints(bounds, true); //immediate</pre>
+                </div>
+                <div class="method" data-value="2">
+                    <pre>//Initially ignore constraints
+viewport.fitBounds(bounds);
+
+//Apply constraints after 1 second delay
+setTimeout(() => viewport.applyConstraints(), 1000);</pre>
+                </div>
+            </div>
+            <button id="rotate">Rotate the viewer</button>
+            <h3>Click to fit overlay bounds:</h3>
+            <div id="buttons"></div>
+            <h4>overlay.getBounds(viewer.viewport):</h4>
+            <pre class="bounds">Pick an overlay above to show the bounds</pre>
+        </div>
     </div>
 
-    <div id="contentDiv" class="openseadragon1"></div>
-    <div id="highlights"></div>
-
-    <select onchange="changeMethod(this.value);">
-        <option value=0>viewport.fitBoundsWithConstraints(bounds);</option>
-        <option value=1>viewport.fitBounds(bounds);</option>
-        <option value=2>viewport.fitBounds(bounds).applyConstraints();</option>
-    </select>
-    <input type="button" value="Go home" onclick="goHome()"/>
 
     <script type="text/javascript">
 
-        var _viewer;
+        var viewer;
         var _fittingMethod = 0;
-
-        var _highlights = [
-            {"queryPoint":[0.13789887359998443,0.43710575899579285], "radius":0.004479581945070337,"text":"Pipe"},
-            {"queryPoint":[0.5923298766583593,0.6461653354541856],   "radius":0.013175241014912752,"text":"Fuel here"},
-            {"queryPoint":[0.43920338711232304,0.7483181389302148],  "radius":0.09222668710438928, "text":"Wheel"},
-            {"queryPoint":[0.07341677959486298,0.9028719921872319],  "radius":0.08996845561083797, "text":"Nothing special"}
-        ];
-
-        var generateUniqueHash = (function() {
-            var counter = 0;
-            return function() {
-                return "openseadragon_" + (counter++);
-            };
-        })();
-
-        var _viewer = OpenSeadragon({
-            element: document.getElementById("contentDiv"),
-            showNavigationControl: false,
+        viewer = window.viewer = OpenSeadragon({
+            id: "contentDiv",
             prefixUrl: "../../build/openseadragon/images/",
-            hash: generateUniqueHash(), //this is only needed if you want to instantiate more than one viewer at a time.
-            tileSources: {
-                Image: {
-                    xmlns:    "http://schemas.microsoft.com/deepzoom/2008",
-                    Url:      'http://cdn.photosynth.net/ps2/19d5cf2b-77ed-439f-ac21-d3046320384c/packet/undistorted/img0043/',
-                    Format:   "jpg",
-                    Overlap:  1,
-                    TileSize: 510,
-                    Size: {
-                        Width:  4592,
-                        Height: 3448
+            tileSources: "../data/testpattern.dzi",
+            minZoomImageRatio: 0,
+            maxZoomPixelRatio: 10,
+            visibilityRatio:1,
+            constrainDuringPan:true,
+        });
+
+        viewer.addHandler("open", function(event) {
+            var elt = document.createElement("div");
+            elt.className = "runtime-overlay";
+            elt.style.background = "green";
+            elt.style.outline = "3px solid red";
+            elt.style.opacity = "0.7";
+            elt.textContent = "Within the image";
+            viewer.addOverlay({
+                element: elt,
+                location: new OpenSeadragon.Rect(0.21, 0.21, 0.099, 0.299),
+                rotationMode: OpenSeadragon.OverlayRotationMode.BOUNDING_BOX
+            });
+
+            elt = document.createElement("div");
+            elt.className = "runtime-overlay";
+            elt.style.background = "white";
+            elt.style.opacity = "0.5";
+            elt.style.outline = "5px solid pink";
+            elt.textContent = "Left edge rectangle";
+            viewer.addOverlay({
+                element: elt,
+                location: new OpenSeadragon.Rect(-0.4, 0.7, 0.7, 0.15)
+            });
+
+            var elt = document.createElement("div");
+            elt.className = "runtime-overlay";
+            elt.style.background = "lightblue";
+            elt.style.outline = "3px solid purple";
+            elt.style.opacity = "0.7";
+            elt.textContent = "Top right square";
+            viewer.addOverlay({
+                element: elt,
+                location: new OpenSeadragon.Rect(0.9, -0.1, 0.2, 0.2),
+                rotationMode: OpenSeadragon.OverlayRotationMode.BOUNDING_BOX
+            });
+
+            viewer.currentOverlays.forEach(overlay=>{
+                var text = $(overlay.element).text();
+                var div=$('<div>').appendTo('#buttons');
+                var buttons=$('<button>').text(text).appendTo(div).on('click',()=>{
+
+                    var bounds = overlay.getBounds(viewer.viewport);
+                    $('.bounds').text(JSON.stringify(bounds,null,2));
+
+                    var _fittingMethod = parseInt($('.method.selected').data('value'));
+
+                    if (_fittingMethod === 0) {
+                        viewer.viewport.fitBounds(bounds, false);
                     }
-                }
-            }
+                    else if (_fittingMethod === 1) {
+                        viewer.viewport.fitBoundsWithConstraints(bounds, false);
+                    }
+                    else if (_fittingMethod === 4) {
+                        viewer.viewport.fitBoundsWithConstraints(bounds, true);
+                    }
+                    else if (_fittingMethod === 2) {
+                        viewer.viewport.fitBounds(bounds, false);
+                        setTimeout(()=>viewer.viewport.applyConstraints(), 1000);
+                    }
+                });
+            })
+
+            viewer.viewport.zoomTo(0.5, null, true);
+
+
         });
-        _viewer.addHandler("open", function() {
-            var str = "<ul>";
-            for (var i=0; i<_highlights.length; ++i) {
-                var highlight = _highlights[i];
-                str += "<li onclick='gotoHighlight("+i+")'>"+highlight.text+"</li>";
-            }
-            str += "</ul>";
-            document.getElementById("highlights").innerHTML = str;
+        $('.method').on('click',function(){
+            $('.method').removeClass('selected');
+            $(this).addClass('selected');
+        })
+        $("#rotate").click(function() {
+            viewer.viewport.setRotation(viewer.viewport.getRotation() - 22.5);
+            $("#degrees").text(viewer.viewport.getRotation() + "deg");
         });
 
-        function gotoHighlight(index) {
-            var highlight = _highlights[index];
-
-            var viewport = _viewer.viewport;
-            var contentSize = viewport.contentSize;
-            var scaling = 1.0 / viewport.viewportToImageZoom(viewport.getZoom());
-            var radius  = highlight.radius*Math.min(contentSize.x, contentSize.y);/*annotation.accurateRadius*scaling;*/
-            var center      = new OpenSeadragon.Point(contentSize.x*highlight.queryPoint[0], contentSize.y*highlight.queryPoint[1]);
-            var bounds = viewport.imageToViewportRectangle(new OpenSeadragon.Rect(center.x-radius, center.y-radius, radius*2, radius*2));
-
-            if (_fittingMethod === 0) {
-                viewport.fitBoundsWithConstraints(bounds, false);
-            }
-            else if (_fittingMethod === 1) {
-                viewport.fitBounds(bounds, false);
-            }
-            else if (_fittingMethod === 2) {
-                viewport.fitBounds(bounds, false).applyConstraints();
-            }
-        }
-
-        function changeMethod(value) {
-            _fittingMethod = parseInt(value, 10);
-        }
-
-        function goHome() {
-            _viewer.viewport.goHome();
-        }
-
     </script>
 </body>
 </html>

test/modules/viewport.js

@@ -539,7 +539,7 @@
             var bounds = viewport.getBounds();
             Util.assertRectangleEquals(
                 assert,
-                new OpenSeadragon.Rect(1.2071067811865466, 0.20710678118654746, Math.sqrt(2), Math.sqrt(2), 45),
+                new OpenSeadragon.Rect(1.0, 0.0, Math.sqrt(2), Math.sqrt(2), 45),
                 bounds,
                 EPSILON,
                 "Viewport.applyConstraints with rotation should move viewport.");
@@ -564,7 +564,7 @@
             var bounds = viewport.getBounds();
             Util.assertRectangleEquals(
                 assert,
-                new OpenSeadragon.Rect(1.2071067811865466, 0.20710678118654746, Math.sqrt(2), Math.sqrt(2), 45),
+                new OpenSeadragon.Rect(1.0, 0.0, Math.sqrt(2), Math.sqrt(2), 45),
                 bounds,
                 EPSILON,
                 "Viewport.applyConstraints flipped and with rotation should move viewport.");