From 12099bab5611a080f3a1ee7b05aa63f90ba4f0cb Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Thu, 4 Oct 2012 11:12:48 +0200 Subject: [PATCH] Implement @elemoine's requestRenderFrame architecture --- src/ol/map.js | 110 ++++++++------------------ src/ol/renderer/dom/dommaprenderer.js | 4 +- src/ol/renderer/maprenderer.js | 2 +- 3 files changed, 35 insertions(+), 81 deletions(-) diff --git a/src/ol/map.js b/src/ol/map.js index 6ad2e77d52..d674f05d3a 100644 --- a/src/ol/map.js +++ b/src/ol/map.js @@ -8,6 +8,7 @@ goog.provide('ol.MapProperty'); goog.provide('ol.RendererHint'); goog.require('goog.array'); +goog.require('goog.async.AnimationDelay'); goog.require('goog.debug.Logger'); goog.require('goog.dispose'); goog.require('goog.dom'); @@ -22,8 +23,6 @@ goog.require('goog.events.MouseWheelEvent'); goog.require('goog.events.MouseWheelHandler'); goog.require('goog.events.MouseWheelHandler.EventType'); goog.require('goog.functions'); -goog.require('goog.fx.anim'); -goog.require('goog.fx.anim.Animated'); goog.require('goog.object'); goog.require('ol.BrowserFeature'); goog.require('ol.Collection'); @@ -115,7 +114,6 @@ ol.MapProperty = { /** * @constructor * @extends {ol.Object} - * @implements {goog.fx.anim.Animated} * @param {ol.MapOptions} mapOptions Map options. */ ol.Map = function(mapOptions) { @@ -146,15 +144,11 @@ ol.Map = function(mapOptions) { /** * @private - * @type {boolean} + * @type {goog.async.AnimationDelay} */ - this.animatedRenderer_ = false; - - /** - * @private - * @type {number} - */ - this.animatingCount_ = 0; + this.animationDelay_ = + new goog.async.AnimationDelay(this.renderFrame_, undefined, this); + this.registerDisposable(this.animationDelay_); /** * @private @@ -652,14 +646,6 @@ ol.Map.prototype.handleBrowserWindowResize = function() { }; -/** - * @return {boolean} Is animating. - */ -ol.Map.prototype.isAnimating = function() { - return this.animatingCount_ > 0; -}; - - /** * @return {boolean} Is defined. */ @@ -670,17 +656,6 @@ ol.Map.prototype.isDef = function() { }; -/** - * @inheritDoc - */ -ol.Map.prototype.onAnimationFrame = function() { - if (goog.DEBUG) { - this.logger.info('onAnimationFrame'); - } - this.renderFrame_(); -}; - - /** * @private */ @@ -704,33 +679,43 @@ ol.Map.prototype.recalculateTransforms_ = function() { * Render. */ ol.Map.prototype.render = function() { - if (this.animatingCount_ < 1) { - if (this.freezeRenderingCount_ === 0) { - this.renderFrame_(); - } else { - this.dirty_ = true; - } + if (this.animationDelay_.isActive()) { + // pass + } else if (this.freezeRenderingCount_ === 0) { + this.animationDelay_.fire(); + } else { + this.dirty_ = true; } }; /** + * Request that render be called some time in the future. + */ +ol.Map.prototype.requestRenderFrame = function() { + if (this.freezeRenderingCount_ === 0) { + if (!this.animationDelay_.isActive()) { + this.animationDelay_.start(); + } + } else { + this.dirty_ = true; + } +}; + + +/** + * @param {number} time Time. * @private */ -ol.Map.prototype.renderFrame_ = function() { +ol.Map.prototype.renderFrame_ = function(time) { + if (this.freezeRenderingCount_ != 0) { + return; + } if (goog.DEBUG) { this.logger.info('renderFrame_'); } - var animatedRenderer = this.renderer_.render(); + this.renderer_.render(); this.dirty_ = false; - if (animatedRenderer != this.animatedRenderer_) { - if (animatedRenderer) { - this.startAnimating(); - } else { - this.stopAnimating(); - } - this.animatedRenderer_ = animatedRenderer; - } if (goog.DEBUG) { this.logger.info('postrender'); } @@ -852,42 +837,13 @@ goog.exportProperty( ol.Map.prototype.setUserProjection); -/** - * Start animating. - */ -ol.Map.prototype.startAnimating = function() { - if (++this.animatingCount_ == 1) { - if (goog.DEBUG) { - this.logger.info('startAnimating'); - } - goog.fx.anim.registerAnimation(this); - } -}; - - -/** - * Stop animating. - */ -ol.Map.prototype.stopAnimating = function() { - goog.asserts.assert(this.animatingCount_ > 0); - if (--this.animatingCount_ === 0) { - if (goog.DEBUG) { - this.logger.info('stopAnimating'); - } - goog.fx.anim.unregisterAnimation(this); - } -}; - - /** * Unfreeze rendering. */ ol.Map.prototype.unfreezeRendering = function() { goog.asserts.assert(this.freezeRenderingCount_ > 0); - if (--this.freezeRenderingCount_ === 0 && - this.animatingCount_ < 1 && - this.dirty_) { - this.renderFrame_(); + if (--this.freezeRenderingCount_ === 0 && this.dirty_) { + this.animationDelay_.fire(); } }; diff --git a/src/ol/renderer/dom/dommaprenderer.js b/src/ol/renderer/dom/dommaprenderer.js index 82f8d5cd1c..be2ff3f869 100644 --- a/src/ol/renderer/dom/dommaprenderer.js +++ b/src/ol/renderer/dom/dommaprenderer.js @@ -184,13 +184,11 @@ ol.renderer.dom.Map.prototype.handleSizeChanged = function() { /** * Render the map. Sets up the layers pane on first render and adjusts its * position as needed on subsequent calls. - * - * @return {boolean} Animating. */ ol.renderer.dom.Map.prototype.render = function() { var map = this.getMap(); if (!map.isDef()) { - return false; + return; } var mapCenter = map.getCenter(); diff --git a/src/ol/renderer/maprenderer.js b/src/ol/renderer/maprenderer.js index 55b0fd5e08..882b971f32 100644 --- a/src/ol/renderer/maprenderer.js +++ b/src/ol/renderer/maprenderer.js @@ -309,7 +309,7 @@ ol.renderer.Map.prototype.removeLayerRenderer = function(layer) { /** - * @return {boolean} Animating. + * Render. */ ol.renderer.Map.prototype.render = goog.functions.FALSE;