From efdd9d0eb2c098bd892df7ffdd5ac00232a391f0 Mon Sep 17 00:00:00 2001
From: fredj <frederic.junod@camptocamp.com>
Date: Tue, 29 Nov 2011 17:21:15 +0100
Subject: [PATCH] don't create div for image tile when no gutter is used

---
 lib/OpenLayers/Layer.js                       |   5 +-
 lib/OpenLayers/Tile/Image.js                  | 108 ++++++++++--------
 lib/OpenLayers/Tile/Image/IFrame.js           |   9 +-
 tests/Layer/ArcGIS93Rest.html                 |  10 +-
 tests/Layer/MapServer.html                    |  10 +-
 tests/Layer/WMS.html                          |  16 +--
 tests/Tile/Image.html                         |  13 ++-
 tests/deprecated/Layer/MapServer/Untiled.html |   4 +-
 8 files changed, 93 insertions(+), 82 deletions(-)

diff --git a/lib/OpenLayers/Layer.js b/lib/OpenLayers/Layer.js
index fcc919833f..4c39b766c0 100644
--- a/lib/OpenLayers/Layer.js
+++ b/lib/OpenLayers/Layer.js
@@ -1271,8 +1271,9 @@ OpenLayers.Layer = OpenLayers.Class({
     setOpacity: function(opacity) {
         if (opacity != this.opacity) {
             this.opacity = opacity;
-            for(var i=0, len=this.div.childNodes.length; i<len; ++i) {
-                var element = this.div.childNodes[i].firstChild;
+            var childNodes = this.div.childNodes;
+            for(var i = 0, len = childNodes.length; i < len; ++i) {
+                var element = childNodes[i].firstChild || childNodes[i];
                 OpenLayers.Util.modifyDOMElement(element, null, null, null, 
                                                  null, null, null, opacity);
             }
diff --git a/lib/OpenLayers/Tile/Image.js b/lib/OpenLayers/Tile/Image.js
index 15646a679b..68c38b95d1 100644
--- a/lib/OpenLayers/Tile/Image.js
+++ b/lib/OpenLayers/Tile/Image.js
@@ -35,7 +35,8 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
     /**
      * Property: frame
      * {DOMElement} The image element is appended to the frame.  Any gutter on
-     * the image will be hidden behind the frame. 
+     * the image will be hidden behind the frame. If no gutter is set,
+     * this will be null.
      */ 
     frame: null, 
 
@@ -99,13 +100,15 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
         OpenLayers.Tile.prototype.initialize.apply(this, arguments);
 
         this.url = url; //deprecated remove me
-
-        this.frame = document.createElement("div");
-        this.frame.style.position = "absolute";
-        this.frame.style.overflow = "hidden";
         
         this.layerAlphaHack = this.layer.alpha && OpenLayers.Util.alphaHack();
 
+        if (this.maxGetUrlLength != null || this.layer.gutter || this.layerAlphaHack) {
+            // only create frame if it's needed
+            this.frame = document.createElement("div");
+            this.frame.style.position = "absolute";
+            this.frame.style.overflow = "hidden";
+        }
         if (this.maxGetUrlLength != null) {
             OpenLayers.Util.extend(this, OpenLayers.Tile.Image.IFrame);
         }
@@ -116,7 +119,7 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
      * nullify references to prevent circular references and memory leaks
      */
     destroy: function() {
-        if (this.frame != null)  {
+        if (this.imgDiv)  {
             this.clear();
             this.imgDiv = null;
             this.frame = null;
@@ -162,7 +165,7 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
      *     position it correctly, and set its url.
      */
     renderTile: function() {
-        this.layer.div.appendChild(this.frame);
+        this.layer.div.appendChild(this.getTile());
         if (this.layer.async) {
             // Asynchronous image requests call the asynchronous getURL method
             // on the layer to fetch an image that covers 'this.bounds', in the scope of
@@ -188,7 +191,7 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
      * code.
      */
     positionTile: function() {
-        var style = this.frame.style;
+        var style = this.getTile().style;
         style.left = this.position.x + "%";
         style.top = this.position.y + "%";
         style.width = this.size.w + "%";
@@ -204,8 +207,9 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
         var img = this.imgDiv;
         if (img) {
             OpenLayers.Event.stopObservingElement(img);
-            if (this.frame.parentNode === this.layer.div) {
-                this.layer.div.removeChild(this.frame);
+            var tile = this.getTile();
+            if (tile.parentNode === this.layer.div) {
+                this.layer.div.removeChild(tile);
             }
             this.setImgSrc();
             if (this.layerAlphaHack === true) {
@@ -216,45 +220,49 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
     },
     
     /**
-     * Method: createImage
-     * Creates the content for the frame on the tile.
+     * Method: getImage
+     * Returns or creates and returns the tile image.
      */
-    createImage: function() {
-        var img = document.createElement("img");
-        this.imgDiv = img;
+    getImage: function() {
+        if (!this.imgDiv) {
+            this.imgDiv = document.createElement("img");
 
-        img.className = "olTileImage";
-        // avoid image gallery menu in IE6
-        img.galleryImg = "no";
+            this.imgDiv.className = "olTileImage";
+            // avoid image gallery menu in IE6
+            this.imgDiv.galleryImg = "no";
 
-        var style = img.style,
-            gutter = this.layer.gutter;
-        if (gutter) {
-            var tileSize = this.layer.tileSize,
-                left = (gutter / tileSize.w * 100),
-                top = (gutter / tileSize.h * 100);
-            style.left = -left + "%";
-            style.top = -top + "%";
-            style.width = (2 * left + 100) + "%";
-            style.height = (2 * top + 100) + "%";
+            var style = this.imgDiv.style;
+            if (this.layer.gutter) {
+                var left = this.layer.gutter / this.layer.tileSize.w * 100;
+                var top = this.layer.gutter / this.layer.tileSize.h * 100;
+                style.left = -left + "%";
+                style.top = -top + "%";
+                style.width = (2 * left + 100) + "%";
+                style.height = (2 * top + 100) + "%";
+                style.position = "absolute";
+            } else {
+                style.width = "100%";
+                style.height = "100%";
+            }
+            style.display = "none";
             style.position = "absolute";
-        } else {
-            style.width = "100%";
-            style.height = "100%";
-        }
-        style.display = "none";
-        if (this.layer.opacity < 1) {
-            OpenLayers.Util.modifyDOMElement(img, null, null, null, null, null,
-                null, this.layer.opacity);
-        }
-        if (this.layerAlphaHack) {
-            // move the image out of sight
-            style.paddingTop = style.height;
-            style.height = "0";
+            if (this.layer.opacity < 1) {
+                OpenLayers.Util.modifyDOMElement(this.imgDiv, null, null, 
+                                                 null, null, null, null, 
+                                                 this.layer.opacity);
+            }
+            if (this.layerAlphaHack) {
+                // move the image out of sight
+                style.paddingTop = style.height;
+                style.height = "0";
+                style.width = "100%";
+            }
+            if (this.frame) {
+                this.frame.appendChild(this.imgDiv);
+            }
         }
 
-        this.frame.appendChild(img);
-        return img;
+        return this.imgDiv;
     },
 
     /**
@@ -262,7 +270,7 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
      * Creates the content for the frame on the tile.
      */
     initImage: function() {
-        var img = this.imgDiv || this.createImage();
+        var img = this.getImage();
         if (this.url && img.getAttribute("src") == this.url) {
             this.onImageLoad();
         } else {
@@ -318,7 +326,7 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
      * {DOMElement} The tile's markup
      */
     getTile: function() {
-        return this.frame;
+        return this.frame ? this.frame : this.getImage();
     },
 
     /**
@@ -332,11 +340,13 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
      * or if it's currently loading.
      */
     createBackBuffer: function() {
-        if(!this.imgDiv || this.isLoading) {
-            return;
+        var backBuffer;
+        if (this.frame) {
+            backBuffer = this.frame.cloneNode(false);
+            backBuffer.appendChild(this.imgDiv);
+        } else {
+            backBuffer = this.imgDiv;
         }
-        var backBuffer = this.frame.cloneNode(false);
-        backBuffer.appendChild(this.imgDiv);
         this.imgDiv = null;
         return backBuffer;
     },
diff --git a/lib/OpenLayers/Tile/Image/IFrame.js b/lib/OpenLayers/Tile/Image/IFrame.js
index d67db5f70e..f1ad52f1d4 100644
--- a/lib/OpenLayers/Tile/Image/IFrame.js
+++ b/lib/OpenLayers/Tile/Image/IFrame.js
@@ -55,7 +55,7 @@ OpenLayers.Tile.Image.IFrame = {
 
                 // We remove the imgDiv (really either an image or an iframe)
                 // from the frame and set it to null to make sure initImage
-                // will call createImage.
+                // will call getImage.
 
                 if(this.imgDiv && this.imgDiv.parentNode === this.frame) {
                     this.frame.removeChild(this.imgDiv);
@@ -73,10 +73,10 @@ OpenLayers.Tile.Image.IFrame = {
     },
 
     /**
-     * Method: createImage
+     * Method: getImage
      * Creates the content for the frame on the tile.
      */
-    createImage: function() {
+    getImage: function() {
         if (this.useIFrame === true) {
             if (!this.frame.childNodes.length) {
                 var eventPane = document.createElement("div"),
@@ -130,7 +130,7 @@ OpenLayers.Tile.Image.IFrame = {
             this.imgDiv = iframe;
             return iframe;
         } else {
-            return OpenLayers.Tile.Image.prototype.createImage.apply(this, arguments);
+            return OpenLayers.Tile.Image.prototype.getImage.apply(this, arguments);
         }
     },
 
@@ -180,7 +180,6 @@ OpenLayers.Tile.Image.IFrame = {
         if (this.useIFrame === true) {
             if (url) {
                 var form = this.createRequestForm();
-                this.frame.appendChild(this.imgDiv);
                 this.frame.appendChild(form);
                 form.submit();
                 this.frame.removeChild(form);
diff --git a/tests/Layer/ArcGIS93Rest.html b/tests/Layer/ArcGIS93Rest.html
index ff11955dbb..4f1a4c618d 100644
--- a/tests/Layer/ArcGIS93Rest.html
+++ b/tests/Layer/ArcGIS93Rest.html
@@ -75,10 +75,10 @@
         t.eq( tile.url,
              url + "?" + OpenLayers.Util.getParameterString(tParams),
              "image src is created correctly via addtile" );
-        t.eq( tile.frame.style.top, "6%", "image top is set correctly via addtile" );
-        t.eq( tile.frame.style.left, "5%", "image top is set correctly via addtile" );
+        t.eq( tile.getTile().style.top, "6%", "image top is set correctly via addtile" );
+        t.eq( tile.getTile().style.left, "5%", "image top is set correctly via addtile" );
 
-        var firstChild = layer.div.firstChild.firstChild;
+        var firstChild = layer.div.firstChild;
         t.eq( firstChild.nodeName.toLowerCase(), "img", "div first child is an image object" );
         t.ok( firstChild == img, "div first child is correct image object" );
         t.eq( tile.position.toString(), "x=5,y=6", "Position of tile is set correctly." );
@@ -203,10 +203,10 @@
         map.addLayer(tLayer);
         map.zoomToMaxExtent();
         t.eq(tLayer.opacity, "0.5", "Opacity is set correctly");
-        t.eq(parseFloat(tLayer.div.firstChild.firstChild.style.opacity), 0.5, "Opacity on tile is correct");
+        t.eq(parseFloat(tLayer.div.firstChild.style.opacity), 0.5, "Opacity on tile is correct");
         tLayer.setOpacity("0.6");
         t.eq(tLayer.opacity, "0.6", "setOpacity works properly");
-        t.eq(parseFloat(tLayer.div.firstChild.firstChild.style.opacity), 0.6, "Opacity on tile is changed correctly");
+        t.eq(parseFloat(tLayer.div.firstChild.style.opacity), 0.6, "Opacity on tile is changed correctly");
         var pixel = new OpenLayers.Pixel(5,6);
         var tile = tLayer.addTile(new OpenLayers.Bounds(1,2,3,4), pixel);
         tile.draw();
diff --git a/tests/Layer/MapServer.html b/tests/Layer/MapServer.html
index 59757d89cc..16e59156e3 100644
--- a/tests/Layer/MapServer.html
+++ b/tests/Layer/MapServer.html
@@ -56,10 +56,10 @@
         t.eq( tile.url,
              url + "?" + OpenLayers.Util.getParameterString(tParams).replace(/,/g, "+"),
              "image src is created correctly via addtile" );
-        t.eq( tile.frame.style.top, "6%", "image top is set correctly via addtile" );
-        t.eq( tile.frame.style.left, "5%", "image top is set correctly via addtile" );
+        t.eq( tile.getTile().style.top, "6%", "image top is set correctly via addtile" );
+        t.eq( tile.getTile().style.left, "5%", "image top is set correctly via addtile" );
 
-        var firstChild = layer.div.firstChild.firstChild;
+        var firstChild = layer.div.firstChild;
         t.eq( firstChild.nodeName.toLowerCase(), "img", "div first child is an image object" );
         t.ok( firstChild == img, "div first child is correct image object" );
         t.eq( tile.position.toString(), "x=5,y=6", "Position of tile is set correctly." );
@@ -204,10 +204,10 @@
         map.addLayer(tLayer);
         map.zoomToMaxExtent();
         t.eq(tLayer.opacity, "0.5", "Opacity is set correctly");
-        t.eq(parseFloat(tLayer.div.firstChild.firstChild.style.opacity), 0.5, "Opacity on tile is correct");
+        t.eq(parseFloat(tLayer.div.firstChild.style.opacity), 0.5, "Opacity on tile is correct");
         tLayer.setOpacity("0.6");
         t.eq(tLayer.opacity, "0.6", "setOpacity works properly");
-        t.eq(parseFloat(tLayer.div.firstChild.firstChild.style.opacity), 0.6, "Opacity on tile is changed correctly");
+        t.eq(parseFloat(tLayer.div.firstChild.style.opacity), 0.6, "Opacity on tile is changed correctly");
         var pixel = new OpenLayers.Pixel(5,6);
         var tile = tLayer.addTile(new OpenLayers.Bounds(1,2,3,4), pixel);
         tile.draw();
diff --git a/tests/Layer/WMS.html b/tests/Layer/WMS.html
index 3bba3c821b..a07b36c1d9 100644
--- a/tests/Layer/WMS.html
+++ b/tests/Layer/WMS.html
@@ -86,10 +86,10 @@
         t.eq( tile.url,
              layer.getFullRequestString(tParams),
              "image src is created correctly via addtile" );
-        t.eq( tile.frame.style.top, "6%", "image top is set correctly via addtile" );
-        t.eq( tile.frame.style.left, "5%", "image top is set correctly via addtile" );
+        t.eq( tile.getTile().style.top, "6%", "image top is set correctly via addtile" );
+        t.eq( tile.getTile().style.left, "5%", "image top is set correctly via addtile" );
 
-        var firstChild = layer.div.firstChild.firstChild;
+        var firstChild = layer.div.firstChild;
         t.eq( firstChild.nodeName.toLowerCase(), "img", "div first child is an image object" );
         t.ok( firstChild == img, "div first child is correct image object" );
         t.eq( tile.position.toString(), "x=5,y=6", "Position of tile is set correctly." );
@@ -117,10 +117,10 @@
         t.eq( tile.url,
              layer.getFullRequestString(tParams),
              "image src is created correctly via addtile" );
-        t.eq( tile.frame.style.top, "6%", "image top is set correctly via addtile" );
-        t.eq( tile.frame.style.left, "5%", "image top is set correctly via addtile" );
+        t.eq( tile.getTile().style.top, "6%", "image top is set correctly via addtile" );
+        t.eq( tile.getTile().style.left, "5%", "image top is set correctly via addtile" );
 
-        var firstChild = layer.div.firstChild.firstChild;
+        var firstChild = layer.div.firstChild;
         t.eq( firstChild.nodeName.toLowerCase(), "img", "div first child is an image object" );
         t.ok( firstChild, img, "div first child is correct image object" );
         t.eq( tile.position.toString(), "x=5,y=6", "Position of tile is set correctly." );
@@ -284,10 +284,10 @@
         map.addLayer(tLayer);
         map.zoomToMaxExtent();
         t.eq(tLayer.opacity, "0.5", "Opacity is set correctly");
-        t.eq(parseFloat(tLayer.div.firstChild.firstChild.style.opacity), 0.5, "Opacity on tile is correct");
+        t.eq(parseFloat(tLayer.div.firstChild.style.opacity), 0.5, "Opacity on tile is correct");
         tLayer.setOpacity("0.6");
         t.eq(tLayer.opacity, "0.6", "setOpacity works properly");
-        t.eq(parseFloat(tLayer.div.firstChild.firstChild.style.opacity), 0.6, "Opacity on tile is changed correctly");
+        t.eq(parseFloat(tLayer.div.firstChild.style.opacity), 0.6, "Opacity on tile is changed correctly");
         var pixel = new OpenLayers.Pixel(5,6);
         var tile = tLayer.addTile(new OpenLayers.Bounds(1,2,3,4), pixel);
         tile.draw();
diff --git a/tests/Tile/Image.html b/tests/Tile/Image.html
index fcad0917c7..0f71c542dd 100644
--- a/tests/Tile/Image.html
+++ b/tests/Tile/Image.html
@@ -110,7 +110,7 @@
     }
 
     function test_Tile_Image_draw (t) {
-        t.plan( 7 );
+        t.plan(8);
 
         var map = new OpenLayers.Map('map');
         
@@ -157,8 +157,9 @@
                  "http://labs.metacarta.com/TESTURL?" + OpenLayers.Util.getParameterString(tParams),
                  "tile.draw creates an image");
         });
-        t.eq( tile.imgDiv.style.width, "100%", "Image width is correct" );
-        t.eq( tile.imgDiv.style.height, "100%", "Image height is correct" );
+        t.eq( tile.imgDiv.style.width, "5%", "Image width is correct" );
+        t.eq( tile.imgDiv.style.height, "6%", "Image height is correct" );
+        t.ok( tile.imgDiv.parentNode === layer.div, "Image is directly appended to the layer div" ); 
 
         // this should trigger a "reload" event (since the image never actually
         // loads in tests)
@@ -334,10 +335,10 @@
         OpenLayers.Event.stopObservingElement(tile.imgDiv);
 
         var img = tile.imgDiv;
+        var left = img.style.left;
         var bb = tile.createBackBuffer();
-        t.eq(bb.style.left, tile.frame.style.left,
-             "backbuffer has same left style as frame");
-        t.ok(bb.firstChild === img, "image appended to bb");
+        t.eq(bb.style.left, left, "backbuffer has same left style as frame");
+        t.ok(bb === img, "image appended to bb");
         t.ok(tile.imgDiv == null, "image reference removed from tile");
         map.destroy();
     }
diff --git a/tests/deprecated/Layer/MapServer/Untiled.html b/tests/deprecated/Layer/MapServer/Untiled.html
index 3ef70cc56f..fd9e5adfdd 100644
--- a/tests/deprecated/Layer/MapServer/Untiled.html
+++ b/tests/deprecated/Layer/MapServer/Untiled.html
@@ -131,10 +131,10 @@
         map.addLayer(tLayer);
         map.zoomToMaxExtent();
         t.eq(tLayer.opacity, "0.5", "Opacity is set correctly");
-        t.eq(parseFloat(tLayer.div.firstChild.firstChild.style.opacity), 0.5, "Opacity on tile is correct");
+        t.eq(parseFloat(tLayer.div.firstChild.style.opacity), 0.5, "Opacity on tile is correct");
         tLayer.setOpacity("0.6");
         t.eq(tLayer.opacity, "0.6", "setOpacity works properly");
-        t.eq(parseFloat(tLayer.div.firstChild.firstChild.style.opacity), 0.6, "Opacity on tile is changed correctly");
+        t.eq(parseFloat(tLayer.div.firstChild.style.opacity), 0.6, "Opacity on tile is changed correctly");
         map.destroy();
 
     }