Widget tweaks

CHANGES.md

@@ -26,6 +26,8 @@ Beta Releases
 * Fixed an issue in `BaseLayerPicker` where destroy wasn't properly cleaning everything up.
 * Added the ability to unsubscribe to `Timeline` update event.
 * Added a `screenSpaceEventHandler` property to `CesiumWidget`. Also added a `sceneMode` option to the constructor to set the initial scene mode.
+* Added `useDefaultRenderLoop` property to `CesiumWidget` that allows the default render loop to be disabled so that a custom render loop can be used.
+* Fix resizing issues in `CesiumWidget` ([#608](https://github.com/AnalyticalGraphicsInc/cesium/issues/608)) by having the default render loop force a resize event every 60 frames.
 
 ### b17 - 2013-06-03
 

Source/Widgets/CesiumWidget/CesiumWidget.js

@@ -51,6 +51,22 @@ define([
         return buildModuleUrl('Assets/Textures/SkyBox/tycho2t3_80_' + suffix + '.jpg');
     }
 
+    function startRenderLoop(widget) {
+        function render() {
+            if (widget._useDefaultRenderLoop) {
+                var frameNumber = widget._scene.getFrameState().frameNumber;
+                if (widget._needResize || (frameNumber % 60) === 0) {
+                    widget.resize();
+                    widget._needResize = false;
+                }
+
+                widget.render();
+                requestAnimationFrame(render);
+            }
+        }
+        requestAnimationFrame(render);
+    }
+
     /**
      * A widget containing a Cesium scene.
      *
@@ -63,6 +79,7 @@ define([
      * @param {ImageryProvider} [options.imageryProvider=new BingMapsImageryProvider()] The imagery provider to serve as the base layer. If set to false, no imagery provider will be added.
      * @param {TerrainProvider} [options.terrainProvider=new EllipsoidTerrainProvider] The terrain provider.
      * @param {SceneMode} [options.sceneMode=SceneMode.SCENE3D] The initial scene mode.
+     * @param {Object} [options.useDefaultRenderLoop=true] True if this widget should control the render loop, false otherwise.
      * @param {Object} [options.contextOptions=undefined] Properties corresponding to <a href='http://www.khronos.org/registry/webgl/specs/latest/#5.2'>WebGLContextAttributes</a> used to create the WebGL context.  This object will be passed to the {@link Scene} constructor.
      *
      * @exception {DeveloperError} container is required.
@@ -162,6 +179,7 @@ define([
         this._clock = defaultValue(options.clock, new Clock());
         this._transitioner = new SceneTransitioner(scene, ellipsoid);
         this._screenSpaceEventHandler = new ScreenSpaceEventHandler(canvas);
+        this._useDefaultRenderLoop = undefined;
 
         if (options.sceneMode) {
             if (options.sceneMode === SceneMode.SCENE2D) {
@@ -180,15 +198,7 @@ define([
         };
         window.addEventListener('resize', this._resizeCallback, false);
 
-        //Create and start the render loop
-        this._isDestroyed = false;
-        function render() {
-            if (!that._isDestroyed) {
-                that.render();
-                requestAnimationFrame(render);
-            }
-        }
-        requestAnimationFrame(render);
+        this.useDefaultRenderLoop = defaultValue(options.useDefaultRenderLoop, true);
     };
 
     defineProperties(CesiumWidget.prototype, {
@@ -280,12 +290,37 @@ define([
          * Gets the screen space event handler.
          * @memberof CesiumWidget.prototype
          *
-         * @returns {ScreenSpaceEventHandler}
+         * @type {ScreenSpaceEventHandler}
          */
         screenSpaceEventHandler : {
             get : function() {
                 return this._screenSpaceEventHandler;
             }
+        },
+
+        /**
+         * Gets or sets whether or not this widget should control the render loop.
+         * If set to true the widget will use {@link requestAnimationFrame} to
+         * perform rendering and resizing of the widget, as well as drive the
+         * simulation clock. If set to false, you must manually call the
+         * <code>resize</code>, <code>render</code> methods as part of a custom
+         * render loop.
+         * @memberof CesiumWidget.prototype
+         *
+         * @type {Boolean}
+         */
+        useDefaultRenderLoop : {
+            get : function() {
+                return this._useDefaultRenderLoop;
+            },
+            set : function(value) {
+                if (this._useDefaultRenderLoop !== value) {
+                    this._useDefaultRenderLoop = value;
+                    if (value) {
+                        startRenderLoop(this);
+                    }
+                }
+            }
         }
     });
 
@@ -305,24 +340,19 @@ define([
     CesiumWidget.prototype.destroy = function() {
         window.removeEventListener('resize', this._resizeCallback, false);
         this._container.removeChild(this._element);
-        this._isDestroyed = true;
         destroyObject(this);
     };
 
     /**
-     * Call this function when the widget changes size, to update the canvas
-     * size, camera aspect ratio, and viewport size. This function is called
-     * automatically on window resize.
+     * Updates the canvas size, camera aspect ratio, and viewport size.
+     * This function is called automatically as needed unless
+     * <code>useDefaultRenderLoop</code> is set to false.
      * @memberof CesiumWidget
      */
     CesiumWidget.prototype.resize = function() {
         var width = this._canvas.clientWidth;
         var height = this._canvas.clientHeight;
 
-        if (this._canvas.width === width && this._canvas.height === height) {
-            return;
-        }
-
         this._canvas.width = width;
         this._canvas.height = height;
 
@@ -336,16 +366,11 @@ define([
     };
 
     /**
-     * Forces an update and render of the scene. This function is called
-     * automatically.
+     * Renders the scene.  This function is called automatically
+     * unless <code>useDefaultRenderLoop</code> is set to false;
      * @memberof CesiumWidget
      */
     CesiumWidget.prototype.render = function() {
-        if (this._needResize) {
-            this.resize();
-            this._needResize = false;
-        }
-
         var currentTime = this._clock.tick();
         this._scene.initializeFrame();
         this._scene.render(currentTime);