diff --git a/build.properties b/build.properties index 54767969..4c235715 100644 --- a/build.properties +++ b/build.properties @@ -6,7 +6,7 @@ PROJECT: openseadragon BUILD_MAJOR: 0 BUILD_MINOR: 9 -BUILD_ID: 90 +BUILD_ID: 92 BUILD: ${PROJECT}.${BUILD_MAJOR}.${BUILD_MINOR}.${BUILD_ID} VERSION: ${BUILD_MAJOR}.${BUILD_MINOR}.${BUILD_ID} diff --git a/openseadragon.js b/openseadragon.js index 30ca7670..dc5b06d8 100644 --- a/openseadragon.js +++ b/openseadragon.js @@ -1,5 +1,5 @@ /** - * @version OpenSeadragon 0.9.90 + * @version OpenSeadragon 0.9.92 * * @fileOverview *

@@ -485,7 +485,7 @@ OpenSeadragon = window.OpenSeadragon || function( options ){ zoomPerClick: 2.0, zoomPerScroll: 1.2, zoomPerSecond: 2.0, - + showNavigationControl: true, showSequenceControl: true, controlsFadeDelay: 2000, @@ -524,6 +524,7 @@ OpenSeadragon = window.OpenSeadragon || function( options ){ maxImageCacheCount: 200, minZoomImageRatio: 0.8, maxZoomPixelRatio: 2, + timeout: 5000, //INTERFACE RESOURCE SETTINGS prefixUrl: null, @@ -3731,6 +3732,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, blendTime: this.blendTime, alwaysBlend: this.alwaysBlend, minPixelRatio: this.minPixelRatio, + timeout: this.timeout, debugMode: this.debugMode, debugGridColor: this.debugGridColor }); @@ -3933,8 +3935,8 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, bodyStyle.width = "100%"; bodyStyle.height = "100%"; - canvasStyle.backgroundColor = "black"; - canvasStyle.color = "white"; + //canvasStyle.backgroundColor = "black"; + //canvasStyle.color = "white"; //containerStyle.position = "fixed"; @@ -4734,7 +4736,7 @@ $.Navigator = function( options ){ } options = $.extend( true, { - navigatorSizeRatio: $.DEFAULT_SETTINGS.navigatorSizeRatio + sizeRatio: $.DEFAULT_SETTINGS.navigatorSizeRatio }, options, { element: this.element, //These need to be overridden to prevent recursion since @@ -4882,8 +4884,8 @@ $.Navigator = function( options ){ this.element.style.width = options.width + 'px'; this.element.style.height = options.height + 'px'; } else { - this.element.style.width = ( viewerSize.x * options.navigatorSizeRatio ) + 'px'; - this.element.style.height = ( viewerSize.y * options.navigatorSizeRatio ) + 'px'; + this.element.style.width = ( viewerSize.x * options.sizeRatio ) + 'px'; + this.element.style.height = ( viewerSize.y * options.sizeRatio ) + 'px'; } $.Viewer.apply( this, [ options ] ); @@ -5743,7 +5745,7 @@ $.extend( $.DziTileSource.prototype, $.TileSource.prototype, { } dziPath = url.split('/'); dziName = dziPath.pop(); - dziName = dziName.substring(0, dziName.indexOf('.')); + dziName = dziName.substring(0, dziName.lastIndexOf('.')); dziPath = '/' + dziPath.join('/') + '/' + dziName + '_files/'; tilesUrl = dziPath; if( host ){ @@ -7656,7 +7658,8 @@ $.Tile.prototype = { drawHTML: function( container ) { var position = this.position.apply( Math.floor ), - size = this.size.apply( Math.ceil ); + size = this.size.apply( Math.ceil ) + containerSize = $.getElementSize( container ); if ( !this.loaded || !this.image ) { $.console.warn( @@ -7680,10 +7683,19 @@ $.Tile.prototype = { container.appendChild( this.element ); } - this.element.style.left = position.x + "px"; - this.element.style.top = position.y + "px"; - this.element.style.width = size.x + "px"; - this.element.style.height = size.y + "px"; + 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.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 + "%"; $.setElementOpacity( this.element, this.opacity ); @@ -7707,7 +7719,22 @@ $.Tile.prototype = { return; } context.globalAlpha = this.opacity; + + context.save(); + if( context.globalAlpha == 1 && this.image.src.match('.png') ){ + + context.clearRect( + position.x+1, + position.y+1, + size.x-2, + size.y-2 + ); + + } + context.drawImage( this.image, position.x, position.y, size.x, size.y ); + + context.restore(); }, /** @@ -7902,8 +7929,7 @@ $.Tile.prototype = { (function( $ ){ -var TIMEOUT = 5000, - DEVICE_SCREEN = $.getWindowSize(), +var DEVICE_SCREEN = $.getWindowSize(), BROWSER = $.Browser.vendor, BROWSER_VERSION = $.Browser.version, @@ -7972,6 +7998,7 @@ $.Drawer = function( options ) { midUpdate: false, updateAgain: true, + //internal state / configurable settings overlays: [], collectionOverlays: {}, @@ -7986,7 +8013,8 @@ $.Drawer = function( options ) { blendTime: $.DEFAULT_SETTINGS.blendTime, alwaysBlend: $.DEFAULT_SETTINGS.alwaysBlend, minPixelRatio: $.DEFAULT_SETTINGS.minPixelRatio, - debugMode: $.DEFAULT_SETTINGS.debugMode + debugMode: $.DEFAULT_SETTINGS.debugMode, + timeout: $.DEFAULT_SETTINGS.timeout }, options ); @@ -8223,7 +8251,7 @@ $.Drawer.prototype = { jobid = window.setTimeout( function(){ finishLoadingImage( image, complete, false, jobid ); - }, TIMEOUT ); + }, this.timeout ); loading = true; image.src = src; @@ -8287,8 +8315,12 @@ function updateViewport( drawer ) { //TODO drawer.canvas.innerHTML = ""; if ( USE_CANVAS ) { - drawer.canvas.width = viewportSize.x; - drawer.canvas.height = viewportSize.y; + if( drawer.canvas.width != viewportSize.x || + drawer.canvas.height != viewportSize.y + ){ + drawer.canvas.width = viewportSize.x; + drawer.canvas.height = viewportSize.y; + } drawer.context.clearRect( 0, 0, viewportSize.x, viewportSize.y ); } @@ -8893,9 +8925,9 @@ function drawTiles( drawer, lastDrawn ){ 'below 0px -webkit-gradient('+ 'linear,left '+ 'top,left '+ - 'bottom,from(transparent),color-stop(60%,transparent),to(rgba(255,255,255,0.4))'+ + 'bottom,from(transparent),color-stop(62%,transparent),to(rgba(255,255,255,0.62))'+ ')'; - style['border'] = '1px solid rgba(255,255,255,0.2)'; + style['border'] = '1px solid rgba(255,255,255,0.38)'; //style['borderRight'] = '1px solid #fff'; }(viewer.element.style)); @@ -9067,6 +9099,7 @@ $.Viewport.prototype = { this.fitHeightBounds = new $.Rect( 0, 0, 1, this.contentAspectY ); this.homeBounds = this.fitHeightBounds; + return this; }, /** @@ -9252,6 +9285,7 @@ $.Viewport.prototype = { bounds.y += dy; this.fitBounds( bounds, immediately ); } + return this; }, /** @@ -9260,6 +9294,7 @@ $.Viewport.prototype = { */ ensureVisible: function( immediately ) { this.applyConstraints( immediately ); + return this; }, /** @@ -9297,7 +9332,7 @@ $.Viewport.prototype = { newZoom = 1.0 / newBounds.width; if ( newZoom == oldZoom || newBounds.width == oldBounds.width ) { this.panTo( center, immediately ); - return; + return this; } referencePoint = oldBounds.getTopLeft().times( @@ -9312,6 +9347,7 @@ $.Viewport.prototype = { ); this.zoomTo( newZoom, referencePoint, immediately ); + return this; }, /** @@ -9324,6 +9360,7 @@ $.Viewport.prototype = { } else { return this.fitHorizontally( immediately ); } + return this; }, /** @@ -9348,6 +9385,7 @@ $.Viewport.prototype = { } this.fitBounds( this.homeBounds, immediately ); + return this; }, /** @@ -9372,6 +9410,7 @@ $.Viewport.prototype = { } this.fitBounds( this.homeBounds, immediately ); + return this; }, @@ -9386,6 +9425,7 @@ $.Viewport.prototype = { this.centerSpringY.target.value ); this.panTo( center.plus( delta ), immediately ); + return this; }, /** @@ -9401,6 +9441,8 @@ $.Viewport.prototype = { this.centerSpringX.springTo( center.x ); this.centerSpringY.springTo( center.y ); } + + return this; }, /** @@ -9408,6 +9450,7 @@ $.Viewport.prototype = { */ zoomBy: function( factor, refPoint, immediately ) { this.zoomTo( this.zoomSpring.target.value * factor, refPoint, immediately ); + return this; }, /** @@ -9415,15 +9458,18 @@ $.Viewport.prototype = { */ zoomTo: function( zoom, refPoint, immediately ) { + this.zoomPoint = refPoint instanceof $.Point ? + refPoint : + null; + if ( immediately ) { this.zoomSpring.resetTo( zoom ); } else { this.zoomSpring.springTo( zoom ); } - this.zoomPoint = refPoint instanceof $.Point ? - refPoint : - null; + + return this; }, /** @@ -9445,6 +9491,8 @@ $.Viewport.prototype = { } this.fitBounds( newBounds, true ); + + return this; }, /** diff --git a/src/drawer.js b/src/drawer.js index 68834912..695f8d52 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -1,8 +1,7 @@ (function( $ ){ -var TIMEOUT = 5000, - DEVICE_SCREEN = $.getWindowSize(), +var DEVICE_SCREEN = $.getWindowSize(), BROWSER = $.Browser.vendor, BROWSER_VERSION = $.Browser.version, @@ -71,6 +70,7 @@ $.Drawer = function( options ) { midUpdate: false, updateAgain: true, + //internal state / configurable settings overlays: [], collectionOverlays: {}, @@ -85,7 +85,8 @@ $.Drawer = function( options ) { blendTime: $.DEFAULT_SETTINGS.blendTime, alwaysBlend: $.DEFAULT_SETTINGS.alwaysBlend, minPixelRatio: $.DEFAULT_SETTINGS.minPixelRatio, - debugMode: $.DEFAULT_SETTINGS.debugMode + debugMode: $.DEFAULT_SETTINGS.debugMode, + timeout: $.DEFAULT_SETTINGS.timeout }, options ); @@ -322,7 +323,7 @@ $.Drawer.prototype = { jobid = window.setTimeout( function(){ finishLoadingImage( image, complete, false, jobid ); - }, TIMEOUT ); + }, this.timeout ); loading = true; image.src = src; @@ -386,8 +387,12 @@ function updateViewport( drawer ) { //TODO drawer.canvas.innerHTML = ""; if ( USE_CANVAS ) { - drawer.canvas.width = viewportSize.x; - drawer.canvas.height = viewportSize.y; + if( drawer.canvas.width != viewportSize.x || + drawer.canvas.height != viewportSize.y + ){ + drawer.canvas.width = viewportSize.x; + drawer.canvas.height = viewportSize.y; + } drawer.context.clearRect( 0, 0, viewportSize.x, viewportSize.y ); } @@ -992,9 +997,9 @@ function drawTiles( drawer, lastDrawn ){ 'below 0px -webkit-gradient('+ 'linear,left '+ 'top,left '+ - 'bottom,from(transparent),color-stop(60%,transparent),to(rgba(255,255,255,0.4))'+ + 'bottom,from(transparent),color-stop(62%,transparent),to(rgba(255,255,255,0.62))'+ ')'; - style['border'] = '1px solid rgba(255,255,255,0.2)'; + style['border'] = '1px solid rgba(255,255,255,0.38)'; //style['borderRight'] = '1px solid #fff'; }(viewer.element.style)); diff --git a/src/dzitilesource.js b/src/dzitilesource.js index db8c7046..6d495ae9 100644 --- a/src/dzitilesource.js +++ b/src/dzitilesource.js @@ -112,7 +112,7 @@ $.extend( $.DziTileSource.prototype, $.TileSource.prototype, { } dziPath = url.split('/'); dziName = dziPath.pop(); - dziName = dziName.substring(0, dziName.indexOf('.')); + dziName = dziName.substring(0, dziName.lastIndexOf('.')); dziPath = '/' + dziPath.join('/') + '/' + dziName + '_files/'; tilesUrl = dziPath; if( host ){ diff --git a/src/navigator.js b/src/navigator.js index 93729e0b..84985ba4 100644 --- a/src/navigator.js +++ b/src/navigator.js @@ -29,7 +29,7 @@ $.Navigator = function( options ){ } options = $.extend( true, { - navigatorSizeRatio: $.DEFAULT_SETTINGS.navigatorSizeRatio + sizeRatio: $.DEFAULT_SETTINGS.navigatorSizeRatio }, options, { element: this.element, //These need to be overridden to prevent recursion since @@ -177,8 +177,8 @@ $.Navigator = function( options ){ this.element.style.width = options.width + 'px'; this.element.style.height = options.height + 'px'; } else { - this.element.style.width = ( viewerSize.x * options.navigatorSizeRatio ) + 'px'; - this.element.style.height = ( viewerSize.y * options.navigatorSizeRatio ) + 'px'; + this.element.style.width = ( viewerSize.x * options.sizeRatio ) + 'px'; + this.element.style.height = ( viewerSize.y * options.sizeRatio ) + 'px'; } $.Viewer.apply( this, [ options ] ); diff --git a/src/openseadragon.js b/src/openseadragon.js index 3f92af19..f6469fcd 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -485,7 +485,7 @@ OpenSeadragon = window.OpenSeadragon || function( options ){ zoomPerClick: 2.0, zoomPerScroll: 1.2, zoomPerSecond: 2.0, - + showNavigationControl: true, showSequenceControl: true, controlsFadeDelay: 2000, @@ -524,6 +524,7 @@ OpenSeadragon = window.OpenSeadragon || function( options ){ maxImageCacheCount: 200, minZoomImageRatio: 0.8, maxZoomPixelRatio: 2, + timeout: 5000, //INTERFACE RESOURCE SETTINGS prefixUrl: null, diff --git a/src/tile.js b/src/tile.js index 09632e8c..2b9549f2 100644 --- a/src/tile.js +++ b/src/tile.js @@ -79,7 +79,8 @@ $.Tile.prototype = { drawHTML: function( container ) { var position = this.position.apply( Math.floor ), - size = this.size.apply( Math.ceil ); + size = this.size.apply( Math.ceil ) + containerSize = $.getElementSize( container ); if ( !this.loaded || !this.image ) { $.console.warn( @@ -103,10 +104,19 @@ $.Tile.prototype = { container.appendChild( this.element ); } - this.element.style.left = position.x + "px"; - this.element.style.top = position.y + "px"; - this.element.style.width = size.x + "px"; - this.element.style.height = size.y + "px"; + 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.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 + "%"; $.setElementOpacity( this.element, this.opacity ); @@ -130,7 +140,22 @@ $.Tile.prototype = { return; } context.globalAlpha = this.opacity; + + context.save(); + if( context.globalAlpha == 1 && this.image.src.match('.png') ){ + + context.clearRect( + position.x+1, + position.y+1, + size.x-2, + size.y-2 + ); + + } + context.drawImage( this.image, position.x, position.y, size.x, size.y ); + + context.restore(); }, /** diff --git a/src/viewer.js b/src/viewer.js index a0120ce3..2121bb5d 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -426,6 +426,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, blendTime: this.blendTime, alwaysBlend: this.alwaysBlend, minPixelRatio: this.minPixelRatio, + timeout: this.timeout, debugMode: this.debugMode, debugGridColor: this.debugGridColor }); @@ -628,8 +629,8 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, bodyStyle.width = "100%"; bodyStyle.height = "100%"; - canvasStyle.backgroundColor = "black"; - canvasStyle.color = "white"; + //canvasStyle.backgroundColor = "black"; + //canvasStyle.color = "white"; //containerStyle.position = "fixed"; diff --git a/src/viewport.js b/src/viewport.js index 28449649..9ecf5274 100644 --- a/src/viewport.js +++ b/src/viewport.js @@ -78,6 +78,7 @@ $.Viewport.prototype = { this.fitHeightBounds = new $.Rect( 0, 0, 1, this.contentAspectY ); this.homeBounds = this.fitHeightBounds; + return this; }, /** @@ -263,6 +264,7 @@ $.Viewport.prototype = { bounds.y += dy; this.fitBounds( bounds, immediately ); } + return this; }, /** @@ -271,6 +273,7 @@ $.Viewport.prototype = { */ ensureVisible: function( immediately ) { this.applyConstraints( immediately ); + return this; }, /** @@ -308,7 +311,7 @@ $.Viewport.prototype = { newZoom = 1.0 / newBounds.width; if ( newZoom == oldZoom || newBounds.width == oldBounds.width ) { this.panTo( center, immediately ); - return; + return this; } referencePoint = oldBounds.getTopLeft().times( @@ -323,6 +326,7 @@ $.Viewport.prototype = { ); this.zoomTo( newZoom, referencePoint, immediately ); + return this; }, /** @@ -335,6 +339,7 @@ $.Viewport.prototype = { } else { return this.fitHorizontally( immediately ); } + return this; }, /** @@ -359,6 +364,7 @@ $.Viewport.prototype = { } this.fitBounds( this.homeBounds, immediately ); + return this; }, /** @@ -383,6 +389,7 @@ $.Viewport.prototype = { } this.fitBounds( this.homeBounds, immediately ); + return this; }, @@ -397,6 +404,7 @@ $.Viewport.prototype = { this.centerSpringY.target.value ); this.panTo( center.plus( delta ), immediately ); + return this; }, /** @@ -412,6 +420,8 @@ $.Viewport.prototype = { this.centerSpringX.springTo( center.x ); this.centerSpringY.springTo( center.y ); } + + return this; }, /** @@ -419,6 +429,7 @@ $.Viewport.prototype = { */ zoomBy: function( factor, refPoint, immediately ) { this.zoomTo( this.zoomSpring.target.value * factor, refPoint, immediately ); + return this; }, /** @@ -426,15 +437,18 @@ $.Viewport.prototype = { */ zoomTo: function( zoom, refPoint, immediately ) { + this.zoomPoint = refPoint instanceof $.Point ? + refPoint : + null; + if ( immediately ) { this.zoomSpring.resetTo( zoom ); } else { this.zoomSpring.springTo( zoom ); } - this.zoomPoint = refPoint instanceof $.Point ? - refPoint : - null; + + return this; }, /** @@ -456,6 +470,8 @@ $.Viewport.prototype = { } this.fitBounds( newBounds, true ); + + return this; }, /** diff --git a/www/tilesource-collection.html b/www/tilesource-collection.html index aec4bb59..e9419dec 100644 --- a/www/tilesource-collection.html +++ b/www/tilesource-collection.html @@ -42,7 +42,7 @@ OpenSeadragon({ }); + + +
+
+ Another Inline Configuration for Custom Tile Sources +
+
+
+

+ Below is a make believe minimal inline configuration. Note that the + default tileSize is available as a property of the tile source. +

+ 
+    OpenSeadragon({
+        id:            "example2-custom-tilesource",
+        prefixUrl:     "/openseadragon",
+        navigatorSizeRatio: 0.25,
+        tileSources:   {
+            height: 512*256,
+            width:  512*256,
+            tileSize: 256,
+            minLevel: 8,
+            getTileUrl: function( level, x, y ){
+                return "http://s3.amazonaws.com/com.modestmaps.bluemarble/"+(level-8)+"-r"+x+"-c"+y+".jpg";
+            }
+        }
+    });
+
+
\ No newline at end of file