Drawer creation now supports width or height rather than scale.

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,
+    // Ratio of zoomable image height to width.
-        y: 0,
+    this.normHeight = options.source.dimensions.y / options.source.dimensions.x;
-        scale: 1,
+
+    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.x -= drawer._worldX;
-    viewportTL.y -= drawer.y;
+    viewportTL.y -= drawer._worldY;
-    viewportBR.x -= drawer.x;
+    viewportBR.x -= drawer._worldX;
-    viewportBR.y -= drawer.y;
+    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 ));
+    tileTL    = drawer.source.getTileAtPoint( level, viewportTL.divide( drawer._scale ));
-    tileBR    = drawer.source.getTileAtPoint( level, viewportBR.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._worldWidth,
-            drawer.worldHeight
+            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.x *= drawer._scale;
-    boundsTL.y *= drawer.scale;
+    boundsTL.y *= drawer._scale;
-    boundsTL.x += drawer.x;
+    boundsTL.x += drawer._worldX;
-    boundsTL.y += drawer.y;
+    boundsTL.y += drawer._worldY;
 
     var boundsSize   = tile.bounds.getSize();
 
-    boundsSize.x *= drawer.scale;
+    boundsSize.x *= drawer._scale;
-    boundsSize.y *= drawer.scale;
+    boundsSize.y *= drawer._scale;
 
     var positionC    = viewport.pixelFromPoint( boundsTL, true ),
         positionT    = viewport.pixelFromPoint( boundsTL, false ),

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,
+                x: options.x,
-                y: options.y !== undefined ? options.y : 0,
+                y: options.y,
-                scale: options.scale || 1,
+                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,
+        crossOriginPolicy:  _this.crossOriginPolicy
-        x: options.x || 0,
-        y: options.y || 0,
-        scale: options.scale || 1
     });
     _this.drawers = [_this.drawer];
 

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 ) {

test/test.html

@@ -14,7 +14,7 @@
     <script src="/test/lib/jquery-1.9.1.min.js"></script>
     <script src="/test/lib/jquery-ui-1.10.2/js/jquery-ui-1.10.2.min.js"></script>
     <script src="/test/lib/jquery.simulate.js"></script>
-    <script src="/build/openseadragon/openseadragon.min.js"></script>
+    <script src="/build/openseadragon/openseadragon.js"></script>
     <script src="/test/legacy.mouse.shim.js"></script>
     <script src="/test/test.js"></script>