fixing some work in progress for collections visualizations

openseadragon.js

@@ -3677,6 +3677,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
                 contentSize:            this.source.dimensions, 
                 springStiffness:        this.springStiffness,
                 animationTime:          this.animationTime,
+                showNavigator:          false,
                 minZoomImageRatio:      1,
                 maxZoomPixelRatio:      1
             });
@@ -3731,14 +3732,14 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
             immediateRender:    this.immediateRender,
             blendTime:          this.blendTime,
             alwaysBlend:        this.alwaysBlend,
-            minPixelRatio:      this.minPixelRatio,
+            minPixelRatio:      this.collectionMode ? 0 : this.minPixelRatio,
             timeout:            this.timeout,
             debugMode:          this.debugMode,
             debugGridColor:     this.debugGridColor
         });
 
         //Instantiate a navigator if configured
-        if ( this.showNavigator  && ! this.navigator ){
+        if ( this.showNavigator  && ! this.navigator && !this.collectionMode ){
             this.navigator = new $.Navigator({
                 id:          this.navigatorElement,
                 position:    this.navigatorPosition,
@@ -7677,13 +7678,12 @@ $.Tile.prototype = {
         if ( !this.element ) {
             this.element              = $.makeNeutralElement("img");
             this.element.src          = this.url;
-            this.style          = this.element.style;
 
+            this.style                     = this.element.style;
             this.style.position            = "absolute";
             this.style.msInterpolationMode = "nearest-neighbor";
         }
 
-
         if ( this.element.parentNode != container ) {
             container.appendChild( this.element );
         }
@@ -7693,17 +7693,31 @@ $.Tile.prototype = {
         this.style.height  = size.y + "px";
         this.style.width   = size.x + "px";
 
-        //this.style.right   = ( containerSize.x - position.x ) + "px";
+        //EXPERIMENTAL - trying to figure out how to scale the container
-        //this.style.bottom  = ( containerSize.y - position.y ) + "px";
+        //               content during animation of the container size.
-
+        /*
-        //when the entire container is filled by a single tile we need
+        if ( !this.element ) {
-        //some additional stickyness so when animating container size
+            this.element            = $.makeNeutralElement("div");
-        //the image stays fixed in position
+            this.image              = $.makeNeutralElement("img");
-        //this.element.style.width   =  ( size.x / containerSize.x ) * 100 + "%";
+            this.image.src          = this.url;
-        //this.element.style.height  =  ( size.y / containerSize.y ) * 100 + "%";
+            this.image.style.height = '100%';
+            this.image.style.width  = '100%';
+            this.image.style.msInterpolationMode = "nearest-neighbor";
+            this.element.appendChild( this.image );
 
+            this.style                     = this.element.style;
+            this.style.position            = "absolute";
+        }
+        this.style.right   = "0px";
+        this.style.bottom  = "0px";
+        if ( size.y == containerSize.y || size.x == containerSize.x ){
+            this.style.right   = position.x + "px";
+            this.style.bottom  = position.y + "px";
+        } 
+        */
         $.setElementOpacity( this.element, this.opacity );
 
+
     },
 
     /**
@@ -7726,6 +7740,7 @@ $.Tile.prototype = {
         context.globalAlpha = this.opacity;
 
         context.save();
+
         if( context.globalAlpha == 1 && this.image.src.match('.png') ){
 
             context.clearRect( 
@@ -8569,12 +8584,17 @@ function getTile( x, y, level, tileSource, tilesMatrix, time, numTiles, normHeig
 
 
 function loadTile( drawer, tile, time ) {
+    if( drawer.viewport.collectionMode ){
+        drawer.midUpdate = false;
+        onTileLoad( drawer, tile, time );
+    } else {
         tile.loading = drawer.loadImage(
             tile.url,
             function( image ){
                 onTileLoad( drawer, tile, time, image );
             }
         );
+    }
 };
 
 function onTileLoad( drawer, tile, time, image ) {
@@ -8594,7 +8614,7 @@ function onTileLoad( drawer, tile, time, image ) {
     if ( drawer.midUpdate ) {
         $.console.warn( "Tile load callback in middle of drawing routine." );
         return;
-    } else if ( !image ) {
+    } else if ( !image  && !drawer.viewport.collectionMode ) {
         $.console.log( "Tile %s failed to load: %s", tile, tile.url );
         tile.exists = false;
         return;

src/drawer.js

@@ -636,12 +636,17 @@ function getTile( x, y, level, tileSource, tilesMatrix, time, numTiles, normHeig
 
 
 function loadTile( drawer, tile, time ) {
+    if( drawer.viewport.collectionMode ){
+        drawer.midUpdate = false;
+        onTileLoad( drawer, tile, time );
+    } else {
         tile.loading = drawer.loadImage(
             tile.url,
             function( image ){
                 onTileLoad( drawer, tile, time, image );
             }
         );
+    }
 };
 
 function onTileLoad( drawer, tile, time, image ) {
@@ -661,7 +666,7 @@ function onTileLoad( drawer, tile, time, image ) {
     if ( drawer.midUpdate ) {
         $.console.warn( "Tile load callback in middle of drawing routine." );
         return;
-    } else if ( !image ) {
+    } else if ( !image  && !drawer.viewport.collectionMode ) {
         $.console.log( "Tile %s failed to load: %s", tile, tile.url );
         tile.exists = false;
         return;

src/tile.js

@@ -93,13 +93,12 @@ $.Tile.prototype = {
         if ( !this.element ) {
             this.element              = $.makeNeutralElement("img");
             this.element.src          = this.url;
-            this.style          = this.element.style;
 
+            this.style                     = this.element.style;
             this.style.position            = "absolute";
             this.style.msInterpolationMode = "nearest-neighbor";
         }
 
-
         if ( this.element.parentNode != container ) {
             container.appendChild( this.element );
         }
@@ -109,17 +108,31 @@ $.Tile.prototype = {
         this.style.height  = size.y + "px";
         this.style.width   = size.x + "px";
 
-        //this.style.right   = ( containerSize.x - position.x ) + "px";
+        //EXPERIMENTAL - trying to figure out how to scale the container
-        //this.style.bottom  = ( containerSize.y - position.y ) + "px";
+        //               content during animation of the container size.
-
+        /*
-        //when the entire container is filled by a single tile we need
+        if ( !this.element ) {
-        //some additional stickyness so when animating container size
+            this.element            = $.makeNeutralElement("div");
-        //the image stays fixed in position
+            this.image              = $.makeNeutralElement("img");
-        //this.element.style.width   =  ( size.x / containerSize.x ) * 100 + "%";
+            this.image.src          = this.url;
-        //this.element.style.height  =  ( size.y / containerSize.y ) * 100 + "%";
+            this.image.style.height = '100%';
+            this.image.style.width  = '100%';
+            this.image.style.msInterpolationMode = "nearest-neighbor";
+            this.element.appendChild( this.image );
 
+            this.style                     = this.element.style;
+            this.style.position            = "absolute";
+        }
+        this.style.right   = "0px";
+        this.style.bottom  = "0px";
+        if ( size.y == containerSize.y || size.x == containerSize.x ){
+            this.style.right   = position.x + "px";
+            this.style.bottom  = position.y + "px";
+        } 
+        */
         $.setElementOpacity( this.element, this.opacity );
 
+
     },
 
     /**
@@ -142,6 +155,7 @@ $.Tile.prototype = {
         context.globalAlpha = this.opacity;
 
         context.save();
+
         if( context.globalAlpha == 1 && this.image.src.match('.png') ){
 
             context.clearRect( 

src/viewer.js

@@ -371,6 +371,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
                 contentSize:            this.source.dimensions, 
                 springStiffness:        this.springStiffness,
                 animationTime:          this.animationTime,
+                showNavigator:          false,
                 minZoomImageRatio:      1,
                 maxZoomPixelRatio:      1
             });
@@ -425,14 +426,14 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
             immediateRender:    this.immediateRender,
             blendTime:          this.blendTime,
             alwaysBlend:        this.alwaysBlend,
-            minPixelRatio:      this.minPixelRatio,
+            minPixelRatio:      this.collectionMode ? 0 : this.minPixelRatio,
             timeout:            this.timeout,
             debugMode:          this.debugMode,
             debugGridColor:     this.debugGridColor
         });
 
         //Instantiate a navigator if configured
-        if ( this.showNavigator  && ! this.navigator ){
+        if ( this.showNavigator  && ! this.navigator && !this.collectionMode ){
             this.navigator = new $.Navigator({
                 id:          this.navigatorElement,
                 position:    this.navigatorPosition,

www/tilesource-collection.html

@@ -45,17 +45,23 @@ OpenSeadragon({
     var viewer = OpenSeadragon({
         id:                 "example-tilesource-collection",
         prefixUrl:          "/openseadragon/images/",
-        //debugMode:          true,
+        debugMode:          false, //if you want to see the render grid
-        showNavigator:      false,
+        
-        minPixelRatio:      0.0,
         collectionMode:     true,
         collectionRows:     1, 
         collectionTileSize: 1024,
         collectionTileMargin: 256,
+
         //collectionLayout:   'vertical',
+        //panVertical:        false,
+        //panHorizontal:      false,
         //defaultZoomLevel:   1,
-        wrapHorizontal: true,
+
+        /*The wrap options can be fun to give a sense of infinite results*/
+        //wrapHorizontal: true,
         //wrapVertical: true,
+        
+        /*Tile sources can be mixed*/
         tileSources: [
             "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05954.dzi",
             "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05955.dzi",

www/tilesource-custom.html

@@ -44,6 +44,7 @@
         id:            "example-custom-tilesource",
         prefixUrl:     "/openseadragon",
         navigatorSizeRatio: 0.25,
+        wrapHorizontal:     true,
         tileSources:   {
             height: 512*256,
             width:  512*256,
@@ -91,7 +92,6 @@
         ...
         showNavigator:      false,
         blendTime:          0,
-        alwaysBlend:        false,
         wrapHorizontal:     true,
         tileSources:   {
             height: 1024*256,
@@ -119,7 +119,6 @@
         prefixUrl:          "/openseadragon/images/",
         showNavigator:      false,
         blendTime:          0,
-        alwaysBlend:        false,
         wrapHorizontal:     true,
         tileSources:   {
             height: 1024*256,