diff --git a/openseadragon.js b/openseadragon.js index 2a6ee122..3e624f55 100644 --- a/openseadragon.js +++ b/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, @@ -7675,35 +7676,48 @@ $.Tile.prototype = { } if ( !this.element ) { - this.element = $.makeNeutralElement("img"); - this.element.src = this.url; - this.style = this.element.style; + this.element = $.makeNeutralElement("img"); + this.element.src = this.url; + this.style = this.element.style; this.style.position = "absolute"; this.style.msInterpolationMode = "nearest-neighbor"; } - if ( this.element.parentNode != container ) { container.appendChild( this.element ); } this.style.top = position.y + "px"; this.style.left = position.x + "px"; - this.style.height = size.y + "px"; - this.style.width = size.x + "px"; + this.style.height = size.y + "px"; + this.style.width = size.x + "px"; - //this.style.right = ( containerSize.x - position.x ) + "px"; - //this.style.bottom = ( containerSize.y - position.y ) + "px"; - - //when the entire container is filled by a single tile we need - //some additional stickyness so when animating container size - //the image stays fixed in position - //this.element.style.width = ( size.x / containerSize.x ) * 100 + "%"; - //this.element.style.height = ( size.y / containerSize.y ) * 100 + "%"; + //EXPERIMENTAL - trying to figure out how to scale the container + // content during animation of the container size. + /* + if ( !this.element ) { + this.element = $.makeNeutralElement("div"); + this.image = $.makeNeutralElement("img"); + this.image.src = this.url; + 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 ) { - tile.loading = drawer.loadImage( - tile.url, - function( image ){ - onTileLoad( drawer, tile, time, image ); - } - ); + 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; diff --git a/src/drawer.js b/src/drawer.js index 493621de..54aa6fca 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -636,12 +636,17 @@ function getTile( x, y, level, tileSource, tilesMatrix, time, numTiles, normHeig function loadTile( drawer, tile, time ) { - tile.loading = drawer.loadImage( - tile.url, - function( image ){ - onTileLoad( drawer, tile, time, image ); - } - ); + 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; diff --git a/src/tile.js b/src/tile.js index 2b9549f2..3e609f23 100644 --- a/src/tile.js +++ b/src/tile.js @@ -91,35 +91,48 @@ $.Tile.prototype = { } if ( !this.element ) { - this.element = $.makeNeutralElement("img"); - this.element.src = this.url; - this.style = this.element.style; + this.element = $.makeNeutralElement("img"); + this.element.src = this.url; + this.style = this.element.style; this.style.position = "absolute"; this.style.msInterpolationMode = "nearest-neighbor"; } - if ( this.element.parentNode != container ) { container.appendChild( this.element ); } this.style.top = position.y + "px"; this.style.left = position.x + "px"; - this.style.height = size.y + "px"; - this.style.width = size.x + "px"; + this.style.height = size.y + "px"; + this.style.width = size.x + "px"; - //this.style.right = ( containerSize.x - position.x ) + "px"; - //this.style.bottom = ( containerSize.y - position.y ) + "px"; - - //when the entire container is filled by a single tile we need - //some additional stickyness so when animating container size - //the image stays fixed in position - //this.element.style.width = ( size.x / containerSize.x ) * 100 + "%"; - //this.element.style.height = ( size.y / containerSize.y ) * 100 + "%"; + //EXPERIMENTAL - trying to figure out how to scale the container + // content during animation of the container size. + /* + if ( !this.element ) { + this.element = $.makeNeutralElement("div"); + this.image = $.makeNeutralElement("img"); + this.image.src = this.url; + 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( diff --git a/src/viewer.js b/src/viewer.js index 2121bb5d..50d965a2 100644 --- a/src/viewer.js +++ b/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, diff --git a/www/tilesource-collection.html b/www/tilesource-collection.html index 32833f8c..db6cc82d 100644 --- a/www/tilesource-collection.html +++ b/www/tilesource-collection.html @@ -45,17 +45,23 @@ OpenSeadragon({ var viewer = OpenSeadragon({ id: "example-tilesource-collection", prefixUrl: "/openseadragon/images/", - //debugMode: true, - showNavigator: false, - minPixelRatio: 0.0, + debugMode: false, //if you want to see the render grid + 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", diff --git a/www/tilesource-custom.html b/www/tilesource-custom.html index 896a7d79..5d7787b3 100644 --- a/www/tilesource-custom.html +++ b/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,