Merge pull request #441 from elemoine/gutter

Tiles with gutters are shifted

lib/OpenLayers/Tile/Image.js

@@ -211,7 +211,8 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
      */
     positionTile: function() {
         var style = this.getTile().style,
-            size = this.layer.getImageSize(this.bounds);
+            size = this.frame ? this.size :
+                                this.layer.getImageSize(this.bounds);
         style.left = this.position.x + "%";
         style.top = this.position.y + "%";
         style.width = size.w + "%";
@@ -254,11 +255,16 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
             this.imgDiv.galleryImg = "no";
 
             var style = this.imgDiv.style;
-            if (this.layer.gutter) {
+            if (this.frame) {
-                var left = this.layer.gutter / this.layer.tileSize.w * 100;
+                var left = 0, top = 0;
-                var top = this.layer.gutter / this.layer.tileSize.h * 100;
+                if (this.layer.gutter) {
+                    left = this.layer.gutter / this.layer.tileSize.w * 100;
+                    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.visibility = "hidden";
             style.opacity = 0;
@@ -275,8 +281,6 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
                 style.width = "100%";
             }
             if (this.frame) {
-                style.width = "100%";
-                style.height = "100%";
                 this.frame.appendChild(this.imgDiv);
             }
         }

tests/Tile/Image.html

@@ -399,6 +399,97 @@
         }
     }
 
+    /*
+     * A series of tests to verify the dimensions and positions
+     * of the tile frame and img after draw.
+
+     * Written for https://github.com/openlayers/openlayers/issues/441
+     */
+    function test_draw_without_gutter_without_frame(t) {
+        t.plan(5);
+
+        var map = new OpenLayers.Map('map');
+        var layer = new OpenLayers.Layer.WMS('blank',
+                        '../../img/blank.gif',
+                        {layers: 'fake'},
+                        {isBaseLayer: true});
+        map.addLayer(layer);
+        var tile = new OpenLayers.Tile.Image(
+                            layer,
+                            new OpenLayers.Pixel(6, 6),
+                            new OpenLayers.Bounds(5, 45, 6, 46),
+                            null,
+                            new OpenLayers.Size(256, 256));
+
+        tile.draw();
+        t.eq(tile.frame, null, 'no frame');
+        t.eq(parseInt(tile.imgDiv.style.left, 10), 6, 'correct tile img left');
+        t.eq(parseInt(tile.imgDiv.style.top, 10), 6, 'correct tile img top');
+        t.eq(parseInt(tile.imgDiv.style.width, 10), 256, 'correct tile img width');
+        t.eq(parseInt(tile.imgDiv.style.height, 10), 256, 'correct tile img height');
+
+        map.destroy();
+    }
+    function test_draw_without_gutter_with_frame(t) {
+        t.plan(8);
+
+        var map = new OpenLayers.Map('map');
+        var layer = new OpenLayers.Layer.WMS('blank',
+                        '../../img/blank.gif',
+                        {layers: 'fake'},
+                        {isBaseLayer: true});
+        map.addLayer(layer);
+        layer.gutter = 1; // this is just for a frame to be created for
+                          // the tile
+        var tile = new OpenLayers.Tile.Image(
+                            layer,
+                            new OpenLayers.Pixel(6, 6),
+                            new OpenLayers.Bounds(5, 45, 6, 46),
+                            null,
+                            new OpenLayers.Size(256, 256));
+        layer.gutter = null;
+
+        tile.draw();
+        t.eq(parseInt(tile.frame.style.left, 10), 6, 'correct tile frame left');
+        t.eq(parseInt(tile.frame.style.top, 10), 6, 'correct tile frame top');
+        t.eq(parseInt(tile.frame.style.width, 10), 256, 'correct tile frame width');
+        t.eq(parseInt(tile.frame.style.height, 10), 256, 'correct tile frame height');
+        t.eq(parseInt(tile.imgDiv.style.left, 10), 0, 'correct tile img left');
+        t.eq(parseInt(tile.imgDiv.style.top, 10), 0, 'correct tile img top');
+        t.eq(parseInt(tile.imgDiv.style.width, 10), 100, 'correct tile img width');
+        t.eq(parseInt(tile.imgDiv.style.height, 10), 100, 'correct tile img height');
+
+        map.destroy();
+    }
+    function test_draw_with_gutter(t) {
+        t.plan(8);
+
+        var map = new OpenLayers.Map('map');
+        var layer = new OpenLayers.Layer.WMS('blank',
+                        '../../img/blank.gif',
+                        {layers: 'fake'},
+                        {isBaseLayer: true, gutter: 15});
+        map.addLayer(layer);
+        var tile = new OpenLayers.Tile.Image(
+                            layer,
+                            new OpenLayers.Pixel(6, 6),
+                            new OpenLayers.Bounds(5, 45, 6, 46),
+                            null,
+                            new OpenLayers.Size(256, 256));
+
+        tile.draw();
+        t.eq(parseInt(tile.frame.style.left, 10), 6, 'correct tile frame left');
+        t.eq(parseInt(tile.frame.style.top, 10), 6, 'correct tile frame top');
+        t.eq(parseInt(tile.frame.style.width, 10), 256, 'correct tile frame width');
+        t.eq(parseInt(tile.frame.style.height, 10), 256, 'correct tile frame height');
+        t.eq(parseInt(tile.imgDiv.style.left, 10), -5, 'correct tile img left');
+        t.eq(parseInt(tile.imgDiv.style.top, 10), -5, 'correct tile img top');
+        t.eq(parseInt(tile.imgDiv.style.width, 10), 111, 'correct tile img width');
+        t.eq(parseInt(tile.imgDiv.style.height, 10), 111, 'correct tile img height');
+
+        map.destroy();
+    }
+
   </script>
 </head>
 <body>