fix Viewport._fixBounds to work with boundary constraints, and updated the demo page to show the behavior.

src/viewport.js

@@ -683,45 +683,55 @@ $.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);
+        var currentCenter = this.getCenter(true);
-        this.zoomTo(this.getZoom(true), null, 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);
+            this.zoomTo(newZoom, null, true);
-            return this.panTo(center, immediately);
+            this.panTo(center, immediately);
+            if(constraints){
+                this.applyConstraints(false);
+            }
+            return this;
         }
 
-        newBounds = newBounds.rotate(-this.getRotation());
+        var referencePoint;
-        var referencePoint = newBounds.getTopLeft().times(newZoom)
-            .minus(oldBounds.getTopLeft().times(oldZoom))
-            .divide(newZoom - oldZoom);
 
-        return this.zoomTo(newZoom, referencePoint, immediately);
+        if(constraints){
+            this.panTo(center, false);
+            this.zoomTo(newZoom, null, false);
+
+            var constrainedBounds = this.getConstrainedBounds();
+
+            this.panTo(currentCenter, true);
+            this.zoomTo(currentZoom, null, true);
+
+            this.fitBounds(constrainedBounds);
+
+            // this.zoomTo(newZoom, referencePoint, immediately);
+        } else {
+            var rotatedNewBounds = newBounds.rotate(-this.getRotation());
+            referencePoint = rotatedNewBounds.getTopLeft().times(newZoom)
+                .minus(oldBounds.getTopLeft().times(oldZoom))
+                .divide(newZoom - oldZoom);
+
+            this.zoomTo(newZoom, referencePoint, immediately);
+        }
+        return this;
     },
 
     /**
@@ -796,8 +806,9 @@ $.Viewport.prototype = {
      * Added to improve constrained panning
      * @param {Boolean} current - Pass true for the current location; defaults to false (target location).
      * @returns {OpenSeadragon.Rect} The bounds after applying constraints. The returned $.Rect contains additonal
-     *                               properties xConstrained, yConstrained, constraintsApplied indicating the status
+     *                               properties constraintsApplied, xConstrained and yConstrained. These flags indicate
-     *                               of the constraining operation; x and y are in the viewer element coordinate system.
+     *                               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,160 @@
 <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 {
+      #controls li {
         cursor: pointer;
       }
-
+      .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>
+    <div class="layout">
-        Simple demo page to show 'viewport.fitBounds().applyConstraints()' issue.
+        <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>
+            <ul></ul>
+            <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;
-
+        viewer = window.viewer = OpenSeadragon({
-        var _highlights = [
+            id: "contentDiv",
-            {"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,
             prefixUrl: "../../build/openseadragon/images/",
-            hash: generateUniqueHash(), //this is only needed if you want to instantiate more than one viewer at a time.
+            tileSources: "../data/testpattern.dzi",
-            tileSources: {
+            minZoomImageRatio: 0,
-                Image: {
+            maxZoomPixelRatio: 10,
-                    xmlns:    "http://schemas.microsoft.com/deepzoom/2008",
+            visibilityRatio:1.0,
-                    Url:      'http://cdn.photosynth.net/ps2/19d5cf2b-77ed-439f-ac21-d3046320384c/packet/undistorted/img0043/',
+            constrainDuringPan:true,
-                    Format:   "jpg",
+        });
-                    Overlap:  1,
+
-                    TileSize: 510,
+        viewer.addHandler("open", function(event) {
-                    Size: {
+            var elt = document.createElement("div");
-                        Width:  4592,
+            elt.className = "runtime-overlay";
-                        Height: 3448
+            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();
+                $('<li>').text(text).appendTo('#controls ul').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() {
+        $('.method').on('click',function(){
-            var str = "<ul>";
+            $('.method').removeClass('selected');
-            for (var i=0; i<_highlights.length; ++i) {
+            $(this).addClass('selected');
-                var highlight = _highlights[i];
+        })
-                str += "<li onclick='gotoHighlight("+i+")'>"+highlight.text+"</li>";
+        $("#rotate").click(function() {
-            }
+            viewer.viewport.setRotation(viewer.viewport.getRotation() - 22.5);
-            str += "</ul>";
+            $("#degrees").text(viewer.viewport.getRotation() + "deg");
-            document.getElementById("highlights").innerHTML = str;
         });
 
-        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>