From d6b187eb0688fcfbc7b7745bb0bc0ba0f4f22221 Mon Sep 17 00:00:00 2001 From: Mark Salsbery Date: Mon, 28 Oct 2013 12:36:29 -0700 Subject: [PATCH 1/3] Fix for non-canvas tile rendering at large size In USE_CANVAS==false mode, wrapped tile img elements in div elements to allow them to be rendered larger than their containing element without being stretched. --- src/tile.js | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/src/tile.js b/src/tile.js index 3ba62636..f7b2464c 100644 --- a/src/tile.js +++ b/src/tile.js @@ -55,7 +55,8 @@ * @property {String} url The URL of this tile's image. * @property {Boolean} loaded Is this tile loaded? * @property {Boolean} loading Is this tile loading - * @property {Element} element The HTML element for this tile + * @property {Element} element The HTML div element for this tile + * @property {Element} imgElement The HTML img element for this tile * @property {Image} image The Image object for this tile * @property {String} style The alias of this.element.style. * @property {String} position This tile's position on screen, in pixels. @@ -78,6 +79,7 @@ $.Tile = function(level, x, y, bounds, exists, url) { this.loading = false; this.element = null; + this.imgElement = null; this.image = null; this.style = null; @@ -122,9 +124,12 @@ $.Tile.prototype = { // content during animation of the container size. if ( !this.element ) { - this.element = $.makeNeutralElement("img"); - this.element.src = this.url; - this.element.style.msInterpolationMode = "nearest-neighbor"; + this.element = $.makeNeutralElement( "div" ); + this.imgElement = $.makeNeutralElement( "img" ); + this.imgElement.src = this.url; + this.imgElement.style.msInterpolationMode = "nearest-neighbor"; + this.imgElement.style.width = "100%"; + this.imgElement.style.height = "100%"; this.style = this.element.style; this.style.position = "absolute"; @@ -132,6 +137,9 @@ $.Tile.prototype = { if ( this.element.parentNode != container ) { container.appendChild( this.element ); } + if ( this.imgElement.parentNode != this.element ) { + this.element.appendChild( this.imgElement ); + } this.style.top = this.position.y + "px"; this.style.left = this.position.x + "px"; @@ -216,6 +224,9 @@ $.Tile.prototype = { * @function */ unload: function() { + if ( this.imgElement && this.imgElement.parentNode ) { + this.imgElement.parentNode.removeChild( this.imgElement ); + } if ( this.element && this.element.parentNode ) { this.element.parentNode.removeChild( this.element ); } @@ -224,6 +235,7 @@ $.Tile.prototype = { } this.element = null; + this.imgElement = null; this.image = null; this.loaded = false; this.loading = false; From cfd76a6fd96df97e6e896e331719a1422a28cdd8 Mon Sep 17 00:00:00 2001 From: Mark Salsbery Date: Mon, 28 Oct 2013 12:38:17 -0700 Subject: [PATCH 2/3] Whitespace fix --- src/tile.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/tile.js b/src/tile.js index f7b2464c..eb6f333c 100644 --- a/src/tile.js +++ b/src/tile.js @@ -234,11 +234,11 @@ $.Tile.prototype = { delete TILE_CACHE[ this.url ]; } - this.element = null; + this.element = null; this.imgElement = null; - this.image = null; - this.loaded = false; - this.loading = false; + this.image = null; + this.loaded = false; + this.loading = false; } }; From 9e5dcd766f7bd6d6ccaf0321addda900156fddcd Mon Sep 17 00:00:00 2001 From: Mark Salsbery Date: Wed, 30 Oct 2013 13:35:39 -0700 Subject: [PATCH 3/3] Punctuation fix --- src/tile.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/tile.js b/src/tile.js index eb6f333c..fc985d1e 100644 --- a/src/tile.js +++ b/src/tile.js @@ -54,7 +54,7 @@ * this tile failed to load? * @property {String} url The URL of this tile's image. * @property {Boolean} loaded Is this tile loaded? - * @property {Boolean} loading Is this tile loading + * @property {Boolean} loading Is this tile loading? * @property {Element} element The HTML div element for this tile * @property {Element} imgElement The HTML img element for this tile * @property {Image} image The Image object for this tile