diff --git a/Gruntfile.js b/Gruntfile.js index b043e067..33e45459 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -148,7 +148,7 @@ module.exports = function(grunt) { grunt.registerTask("copy:release", function() { grunt.file.recurse("build", function(abspath, rootdir, subdir, filename) { var dest = "../site-build/" - + (subdir ? subdir + "/" : "") + + (subdir ? subdir + "/" : '/') + filename; grunt.file.copy(abspath, dest); diff --git a/src/drawer.js b/src/drawer.js index 2fe5c4ba..85bab42a 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -515,7 +515,12 @@ function updateViewport( drawer ) { ).x; zeroRatioT = drawer.viewport.deltaPixelsFromPoints( - drawer.source.getPixelRatio( 0 ), + drawer.source.getPixelRatio( + Math.max( + drawer.source.getClosestLevel( drawer.viewport.containerSize ) - 1, + 0 + ) + ), false ).x; @@ -850,7 +855,7 @@ function blendTile( drawer, tile, x, y, level, levelOpacity, currentTime ){ } deltaTime = currentTime - tile.blendStart; - opacity = Math.min( 1, deltaTime / ( blendTimeMillis || 1 ) ); + opacity = blendTimeMillis ? Math.min( 1, deltaTime / ( blendTimeMillis ) ) : 1; if ( drawer.alwaysBlend ) { opacity *= levelOpacity; @@ -1080,14 +1085,11 @@ function drawTiles( drawer, lastDrawn ){ //$.console.log("Rendering collection tile %s | %s | %s", tile.y, tile.y, position); if( tileSource ){ drawer.collectionOverlays[ tileKey ] = viewer = new $.Viewer({ - element: $.makeNeutralElement( "div" ), - mouseNavEnabled: false, - showNavigator: false, - showSequenceControl: false, - showNavigationControl: false, - //visibilityRatio: 1, - //debugMode: true, - //debugGridColor: 'red', + element: $.makeNeutralElement( "div" ), + mouseNavEnabled: false, + showNavigator: false, + showSequenceControl: false, + showNavigationControl: false, tileSources: [ tileSource ] @@ -1153,6 +1155,7 @@ function drawTiles( drawer, lastDrawn ){ function drawDebugInfo( drawer, tile, count, i ){ if ( USE_CANVAS ) { + drawer.context.save(); drawer.context.lineWidth = 2; drawer.context.font = 'small-caps bold 13px ariel'; drawer.context.strokeStyle = drawer.debugGridColor; @@ -1205,6 +1208,7 @@ function drawDebugInfo( drawer, tile, count, i ){ tile.position.x + 10, tile.position.y + 70 ); + drawer.context.restore(); } } diff --git a/src/navigator.js b/src/navigator.js index 04d17a4d..1a5defdd 100644 --- a/src/navigator.js +++ b/src/navigator.js @@ -37,7 +37,10 @@ $.Navigator = function( options ){ showNavigator: false, mouseNavEnabled: false, showNavigationControl: false, - showSequenceControl: false + showSequenceControl: false, + immediateRender: true, + blendTime: 0, + animationTime: 0 }); options.minPixelRatio = this.minPixelRatio = viewer.minPixelRatio; @@ -228,6 +231,20 @@ $.extend( $.Navigator.prototype, $.EventHandler.prototype, $.Viewer.prototype, { }( this.displayRegion.style )); } + }, + + open: function( source ){ + var containerSize = this.viewer.viewport.containerSize.times( this.sizeRatio ); + if( source.tileSize > containerSize.x || + source.tileSize > containerSize.y ){ + this.minPixelRatio = Math.min( + containerSize.x, + containerSize.y + ) / source.tileSize; + } else { + this.minPixelRatio = thie.viewer.minPixelRatio; + } + return $.Viewer.prototype.open.apply( this, [ source ] ); } }); diff --git a/src/openseadragon.js b/src/openseadragon.js index b9c0b6dc..d5ab3231 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -474,26 +474,26 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){ constrainDuringPan: false, wrapHorizontal: false, wrapVertical: false, - visibilityRatio: 0.5, - minPixelRatio: 0.5, - minZoomImageRatio: 0.8, - maxZoomPixelRatio: 2, + visibilityRatio: 0.5, //-> how much of the viewer can be negative space + minPixelRatio: 1, //->closer to 0 draws tiles meant for a higher zoom at this zoom defaultZoomLevel: 0, minZoomLevel: null, maxZoomLevel: null, //UI RESPONSIVENESS AND FEEL - springStiffness: 5.0, + springStiffness: 7.0, clickTimeThreshold: 300, clickDistThreshold: 5, - zoomPerClick: 2.0, + zoomPerClick: 2, zoomPerScroll: 1.2, - zoomPerSecond: 2.0, - animationTime: 1.5, - blendTime: 1.5, + zoomPerSecond: 1.0, + animationTime: 1.2, + blendTime: 0, alwaysBlend: false, autoHideControls: true, immediateRender: false, + minZoomImageRatio: 0.9, //-> closer to 0 allows zoom out to infinity + maxZoomPixelRatio: 1.1, //-> higher allows 'over zoom' into pixels //DEFAULT CONTROL SETTINGS showSequenceControl: true, //SEQUENCE @@ -532,7 +532,7 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){ //PERFORMANCE SETTINGS imageLoaderLimit: 0, maxImageCacheCount: 200, - timeout: 5000, + timeout: 30000, //INTERFACE RESOURCE SETTINGS prefixUrl: "/images/", diff --git a/src/referencestrip.js b/src/referencestrip.js index 20f8ff03..80bf10d1 100644 --- a/src/referencestrip.js +++ b/src/referencestrip.js @@ -377,11 +377,13 @@ function loadPanels(strip, viewerSize, scroll){ tileSources: [ strip.viewer.tileSources[ i ] ], element: element, navigatorSizeRatio: strip.sizeRatio, - minPixelRatio: strip.minPixelRatio, showNavigator: false, mouseNavEnabled: false, showNavigationControl: false, - showSequenceControl: false + showSequenceControl: false, + immediateRender: true, + blendTime: 0, + animationTime: 0 } ); miniViewer.displayRegion = $.makeNeutralElement( "textarea" ); diff --git a/src/tile.js b/src/tile.js index 4624ff01..d6ba9f87 100644 --- a/src/tile.js +++ b/src/tile.js @@ -1,5 +1,5 @@ (function( $ ){ - + var TILE_CACHE = {}; /** * @class * @param {Number} level The zoom level this tile belongs to. @@ -140,9 +140,11 @@ $.Tile.prototype = { drawCanvas: function( context ) { var position = this.position, - size = this.size; + size = this.size, + rendered, + canvas; - if ( !this.loaded || !this.image ) { + if ( !this.loaded || !( this.image || TILE_CACHE[ this.url ] ) ){ $.console.warn( "Attempting to draw tile %s when it's not yet loaded.", this.toString() @@ -151,13 +153,13 @@ $.Tile.prototype = { } context.globalAlpha = this.opacity; - context.save(); + //context.save(); - //if we are supposed to b rendering fully opaque rectangle, + //if we are supposed to be rendering fully opaque rectangle, //ie its done fading or fading is turned off, and if we are drawing //an image with an alpha channel, then the only way //to avoid seeing the tile underneath is to clear the rectangle - if( context.globalAlpha == 1 && this.image.src.match('.png') ){ + if( context.globalAlpha == 1 && this.url.match('.png') ){ //clearing only the inside of the rectangle occupied //by the png prevents edge flikering context.clearRect( @@ -168,10 +170,36 @@ $.Tile.prototype = { ); } - - context.drawImage( this.image, position.x, position.y, size.x, size.y ); - context.restore(); + if( !TILE_CACHE[ this.url ] ){ + canvas = document.createElement( 'canvas' ); + canvas.width = this.image.width; + canvas.height = this.image.height; + rendered = canvas.getContext('2d'); + rendered.drawImage( this.image, 0, 0 ); + TILE_CACHE[ this.url ] = rendered; + //since we are caching the prerendered image on a canvas + //allow the image to not be held in memory + this.image = null; + } + + rendered = TILE_CACHE[ this.url ]; + + //rendered.save(); + context.drawImage( + rendered.canvas, + 0, + 0, + rendered.canvas.width, + rendered.canvas.height, + position.x, + position.y, + size.x, + size.y + ); + //rendered.restore(); + + //context.restore(); }, /** @@ -181,9 +209,12 @@ $.Tile.prototype = { unload: function() { if ( this.element && this.element.parentNode ) { this.element.parentNode.removeChild( this.element ); + } + if ( TILE_CACHE[ this.url ]){ + delete TILE_CACHE[ this.url ]; } - this.element = null; + this.element = null; this.image = null; this.loaded = false; this.loading = false; diff --git a/src/tilesource.js b/src/tilesource.js index 3b64821b..11cc499a 100644 --- a/src/tilesource.js +++ b/src/tilesource.js @@ -180,6 +180,24 @@ $.TileSource.prototype = { return new $.Point(rx, ry); }, + + /** + * @function + * @param {Number} level + */ + getClosestLevel: function( rect ) { + var i, + tilesPerSide = Math.floor( Math.max( rect.x, rect.y ) / this.tileSize ), + tiles; + for( i = this.minLevel; i < this.maxLevel; i++ ){ + tiles = this.getNumTiles( i ); + if( Math.max( tiles.x, tiles.y ) + 1 >= tilesPerSide ){ + break; + } + } + return Math.max( 0, i - 1 ); + }, + /** * @function * @param {Number} level