Merge pull request #1426 from openseadragon/ig-square

Now supporting square edge tiles that are padded rather than cropped

src/tile.js

@@ -40,7 +40,7 @@
  * @param {Number} level The zoom level this tile belongs to.
  * @param {Number} x The vector component 'x'.
  * @param {Number} y The vector component 'y'.
- * @param {OpenSeadragon.Point} bounds Where this tile fits, in normalized
+ * @param {OpenSeadragon.Rect} bounds Where this tile fits, in normalized
  *      coordinates.
  * @param {Boolean} exists Is this tile a part of a sparse image? ( Also has
  *      this tile failed to load? )
@@ -49,8 +49,11 @@
  * is provided directly by the tile source.
  * @param {Boolean} loadWithAjax Whether this tile image should be loaded with an AJAX request .
  * @param {Object} ajaxHeaders The headers to send with this tile's AJAX request (if applicable).
+ * @param {OpenSeadragon.Rect} sourceBounds The portion of the tile to use as the source of the
+ * drawing operation, in pixels. Note that this only works when drawing with canvas; when drawing
+ * with HTML the entire tile is always used.
  */
-$.Tile = function(level, x, y, bounds, exists, url, context2D, loadWithAjax, ajaxHeaders) {
+$.Tile = function(level, x, y, bounds, exists, url, context2D, loadWithAjax, ajaxHeaders, sourceBounds) {
     /**
      * The zoom level this tile belongs to.
      * @member {Number} level
@@ -75,6 +78,13 @@ $.Tile = function(level, x, y, bounds, exists, url, context2D, loadWithAjax, aja
      * @memberof OpenSeadragon.Tile#
      */
     this.bounds  = bounds;
+    /**
+    * The portion of the tile to use as the source of the drawing operation, in pixels. Note that
+    * this only works when drawing with canvas; when drawing with HTML the entire tile is always used.
+    * @member {OpenSeadragon.Rect} sourceBounds
+    * @memberof OpenSeadragon.Tile#
+    */
+    this.sourceBounds = sourceBounds;
     /**
      * Is this tile a part of a sparse image? Also has this tile failed to load?
      * @member {Boolean} exists
@@ -357,12 +367,16 @@ $.Tile.prototype = {
         // changes as we are rendering the image
         drawingHandler({context: context, tile: this, rendered: rendered});
 
+        if (!this.sourceBounds) { // Just in case
+            this.sourceBounds = new $.Rect(0, 0, rendered.canvas.width, rendered.canvas.height);
+        }
+
         context.drawImage(
             rendered.canvas,
-            0,
+            this.sourceBounds.x,
-            0,
+            this.sourceBounds.y,
-            rendered.canvas.width,
+            this.sourceBounds.width,
-            rendered.canvas.height,
+            this.sourceBounds.height,
             position.x,
             position.y,
             size.x,

src/tiledimage.js

@@ -1372,6 +1372,7 @@ function getTile(
     var xMod,
         yMod,
         bounds,
+        sourceBounds,
         exists,
         url,
         ajaxHeaders,
@@ -1389,6 +1390,7 @@ function getTile(
         xMod    = ( numTiles.x + ( x % numTiles.x ) ) % numTiles.x;
         yMod    = ( numTiles.y + ( y % numTiles.y ) ) % numTiles.y;
         bounds  = tileSource.getTileBounds( level, xMod, yMod );
+        sourceBounds = tileSource.getTileBounds( level, xMod, yMod, true );
         exists  = tileSource.tileExists( level, xMod, yMod );
         url     = tileSource.getTileUrl( level, xMod, yMod );
 
@@ -1418,7 +1420,8 @@ function getTile(
             url,
             context2D,
             tiledImage.loadTilesWithAjax,
-            ajaxHeaders
+            ajaxHeaders,
+            sourceBounds
         );
 
         if (xMod === numTiles.x - 1) {

src/tilesource.js

@@ -373,8 +373,12 @@ $.TileSource.prototype = {
      * @param {Number} level
      * @param {Number} x
      * @param {Number} y
+     * @param {Boolean} [isSource=false] Whether to return the source bounds of the tile.
+     * @returns {OpenSeadragon.Rect} Either where this tile fits (in normalized coordinates) or the
+     * portion of the tile to use as the source of the drawing operation (in pixels), depending on
+     * the isSource parameter.
      */
-    getTileBounds: function( level, x, y ) {
+    getTileBounds: function( level, x, y, isSource ) {
         var dimensionsScaled = this.dimensions.times( this.getLevelScale( level ) ),
             tileWidth = this.getTileWidth(level),
             tileHeight = this.getTileHeight(level),
@@ -387,6 +391,12 @@ $.TileSource.prototype = {
         sx = Math.min( sx, dimensionsScaled.x - px );
         sy = Math.min( sy, dimensionsScaled.y - py );
 
+        if (isSource) {
+            scale = 1;
+            px = 0;
+            py = 0;
+        }
+
         return new $.Rect( px * scale, py * scale, sx * scale, sy * scale );
     },