Merge pull request #473 from openseadragon/ian

Fixed snapping issue with collections

src/openseadragon.js

@@ -254,7 +254,7 @@
   * @property {Number} [visibilityRatio=0.5]
   *     The percentage ( as a number from 0 to 1 ) of the source image which
   *     must be kept within the viewport.  If the image is dragged beyond that
-  *     limit, it will 'bounce' back until the minimum visibility ration is
+  *     limit, it will 'bounce' back until the minimum visibility ratio is
   *     achieved.  Setting this to 0 and wrapHorizontal ( or wrapVertical ) to
   *     true will provide the effect of an infinitely scrolling viewport.
   *

src/viewport.js

@@ -361,13 +361,7 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
      * @return {OpenSeadragon.Rect} constrained bounds.
      */
     _applyBoundaryConstraints: function( bounds, immediately ) {
-        var horizontalThreshold,
+        var dx = 0,
-            verticalThreshold,
-            left,
-            right,
-            top,
-            bottom,
-            dx = 0,
             dy = 0,
             newBounds = new $.Rect(
                 bounds.x,
@@ -376,49 +370,52 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
                 bounds.height
             );
 
-        horizontalThreshold = this.visibilityRatio * newBounds.width;
+        var horizontalThreshold = this.visibilityRatio * newBounds.width;
-        verticalThreshold   = this.visibilityRatio * newBounds.height;
+        var verticalThreshold   = this.visibilityRatio * newBounds.height;
-
-        left   = newBounds.x + newBounds.width;
-        right  = this.homeBounds.width - newBounds.x;
-        top    = newBounds.y + newBounds.height;
-        bottom = this.homeBounds.height - newBounds.y;
 
         if ( this.wrapHorizontal ) {
             //do nothing
         } else {
-            if ( left < horizontalThreshold ) {
+            var thresholdLeft = newBounds.x + (newBounds.width - horizontalThreshold);
-                dx = horizontalThreshold - left;
+            if (this.homeBounds.x > thresholdLeft) {
+                dx = this.homeBounds.x - thresholdLeft;
             }
-            if ( right < horizontalThreshold ) {
+
-                dx = dx ?
+            var homeRight = this.homeBounds.x + this.homeBounds.width;
-                    ( dx + right - horizontalThreshold ) / 2 :
+            var thresholdRight = newBounds.x + horizontalThreshold;
-                    ( right - horizontalThreshold );
+            if (homeRight < thresholdRight) {
+                var newDx = homeRight - thresholdRight;
+                if (dx) {
+                    dx = (dx + newDx) / 2;
+                } else {
+                    dx = newDx;
+                }
             }
         }
 
         if ( this.wrapVertical ) {
             //do nothing
         } else {
-            if ( top < verticalThreshold ) {
+            var thresholdTop = newBounds.y + (newBounds.height - verticalThreshold);
-                dy = ( verticalThreshold - top );
+            if (this.homeBounds.y > thresholdTop) {
+                dy = this.homeBounds.y - thresholdTop;
             }
-            if ( bottom < verticalThreshold ) {
+
-                dy =  dy ?
+            var homeBottom = this.homeBounds.y + this.homeBounds.height;
-                    ( dy + bottom - verticalThreshold ) / 2 :
+            var thresholdBottom = newBounds.y + verticalThreshold;
-                    ( bottom - verticalThreshold );
+            if (homeBottom < thresholdBottom) {
+                var newDy = homeBottom - thresholdBottom;
+                if (dy) {
+                    dy = (dy + newDy) / 2;
+                } else {
+                    dy = newDy;
+                }
             }
         }
 
-        if ( dx || dy || immediately ) {
+        if ( dx || dy ) {
             newBounds.x += dx;
             newBounds.y += dy;
-            if( newBounds.width > this.homeBounds.width  ){
-                newBounds.x = this.homeBounds.width / 2 - newBounds.width/2;
-            }
-            if( newBounds.height > this.homeBounds.height){
-                newBounds.y = this.homeBounds.height / 2 - newBounds.height/2;
-            }
         }
 
         if( this.viewer ){

test/demo/collections/main.js

@@ -14,8 +14,30 @@
                 prefixUrl: "../../../build/openseadragon/images/"
             } );
 
+            this.gridTest();
+        },
+
+        // ----------
+        crossTest: function() {
+            var self = this;
+
             this.viewer.addHandler( "open", function() {
-                self.addLayer();
+                var options = {
+                    tileSource: '../../data/wide.dzi',
+                    opacity: 1,
+                    x: 0,
+                    y: 1.5,
+                    height: 1
+                };
+
+                var addItemHandler = function( event ) {
+                    if ( event.options === options ) {
+                        self.viewer.world.removeHandler( "add-item", addItemHandler );
+                        self.viewer.viewport.goHome();
+                    }
+                };
+                self.viewer.world.addHandler( "add-item", addItemHandler );
+                self.viewer.addTiledImage( options );
             });
 
             this.viewer.open("../../data/tall.dzi", {
@@ -26,25 +48,45 @@
         },
 
         // ----------
-        addLayer: function() {
+        gridTest: function() {
             var self = this;
+            var startX = -3;
+            var expected = 0;
+            var loaded = 0;
 
-            var options = {
+            this.viewer.addHandler( "open", function() {
-                tileSource: '../../data/wide.dzi',
+                self.viewer.world.addHandler('add-item', function() {
-                opacity: 1,
+                    loaded++;
-                x: 0,
+                    if (loaded === expected) {
-                y: 1.5,
+                        self.viewer.viewport.goHome();
-                height: 1
+                    }
-            };
+                });
 
-            var addLayerHandler = function( event ) {
+                var x, y;
-                if ( event.options === options ) {
+                for (y = 0; y < 6; y++) {
-                    self.viewer.removeHandler( "add-layer", addLayerHandler );
+                    for (x = 0; x < 6; x++) {
-                    self.viewer.viewport.goHome();
+                        if (!x && !y) {
+                            continue;
+                        }
+
+                        var options = {
+                            tileSource: '../../data/testpattern.dzi',
+                            x: startX + x,
+                            y: y,
+                            width: 1
+                        };
+
+                        expected++;
+                        self.viewer.addTiledImage( options );
+                    }
                 }
-            };
+            });
-            this.viewer.addHandler( "add-layer", addLayerHandler );
+
-            this.viewer.addLayer( options );
+            this.viewer.open("../../data/testpattern.dzi", {
+                x: startX,
+                y: 0,
+                width: 1
+            });
         }
     };