diff --git a/src/drawer.js b/src/drawer.js index 440b634b..a4b7f2ec 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -72,11 +72,33 @@ $.Drawer = function( options ) { }; } - $.extend( true, this, { + this._worldX = options.x || 0; + delete options.x; + this._worldY = options.y || 0; + delete options.y; - x: 0, - y: 0, - scale: 1, + // Ratio of zoomable image height to width. + this.normHeight = options.source.dimensions.y / options.source.dimensions.x; + + if ( options.width ) { + this._scale = options.width; + delete options.width; + + if ( options.height ) { + $.console.error( "specifying both width and height to a drawer is not supported" ); + delete options.height; + } + } else if ( options.height ) { + this._scale = options.height / this.normHeight; + delete options.height; + } else { + this._scale = 1; + } + + this._worldWidth = this._scale; + this._worldHeight = this.normHeight * this._scale; + + $.extend( true, this, { //internal state properties viewer: null, @@ -87,7 +109,7 @@ $.Drawer = function( options ) { lastDrawn: [], // An unordered list of Tiles drawn last frame. lastResetTime: 0, // Last time for which the drawer was reset. midUpdate: false, // Is the drawer currently updating the viewport? - updateAgain: true, // Does the drawer need to update the viewort again? + updateAgain: true, // Does the drawer need to update the viewport again? //internal state / configurable settings @@ -130,11 +152,6 @@ $.Drawer = function( options ) { * @memberof OpenSeadragon.Drawer# */ this.context = this.useCanvas ? this.canvas.getContext( "2d" ) : null; - // Ratio of zoomable image height to width. - this.normHeight = this.source.dimensions.y / this.source.dimensions.x; - - this.worldWidth = this.scale; - this.worldHeight = this.normHeight * this.scale; /** * @member {Element} element @@ -365,7 +382,7 @@ function updateViewport( drawer ) { zeroRatioC = drawer.viewport.deltaPixelsFromPoints( drawer.source.getPixelRatio( 0 ), true - ).x * drawer.scale, + ).x * drawer._scale, lowestLevel = Math.max( drawer.source.minLevel, Math.floor( @@ -388,10 +405,10 @@ function updateViewport( drawer ) { levelOpacity, levelVisibility; - viewportTL.x -= drawer.x; - viewportTL.y -= drawer.y; - viewportBR.x -= drawer.x; - viewportBR.y -= drawer.y; + viewportTL.x -= drawer._worldX; + viewportTL.y -= drawer._worldY; + viewportBR.x -= drawer._worldX; + viewportBR.y -= drawer._worldY; // Reset tile's internal drawn state while ( drawer.lastDrawn.length > 0 ) { @@ -419,22 +436,22 @@ function updateViewport( drawer ) { //Don't draw if completely outside of the viewport if ( !drawer.wrapHorizontal && - ( viewportBR.x < 0 || viewportTL.x > drawer.worldWidth ) ) { + ( viewportBR.x < 0 || viewportTL.x > drawer._worldWidth ) ) { return; } else if ( !drawer.wrapVertical && - ( viewportBR.y < 0 || viewportTL.y > drawer.worldHeight ) ) { + ( viewportBR.y < 0 || viewportTL.y > drawer._worldHeight ) ) { return; } // Calculate viewport rect / bounds if ( !drawer.wrapHorizontal ) { viewportTL.x = Math.max( viewportTL.x, 0 ); - viewportBR.x = Math.min( viewportBR.x, drawer.worldWidth ); + viewportBR.x = Math.min( viewportBR.x, drawer._worldWidth ); } if ( !drawer.wrapVertical ) { viewportTL.y = Math.max( viewportTL.y, 0 ); - viewportBR.y = Math.min( viewportBR.y, drawer.worldHeight ); + viewportBR.y = Math.min( viewportBR.y, drawer._worldHeight ); } // Calculations for the interval of levels to draw @@ -451,7 +468,7 @@ function updateViewport( drawer ) { renderPixelRatioC = drawer.viewport.deltaPixelsFromPoints( drawer.source.getPixelRatio( level ), true - ).x * drawer.scale; + ).x * drawer._scale; if ( ( !haveDrawn && renderPixelRatioC >= drawer.minPixelRatio ) || ( level == lowestLevel ) ) { @@ -465,7 +482,7 @@ function updateViewport( drawer ) { renderPixelRatioT = drawer.viewport.deltaPixelsFromPoints( drawer.source.getPixelRatio( level ), false - ).x * drawer.scale; + ).x * drawer._scale; zeroRatioT = drawer.viewport.deltaPixelsFromPoints( drawer.source.getPixelRatio( @@ -475,7 +492,7 @@ function updateViewport( drawer ) { ) ), false - ).x * drawer.scale; + ).x * drawer._scale; optimalRatio = drawer.immediateRender ? 1 : @@ -561,8 +578,8 @@ function updateLevel( drawer, haveDrawn, drawLevel, level, levelOpacity, levelVi } //OK, a new drawing so do your calculations - tileTL = drawer.source.getTileAtPoint( level, viewportTL.divide( drawer.scale )); - tileBR = drawer.source.getTileAtPoint( level, viewportBR.divide( drawer.scale )); + tileTL = drawer.source.getTileAtPoint( level, viewportTL.divide( drawer._scale )); + tileBR = drawer.source.getTileAtPoint( level, viewportBR.divide( drawer._scale )); numberOfTiles = drawer.source.getNumTiles( level ); resetCoverage( drawer.coverage, level ); @@ -606,8 +623,8 @@ function updateTile( drawer, drawLevel, haveDrawn, x, y, level, levelOpacity, le drawer.tilesMatrix, currentTime, numberOfTiles, - drawer.worldWidth, - drawer.worldHeight + drawer._worldWidth, + drawer._worldHeight ), drawTile = drawLevel; @@ -810,15 +827,15 @@ function onTileLoad( drawer, tile, time, image ) { function positionTile( tile, overlap, viewport, viewportCenter, levelVisibility, drawer ){ var boundsTL = tile.bounds.getTopLeft(); - boundsTL.x *= drawer.scale; - boundsTL.y *= drawer.scale; - boundsTL.x += drawer.x; - boundsTL.y += drawer.y; + boundsTL.x *= drawer._scale; + boundsTL.y *= drawer._scale; + boundsTL.x += drawer._worldX; + boundsTL.y += drawer._worldY; var boundsSize = tile.bounds.getSize(); - boundsSize.x *= drawer.scale; - boundsSize.y *= drawer.scale; + boundsSize.x *= drawer._scale; + boundsSize.y *= drawer._scale; var positionC = viewport.pixelFromPoint( boundsTL, true ), positionT = viewport.pixelFromPoint( boundsTL, false ), diff --git a/src/viewer.js b/src/viewer.js index ffcc0b1b..21c307e5 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -1114,9 +1114,10 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, source: tileSource, viewport: _this.viewport, element: _this.drawersContainer, - x: options.x !== undefined ? options.x : 0, - y: options.y !== undefined ? options.y : 0, - scale: options.scale || 1, + x: options.x, + y: options.y, + width: options.width, + height: options.height, opacity: options.opacity !== undefined ? options.opacity : _this.opacity, maxImageCacheCount: _this.maxImageCacheCount, @@ -1916,6 +1917,8 @@ function openTileSource( viewer, source, options ) { var i, _this = viewer; + options = options || {}; + if ( _this.source ) { _this.close( ); } @@ -1980,6 +1983,10 @@ function openTileSource( viewer, source, options ) { source: _this.source, viewport: _this.viewport, element: _this.drawersContainer, + x: options.x, + y: options.y, + width: options.width, + height: options.height, opacity: _this.opacity, maxImageCacheCount: _this.maxImageCacheCount, imageLoaderLimit: _this.imageLoaderLimit, @@ -1993,10 +2000,7 @@ function openTileSource( viewer, source, options ) { timeout: _this.timeout, debugMode: _this.debugMode, debugGridColor: _this.debugGridColor, - crossOriginPolicy: _this.crossOriginPolicy, - x: options.x || 0, - y: options.y || 0, - scale: options.scale || 1 + crossOriginPolicy: _this.crossOriginPolicy }); _this.drawers = [_this.drawer]; diff --git a/test/demo/collections/main.js b/test/demo/collections/main.js index 7b6bfb81..3713ba26 100644 --- a/test/demo/collections/main.js +++ b/test/demo/collections/main.js @@ -7,6 +7,7 @@ this.viewer = OpenSeadragon( { debugMode: true, zoomPerScroll: 1.02, + // showNavigator: true, id: "contentDiv", prefixUrl: "../../../build/openseadragon/images/" } ); @@ -18,7 +19,7 @@ this.viewer.open("../../data/tall.dzi", { x: 1.5, y: 0, - scale: 1 + width: 1 }); }, @@ -31,7 +32,7 @@ opacity: 1, x: 0, y: 1.5, - scale: 4 + height: 1 }; var addLayerHandler = function( event ) { diff --git a/test/test.html b/test/test.html index 592847bd..227dba36 100644 --- a/test/test.html +++ b/test/test.html @@ -14,7 +14,7 @@ - +