Implement frame state and animation architecture

src/ol/renderer/dom/domlayerrenderer.js

@@ -1,7 +1,9 @@
 goog.provide('ol.renderer.dom.Layer');
 
 goog.require('ol.Coordinate');
+goog.require('ol.FrameState');
 goog.require('ol.layer.Layer');
+goog.require('ol.layer.LayerState');
 goog.require('ol.renderer.Layer');
 
 
@@ -60,6 +62,7 @@ ol.renderer.dom.Layer.prototype.handleLayerVisibleChange = function() {
 
 
 /**
- * @param {number} time Time.
+ * @param {ol.FrameState} frameState Frame state.
+ * @param {ol.layer.LayerState} layerState Layer state.
  */
 ol.renderer.dom.Layer.prototype.renderFrame = goog.abstractMethod;

src/ol/renderer/dom/dommaprenderer.js

@@ -9,6 +9,7 @@ goog.require('goog.events');
 goog.require('goog.events.Event');
 goog.require('goog.functions');
 goog.require('ol.Coordinate');
+goog.require('ol.FrameState');
 goog.require('ol.layer.TileLayer');
 goog.require('ol.renderer.Map');
 goog.require('ol.renderer.dom.TileLayer');
@@ -93,26 +94,20 @@ ol.renderer.dom.Map.prototype.handleViewChanged = function() {
 /**
  * @inheritDoc
  */
-ol.renderer.dom.Map.prototype.renderFrame = function(time) {
+ol.renderer.dom.Map.prototype.renderFrame = function(frameState) {
 
-  var map = this.getMap();
-  if (!map.isDef()) {
+  if (goog.isNull(frameState)) {
+    // FIXME remove everything
     return;
   }
 
-  var requestRenderFrame = false;
-  var layers = map.getLayers();
-  if (goog.isDef(layers)) {
-    layers.forEach(function(layer) {
-      var layerRenderer = this.getLayerRenderer(layer);
-      if (layerRenderer.renderFrame(time)) {
-        requestRenderFrame = true;
-      }
-    }, this);
-  }
-
-  if (requestRenderFrame) {
-    map.requestRenderFrame();
-  }
+  goog.array.forEach(frameState.layersArray, function(layer) {
+    var layerState = frameState.layerStates[goog.getUid(layer)];
+    if (!layerState.ready) {
+      return;
+    }
+    var layerRenderer = this.getLayerRenderer(layer);
+    layerRenderer.renderFrame(frameState, layerState);
+  }, this);
 
 };

src/ol/renderer/dom/domtilelayerrenderer.js

@@ -67,47 +67,36 @@ ol.renderer.dom.TileLayer.prototype.getTileLayer = function() {
 /**
  * @inheritDoc
  */
-ol.renderer.dom.TileLayer.prototype.renderFrame = function(time) {
+ol.renderer.dom.TileLayer.prototype.renderFrame =
+    function(frameState, layerState) {
 
-  var map = this.getMap();
-  goog.asserts.assert(map.isDef());
-
-  var view = map.getView().getView2D();
-  var mapCenter = /** @type {!ol.Coordinate} */ (view.getCenter());
-  var mapResolution = /** @type {number} */ (view.getResolution());
-  var mapSize = /** @type {!ol.Size} */ (map.getSize());
-  var mapRotatedExtent = /** @type {!ol.Extent} */
-      (view.getRotatedExtent(mapSize));
-  var mapRotation = view.getRotation();
-  var mapScale = 1 / mapResolution;
+  var view2DState = frameState.view2DState;
 
   var tileLayer = this.getTileLayer();
 
-  var visible = tileLayer.getVisible();
-  if (!visible) {
+  if (!layerState.visible) {
     if (this.renderedVisible_) {
       goog.style.showElement(this.target, false);
       this.renderedVisible_ = false;
     }
-    return;
+    return false;
   }
 
-  var opacity = tileLayer.getOpacity();
-  if (opacity != this.renderedOpacity_) {
-    goog.style.setOpacity(this.target, opacity);
-    this.renderedOpacity_ = opacity;
+  if (layerState.opacity != this.renderedOpacity_) {
+    goog.style.setOpacity(this.target, layerState.opacity);
+    this.renderedOpacity_ = layerState.opacity;
   }
 
   var tileSource = tileLayer.getTileSource();
   var tileGrid = tileSource.getTileGrid();
 
-  var z = tileGrid.getZForResolution(mapResolution);
+  var z = tileGrid.getZForResolution(view2DState.resolution);
 
   /** @type {Object.<number, Object.<string, ol.Tile>>} */
   var tilesToDrawByZ = {};
 
   var tileRange = tileGrid.getTileRangeForExtentAndResolution(
-      mapRotatedExtent, mapResolution);
+      frameState.extent, view2DState.resolution);
 
   var allTilesLoaded = true;
 
@@ -173,7 +162,7 @@ ol.renderer.dom.TileLayer.prototype.renderFrame = function(time) {
       tileLayerZ = this.tileLayerZs_[tileLayerZKey];
     } else {
       tileCoordOrigin =
-          tileGrid.getTileCoordForCoordAndZ(mapCenter, tileLayerZKey);
+          tileGrid.getTileCoordForCoordAndZ(view2DState.center, tileLayerZKey);
       tileLayerZ = new ol.renderer.dom.TileLayerZ_(tileGrid, tileCoordOrigin);
       newTileLayerZKeys[tileLayerZKey] = true;
       this.tileLayerZs_[tileLayerZKey] = tileLayerZ;
@@ -204,14 +193,15 @@ ol.renderer.dom.TileLayer.prototype.renderFrame = function(time) {
     origin = tileLayerZ.getOrigin();
     goog.vec.Mat4.makeIdentity(transform);
     goog.vec.Mat4.translate(
-        transform, mapSize.width / 2, mapSize.height / 2, 0);
-    if (goog.isDef(mapRotation)) {
-      goog.vec.Mat4.rotateZ(transform, mapRotation);
-    }
-    goog.vec.Mat4.scale(
-        transform, resolution / mapResolution, resolution / mapResolution, 1);
-    goog.vec.Mat4.translate(transform, (origin.x - mapCenter.x) / resolution,
-        (mapCenter.y - origin.y) / resolution, 0);
+        transform, frameState.size.width / 2, frameState.size.height / 2, 0);
+    goog.vec.Mat4.rotateZ(transform, view2DState.rotation);
+    goog.vec.Mat4.scale(transform, resolution / view2DState.resolution,
+        resolution / view2DState.resolution, 1);
+    goog.vec.Mat4.translate(
+        transform,
+        (origin.x - view2DState.center.x) / resolution,
+        (view2DState.center.y - origin.y) / resolution,
+        0);
     tileLayerZ.setTransform(transform);
     if (tileLayerZKey in newTileLayerZKeys) {
       for (j = tileLayerZKey - 1; j >= 0; --j) {
@@ -225,16 +215,18 @@ ol.renderer.dom.TileLayer.prototype.renderFrame = function(time) {
         goog.dom.insertChildAt(this.target, tileLayerZ.target, 0);
       }
     } else {
-      tileLayerZ.removeTilesOutsideExtent(mapRotatedExtent);
+      tileLayerZ.removeTilesOutsideExtent(frameState.extent);
     }
   }
 
-  if (visible && !this.renderedVisible_) {
+  if (layerState.visible && !this.renderedVisible_) {
     goog.style.showElement(this.target, true);
     this.renderedVisible_ = true;
   }
 
-  return !allTilesLoaded;
+  if (!allTilesLoaded) {
+    frameState.animate = true;
+  }
 
 };