a "big back buffer" attempt

lib/OpenLayers/Layer/Grid.js

@@ -111,6 +111,8 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
      */
     timerId: null,
 
+    backBufferData: null,
+
     /**
      * Constructor: OpenLayers.Layer.Grid
      * Create a new grid layer
@@ -133,6 +135,7 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
         this.events.addEventType("tileloaded");
 
         this.grid = [];
+        this.backBufferData = {};
         
         this._moveGriddedTiles = OpenLayers.Function.bind(
             this.moveGriddedTiles, this
@@ -216,6 +219,10 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
         return obj;
     },    
 
+    setBackBufferData: function() {
+        this.backBufferData.resolution = this.getServerResolution();
+    },
+
     /**
      * Method: moveTo
      * This function is called whenever the map is moved. All the moving
@@ -281,6 +288,30 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
                 }
 
                 if(forceReTile) {
+
+                    if(OpenLayers.Util.indexOf(
+                            this.SUPPORTED_TRANSITIONS,
+                            this.transitionEffect) != -1) {
+                        if(!this.backBufferData.backBuffer) {
+                            this.backBufferData.backBuffer = this.createBackBuffer();
+                            if(this.backBufferData.backBuffer) {
+                                this.div.insertBefore(this.backBufferData.backBuffer,
+                                                      this.div.firstChild);
+                            }
+                        }
+                        if(this.backBufferData.backBuffer && this.backBufferData.resolution) {
+                            var resolution = this.getServerResolution();
+                            var scale = this.backBufferData.resolution / resolution;
+                            this.backBufferData.backBuffer.style.width = 100 * scale + '%';
+                            this.backBufferData.backBuffer.style.height = 100 * scale + '%';
+                            var lonLat = {lon: tilesBounds.left, lat: tilesBounds.top},
+                                position = this.getViewPortPxFromLonLat(lonLat, resolution);
+                            this.backBufferData.backBuffer.style.left = position.x + '%';
+                            this.backBufferData.backBuffer.style.top = position.y + '%';
+                        }
+
+                    }
+
                     this.initGriddedTiles(bounds);
                 } else {
                     this.scheduleMoveGriddedTiles();
@@ -289,6 +320,31 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
         }
     },
 
+    createBackBuffer: function() {
+        var backBuffer;
+        if(this.grid.length > 0) {
+            var backBuffer = document.createElement('div');
+            backBuffer.id = this.div.id + '_bb';
+            backBuffer.style.position = 'absolute';
+            backBuffer.style.left = '0%';
+            backBuffer.style.top = '0%';
+            backBuffer.style.width = '100%';
+            backBuffer.style.height = '100%';
+            for(var i=0, lenI=this.grid.length; i<lenI; i++) {
+                for(var j=0, lenJ=this.grid[i].length; j<lenJ; j++) {
+                    var tile = this.grid[i][j].cloneMarkup();
+                    if(!tile) {
+                        return;
+                    }
+                    tile.style.left = (j * this.tileSize.w) + '%';
+                    tile.style.top = (i * this.tileSize.h) + '%';
+                    backBuffer.appendChild(tile);
+                }
+            }
+        }
+        return backBuffer;
+    },
+
     /**
      * Method: getServerResolution
      * Return the server-supported resolution that is the closest to
@@ -790,6 +846,11 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
             //if that was the last tile, then trigger a 'loadend' on the layer
             if (this.numLoadingTiles == 0) {
                 this.events.triggerEvent("loadend");
+                if(this.backBufferData.backBuffer) {
+                    this.div.removeChild(this.backBufferData.backBuffer);
+                    this.backBufferData.backBuffer = null;
+                }
+                this.setBackBufferData();
             }
         };
         tile.events.register("loadend", this, tile.onLoadEnd);
@@ -993,6 +1054,6 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, {
                                      tileLeft + tileMapWidth,
                                      tileBottom + tileMapHeight);
     },
-    
+
     CLASS_NAME: "OpenLayers.Layer.Grid"
 });

lib/OpenLayers/Tile/Image.js

@@ -17,7 +17,7 @@
  * Inherits from:
  *  - <OpenLayers.Tile.BackBufferable>
  */
-OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile.BackBufferable, {
+OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
 
     /** 
      * Property: url
@@ -96,7 +96,7 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile.BackBufferable, {
      * options - {Object}
      */   
     initialize: function(layer, position, bounds, url, size, options) {
-        OpenLayers.Tile.BackBufferable.prototype.initialize.apply(this, arguments);
+        OpenLayers.Tile.prototype.initialize.apply(this, arguments);
 
         this.url = url; //deprecated remove me
 
@@ -123,7 +123,7 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile.BackBufferable, {
         }
         // don't handle async requests any more
         this.asyncRequestId = null;
-        OpenLayers.Tile.BackBufferable.prototype.destroy.apply(this, arguments);
+        OpenLayers.Tile.prototype.destroy.apply(this, arguments);
     },
     
     /**
@@ -134,7 +134,7 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile.BackBufferable, {
      * {Boolean} Was a tile drawn?
      */
     draw: function() {
-        var drawn = OpenLayers.Tile.BackBufferable.prototype.draw.apply(this, arguments);
+        var drawn = OpenLayers.Tile.prototype.draw.apply(this, arguments);
         if (drawn) {
             if (this.layer != this.layer.map.baseLayer && this.layer.reproject) {
                 this.bounds = this.getBoundsFromBaseLayer(this.position);
@@ -335,6 +335,16 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile.BackBufferable, {
         return frame;
     },
 
+    cloneMarkup: function() {
+        if(!this.imgDiv || this.isLoading) {
+            return;
+        }
+        var clone = this.frame.cloneNode(false);
+        clone.appendChild(this.imgDiv);
+        this.imgDiv = null;
+        return clone;
+    },
+
     /**
      * Method: onImageLoad
      * Handler for the image onload event