Merge pull request #1732 from twpayne/render-sync

Switch to asynchronous rendering by default

examples/dynamic-data.js

@@ -48,6 +48,6 @@ map.on('postcompose', function(event) {
   vectorContext.setImageStyle(imageStyle);
   vectorContext.drawMultiPointGeometry(
       new ol.geom.MultiPoint(coordinates), null);
-  map.requestRenderFrame();
+  map.render();
 });
-map.requestRenderFrame();
+map.render();

examples/igc.js

@@ -102,7 +102,7 @@ var displaySnap = function(coordinate) {
       line.setCoordinates(coordinates);
     }
   }
-  map.requestRenderFrame();
+  map.render();
 };
 
 $(map.getViewport()).on('mousemove', function(evt) {

examples/layer-spy.js

@@ -28,10 +28,10 @@ var radius = 75;
 $(document).keydown(function(evt) {
   if (evt.which === 38) {
     radius = Math.min(radius + 5, 150);
-    map.requestRenderFrame();
+    map.render();
   } else if (evt.which === 40) {
     radius = Math.max(radius - 5, 25);
-    map.requestRenderFrame();
+    map.render();
   }
 });
 
@@ -39,10 +39,10 @@ $(document).keydown(function(evt) {
 var mousePosition = null;
 $(map.getViewport()).on('mousemove', function(evt) {
   mousePosition = map.getEventPixel(evt.originalEvent);
-  map.requestRenderFrame();
+  map.render();
 }).on('mouseout', function() {
   mousePosition = null;
-  map.requestRenderFrame();
+  map.render();
 });
 
 // before rendering the layer, do some clipping

examples/layer-swipe.js

@@ -42,5 +42,5 @@ bing.on('postcompose', function(event) {
 });
 
 swipe.addEventListener('input', function() {
-  map.requestRenderFrame();
+  map.render();
 }, false);

examples/synthetic-points.js

@@ -87,7 +87,7 @@ var displaySnap = function(coordinate) {
       line.setCoordinates([coordinate, closestPoint]);
     }
   }
-  map.requestRenderFrame();
+  map.render();
 };
 
 $(map.getViewport()).on('mousemove', function(evt) {

src/ol/featureoverlay.js

@@ -105,7 +105,7 @@ ol.FeatureOverlay.prototype.getFeatures = function() {
  * @private
  */
 ol.FeatureOverlay.prototype.handleFeatureChange_ = function() {
-  this.requestRenderFrame_();
+  this.render_();
 };
 
 
@@ -120,7 +120,7 @@ ol.FeatureOverlay.prototype.handleFeaturesAdd_ =
   this.featureChangeListenerKeys_[goog.getUid(feature).toString()] =
       goog.events.listen(feature, goog.events.EventType.CHANGE,
       this.handleFeatureChange_, false, this);
-  this.requestRenderFrame_();
+  this.render_();
 };
 
 
@@ -135,7 +135,7 @@ ol.FeatureOverlay.prototype.handleFeaturesRemove_ =
   var key = goog.getUid(feature).toString();
   goog.events.unlistenByKey(this.featureChangeListenerKeys_[key]);
   delete this.featureChangeListenerKeys_[key];
-  this.requestRenderFrame_();
+  this.render_();
 };
 
 
@@ -175,9 +175,9 @@ ol.FeatureOverlay.prototype.removeFeature = function(feature) {
 /**
  * @private
  */
-ol.FeatureOverlay.prototype.requestRenderFrame_ = function() {
+ol.FeatureOverlay.prototype.render_ = function() {
   if (!goog.isNull(this.map_)) {
-    this.map_.requestRenderFrame();
+    this.map_.render();
   }
 };
 
@@ -216,7 +216,7 @@ ol.FeatureOverlay.prototype.setFeatures = function(features) {
           this.handleFeatureChange_, false, this);
     }
   }
-  this.requestRenderFrame_();
+  this.render_();
 };
 
 
@@ -229,13 +229,13 @@ ol.FeatureOverlay.prototype.setMap = function(map) {
     goog.events.unlistenByKey(this.postComposeListenerKey_);
     this.postComposeListenerKey_ = null;
   }
-  this.requestRenderFrame_();
+  this.render_();
   this.map_ = map;
   if (!goog.isNull(map)) {
     this.postComposeListenerKey_ = goog.events.listen(
         map, ol.render.EventType.POSTCOMPOSE, this.handleMapPostCompose_, false,
         this);
-    map.requestRenderFrame();
+    map.render();
   }
 };
 
@@ -251,7 +251,7 @@ ol.FeatureOverlay.prototype.setMap = function(map) {
 ol.FeatureOverlay.prototype.setStyle = function(style) {
   this.style_ = style;
   this.styleFunction_ = ol.feature.createStyleFunction(style);
-  this.requestRenderFrame_();
+  this.render_();
 };
 
 

src/ol/interaction/dragpaninteraction.js

@@ -71,7 +71,7 @@ ol.interaction.DragPan.prototype.handleDrag = function(mapBrowserEvent) {
   ol.coordinate.rotate(newCenter, view2DState.rotation);
   ol.coordinate.add(newCenter, this.startCenter);
   newCenter = view.constrainCenter(newCenter);
-  map.requestRenderFrame();
+  map.render();
   view.setCenter(newCenter);
 };
 
@@ -104,7 +104,7 @@ ol.interaction.DragPan.prototype.handleDragEnd = function(mapBrowserEvent) {
     dest = view2D.constrainCenter(dest);
     view2D.setCenter(dest);
   }
-  map.requestRenderFrame();
+  map.render();
 };
 
 
@@ -120,7 +120,7 @@ ol.interaction.DragPan.prototype.handleDragStart = function(mapBrowserEvent) {
     }
     var map = mapBrowserEvent.map;
     map.getView().setHint(ol.ViewHint.INTERACTING, 1);
-    map.requestRenderFrame();
+    map.render();
     return true;
   } else {
     return false;
@@ -139,7 +139,7 @@ ol.interaction.DragPan.prototype.handleDown = function(mapBrowserEvent) {
   goog.asserts.assert(!goog.isNull(mapBrowserEvent.frameState));
   if (!goog.isNull(this.kineticPreRenderFn_) &&
       map.removePreRenderFunction(this.kineticPreRenderFn_)) {
-    map.requestRenderFrame();
+    map.render();
     view.setCenter(mapBrowserEvent.frameState.view2DState.center);
     this.kineticPreRenderFn_ = null;
   }

src/ol/interaction/dragrotateandzoominteraction.js

@@ -80,7 +80,7 @@ ol.interaction.DragRotateAndZoom.prototype.handleDrag =
   // FIXME works for View2D only
   var view = map.getView().getView2D();
   var view2DState = view.getView2DState();
-  map.requestRenderFrame();
+  map.render();
   if (goog.isDef(this.lastAngle_)) {
     var angleDelta = theta - this.lastAngle_;
     ol.interaction.Interaction.rotateWithoutConstraints(

src/ol/interaction/dragrotateinteraction.js

@@ -60,7 +60,7 @@ ol.interaction.DragRotate.prototype.handleDrag = function(mapBrowserEvent) {
     // FIXME works for View2D only
     var view = map.getView().getView2D();
     var view2DState = view.getView2DState();
-    map.requestRenderFrame();
+    map.render();
     ol.interaction.Interaction.rotateWithoutConstraints(
         map, view, view2DState.rotation - delta);
   }
@@ -92,7 +92,7 @@ ol.interaction.DragRotate.prototype.handleDragStart =
   if (browserEvent.isMouseActionButton() && this.condition_(mapBrowserEvent)) {
     var map = mapBrowserEvent.map;
     map.getView().setHint(ol.ViewHint.INTERACTING, 1);
-    map.requestRenderFrame();
+    map.render();
     this.lastAngle_ = undefined;
     return true;
   } else {

src/ol/interaction/keyboardzoominteraction.js

@@ -68,7 +68,7 @@ ol.interaction.KeyboardZoom.prototype.handleMapBrowserEvent =
         (charCode == '+'.charCodeAt(0) || charCode == '-'.charCodeAt(0))) {
       var map = mapBrowserEvent.map;
       var delta = (charCode == '+'.charCodeAt(0)) ? this.delta_ : -this.delta_;
-      map.requestRenderFrame();
+      map.render();
       // FIXME works for View2D only
       var view = map.getView().getView2D();
       ol.interaction.Interaction.zoomByDelta(

src/ol/interaction/mousewheelzoominteraction.js

@@ -114,7 +114,7 @@ ol.interaction.MouseWheelZoom.prototype.doZoom_ = function(map) {
   // FIXME works for View2D only
   var view = map.getView().getView2D();
 
-  map.requestRenderFrame();
+  map.render();
   ol.interaction.Interaction.zoomByDelta(map, view, -delta, this.lastAnchor_,
       this.duration_);
 

src/ol/interaction/touchpaninteraction.js

@@ -73,7 +73,7 @@ ol.interaction.TouchPan.prototype.handleTouchMove = function(mapBrowserEvent) {
     ol.coordinate.rotate(center, view2DState.rotation);
     ol.coordinate.add(center, view2DState.center);
     center = view2D.constrainCenter(center);
-    map.requestRenderFrame();
+    map.render();
     view2D.setCenter(center);
   }
   this.lastCentroid = centroid;
@@ -104,7 +104,7 @@ ol.interaction.TouchPan.prototype.handleTouchEnd =
       dest = view2D.constrainCenter(dest);
       view2D.setCenter(dest);
     }
-    map.requestRenderFrame();
+    map.render();
     return false;
   } else {
     this.lastCentroid = null;
@@ -123,7 +123,7 @@ ol.interaction.TouchPan.prototype.handleTouchStart =
     var view2D = map.getView().getView2D();
     goog.asserts.assertInstanceof(view2D, ol.View2D);
     this.lastCentroid = null;
-    map.requestRenderFrame();
+    map.render();
     if (!goog.isNull(this.kineticPreRenderFn_) &&
         map.removePreRenderFunction(this.kineticPreRenderFn_)) {
       view2D.setCenter(mapBrowserEvent.frameState.view2DState.center);

src/ol/interaction/touchrotateinteraction.js

@@ -107,7 +107,7 @@ ol.interaction.TouchRotate.prototype.handleTouchMove =
     // FIXME works for View2D only
     var view = map.getView().getView2D();
     var view2DState = view.getView2DState();
-    map.requestRenderFrame();
+    map.render();
     ol.interaction.Interaction.rotateWithoutConstraints(map, view,
         view2DState.rotation + rotationDelta, this.anchor_);
   }
@@ -147,7 +147,7 @@ ol.interaction.TouchRotate.prototype.handleTouchStart =
     this.lastAngle_ = undefined;
     this.rotating_ = false;
     this.rotationDelta_ = 0.0;
-    map.requestRenderFrame();
+    map.render();
     return true;
   } else {
     return false;

src/ol/interaction/touchzoominteraction.js

@@ -89,7 +89,7 @@ ol.interaction.TouchZoom.prototype.handleTouchMove =
   this.anchor_ = map.getCoordinateFromPixel(centroid);
 
   // scale, bypass the resolution constraint
-  map.requestRenderFrame();
+  map.render();
   ol.interaction.Interaction.zoomWithoutConstraints(
       map, view, view2DState.resolution * scaleDelta, this.anchor_);
 
@@ -129,7 +129,7 @@ ol.interaction.TouchZoom.prototype.handleTouchStart =
     this.anchor_ = null;
     this.lastDistance_ = undefined;
     this.lastScaleDelta_ = 1;
-    map.requestRenderFrame();
+    map.render();
     return true;
   } else {
     return false;

src/ol/map.exports

@@ -19,5 +19,5 @@
 @exportProperty ol.Map.prototype.removeLayer
 @exportProperty ol.Map.prototype.removeOverlay
 @exportProperty ol.Map.prototype.render
-@exportProperty ol.Map.prototype.requestRenderFrame
+@exportProperty ol.Map.prototype.renderSync
 @exportProperty ol.Map.prototype.updateSize

src/ol/map.js

@@ -473,7 +473,7 @@ ol.Map.prototype.addOverlay = function(overlay) {
  * @todo stability experimental
  */
 ol.Map.prototype.beforeRender = function(var_args) {
-  this.requestRenderFrame();
+  this.render();
   Array.prototype.push.apply(this.preRenderFunctions_, arguments);
 };
 
@@ -909,7 +909,7 @@ ol.Map.prototype.handleTargetChanged_ = function() {
  * @private
  */
 ol.Map.prototype.handleTileChange_ = function() {
-  this.requestRenderFrame();
+  this.render();
 };
 
 
@@ -1010,10 +1010,18 @@ ol.Map.prototype.isDef = function() {
 };
 
 
+/**
+ * @return {boolean} Is rendered.
+ */
+ol.Map.prototype.isRendered = function() {
+  return !goog.isNull(this.frameState_);
+};
+
+
 /**
  * Render.
  */
-ol.Map.prototype.render = function() {
+ol.Map.prototype.renderSync = function() {
   if (this.animationDelay_.isActive()) {
     // pass
   } else if (this.freezeRenderingCount_ === 0) {
@@ -1027,7 +1035,7 @@ ol.Map.prototype.render = function() {
 /**
  * Request that renderFrame_ be called some time in the future.
  */
-ol.Map.prototype.requestRenderFrame = function() {
+ol.Map.prototype.render = function() {
   if (this.freezeRenderingCount_ === 0) {
     if (!this.animationDelay_.isActive()) {
       this.animationDelay_.start();
@@ -1198,7 +1206,7 @@ ol.Map.prototype.renderFrame_ = function(time) {
 
   if (!goog.isNull(frameState)) {
     if (frameState.animate) {
-      this.requestRenderFrame();
+      this.render();
     }
     Array.prototype.push.apply(
         this.postRenderFunctions_, frameState.postRenderFunctions);

src/ol/overlay.js

@@ -327,7 +327,7 @@ ol.Overlay.prototype.updatePixelPosition_ = function() {
 
   var map = this.getMap();
   var position = this.getPosition();
-  if (!goog.isDef(map) || !map.isDef() || !goog.isDef(position)) {
+  if (!goog.isDef(map) || !map.isRendered() || !goog.isDef(position)) {
     if (this.rendered_.visible) {
       goog.style.setElementShown(this.element_, false);
       this.rendered_.visible = false;

src/ol/render/box.js

@@ -122,7 +122,7 @@ ol.render.Box.prototype.requestMapRenderFrame_ = function() {
   if (!goog.isNull(this.map_) &&
       !goog.isNull(this.startPixel_) &&
       !goog.isNull(this.endPixel_)) {
-    this.map_.requestRenderFrame();
+    this.map_.render();
   }
 };
 
@@ -134,7 +134,7 @@ ol.render.Box.prototype.setMap = function(map) {
   if (!goog.isNull(this.postComposeListenerKey_)) {
     goog.events.unlistenByKey(this.postComposeListenerKey_);
     this.postComposeListenerKey_ = null;
-    this.map_.requestRenderFrame();
+    this.map_.render();
     this.map_ = null;
   }
   this.map_ = map;

test/spec/ol/interaction/drawinteraction.test.js

@@ -6,7 +6,7 @@ describe('ol.interaction.Draw', function() {
   var width = 360;
   var height = 180;
 
-  beforeEach(function() {
+  beforeEach(function(done) {
     target = document.createElement('div');
     var style = target.style;
     style.position = 'absolute';
@@ -27,6 +27,9 @@ describe('ol.interaction.Draw', function() {
         resolution: 1
       })
     });
+    map.on('postrender', function() {
+      done();
+    });
   });
 
   afterEach(function() {

test/spec/ol/map.test.js

@@ -48,7 +48,7 @@ describe('ol.Map', function() {
     });
   });
 
-  describe('#requestRenderFrame()', function() {
+  describe('#render()', function() {
 
     var target, map;
 
@@ -78,7 +78,7 @@ describe('ol.Map', function() {
 
     it('results in an postrender event', function(done) {
 
-      map.requestRenderFrame();
+      map.render();
       map.on('postrender', function(event) {
         expect(event).to.be.a(ol.MapEvent);
         var frameState = event.frameState;
@@ -92,7 +92,7 @@ describe('ol.Map', function() {
       target.style.height = '0px';
       map.updateSize();
 
-      map.requestRenderFrame();
+      map.render();
       map.on('postrender', function(event) {
         expect(event).to.be.a(ol.MapEvent);
         var frameState = event.frameState;
@@ -106,7 +106,7 @@ describe('ol.Map', function() {
       target.style.width = '0px';
       map.updateSize();
 
-      map.requestRenderFrame();
+      map.render();
       map.on('postrender', function(event) {
         expect(event).to.be.a(ol.MapEvent);
         var frameState = event.frameState;