Merge pull request #892 from AnalyticalGraphicsInc/event

Event improvements

Source/Core/Event.js

@@ -51,6 +51,8 @@ define([
      * @param {Object} [scope] An optional object scope to serve as the <code>this</code>
      * pointer in which the listener function will execute.
      *
+     * @returns {Function} A function that will remove this event listener when invoked.
+     *
      * @see Event#raiseEvent
      * @see Event#removeEventListener
      *
@@ -63,6 +65,11 @@ define([
 
         this._listeners.push(listener);
         this._scopes.push(scope);
+
+        var event = this;
+        return function() {
+            event.removeEventListener(listener, scope);
+        };
     };
 
     /**

Source/Core/EventHelper.js

@@ -0,0 +1,68 @@
+/*global define*/
+define([
+        './DeveloperError'
+    ], function(
+        DeveloperError) {
+    "use strict";
+
+    /**
+     * A convenience object that simplifies the common pattern of attaching event listeners
+     * to several events, then removing all those listeners at once later, for example, in
+     * a destroy method.
+     *
+     * @alias EventHelper
+     * @constructor
+     *
+     * @see Event
+     *
+     * @example
+     * var helper = new EventHelper();
+     *
+     * helper.add(someObject.event, listener1, this);
+     * helper.add(otherObject.event, listener2, this);
+     *
+     * // later...
+     * helper.removeAll();
+     */
+    var EventHelper = function() {
+        this._removalFunctions = [];
+    };
+
+    /**
+     * Adds a listener to an event, and records the registration to be cleaned up later.
+     * @memberof EventHelper
+     *
+     * @param {Event} event The event to attach to.
+     * @param {Function} listener The function to be executed when the event is raised.
+     * @param {Object} [scope] An optional object scope to serve as the <code>this</code>
+     * pointer in which the listener function will execute.
+     *
+     * @see Event#addEventListener
+     *
+     * @exception {DeveloperError} event is required and must be a function.
+     * @exception {DeveloperError} listener is required and must be a function.
+     */
+    EventHelper.prototype.add = function(event, listener, scope) {
+        if (typeof event === 'undefined') {
+            throw new DeveloperError('event is required');
+        }
+
+        this._removalFunctions.push(event.addEventListener(listener, scope));
+    };
+
+    /**
+     * Unregisters all previously added listeners.
+     * @memberof EventHelper
+     *
+     * @see Event#removeEventListener
+     */
+    EventHelper.prototype.removeAll = function() {
+        var removalFunctions = this._removalFunctions;
+        for ( var i = 0, len = removalFunctions.length; i < len; ++i) {
+            removalFunctions[i]();
+        }
+        removalFunctions.length = 0;
+    };
+
+    return EventHelper;
+});

Source/DynamicScene/DataSourceDisplay.js

@@ -1,5 +1,10 @@
 /*global define*/
-define(['./DataSourceCollection',
+define([
+        '../Core/defaultValue',
+        '../Core/destroyObject',
+        '../Core/DeveloperError',
+        '../Core/EventHelper',
+        './DataSourceCollection',
         './DynamicBillboardVisualizer',
         './DynamicEllipsoidVisualizer',
         './DynamicConeVisualizerUsingCustomSensor',
@@ -9,11 +14,12 @@ define(['./DataSourceCollection',
         './DynamicPolygonVisualizer',
         './DynamicPolylineVisualizer',
         './DynamicPyramidVisualizer',
-        './VisualizerCollection',
-        '../Core/defaultValue',
-        '../Core/destroyObject',
-        '../Core/DeveloperError'
+        './VisualizerCollection'
     ], function(
+        defaultValue,
+        destroyObject,
+        DeveloperError,
+        EventHelper,
         DataSourceCollection,
         DynamicBillboardVisualizer,
         DynamicEllipsoidVisualizer,
@@ -24,10 +30,7 @@ define(['./DataSourceCollection',
         DynamicPolygonVisualizer,
         DynamicPolylineVisualizer,
         DynamicPyramidVisualizer,
-        VisualizerCollection,
-        defaultValue,
-        destroyObject,
-        DeveloperError) {
+        VisualizerCollection) {
     "use strict";
 
     var defaultVisualizerTypes = [DynamicBillboardVisualizer,
@@ -56,8 +59,11 @@ define(['./DataSourceCollection',
         }
 
         var dataSourceCollection = new DataSourceCollection();
-        dataSourceCollection.dataSourceAdded.addEventListener(this._onDataSourceAdded, this);
-        dataSourceCollection.dataSourceRemoved.addEventListener(this._onDataSourceRemoved, this);
+
+        this._eventHelper = new EventHelper();
+        this._eventHelper.add(dataSourceCollection.dataSourceAdded, this._onDataSourceAdded, this);
+        this._eventHelper.add(dataSourceCollection.dataSourceRemoved, this._onDataSourceRemoved, this);
+
         this._dataSourceCollection = dataSourceCollection;
         this._scene = scene;
         this._timeVaryingSources = [];
@@ -121,18 +127,19 @@ define(['./DataSourceCollection',
      * dataSourceDisplay = dataSourceDisplay.destroy();
      */
     DataSourceDisplay.prototype.destroy = function() {
-        var dataSources = this._dataSourceCollection;
-        dataSources.dataSourceAdded.removeEventListener(this._onDataSourceAdded, this);
-        dataSources.dataSourceRemoved.removeEventListener(this._onDataSourceRemoved, this);
+        this._eventHelper.removeAll();
+
+        var dataSourceCollection = this._dataSourceCollection;
+        for ( var i = 0, length = dataSourceCollection.getLength(); i < length; ++i) {
+            var dataSource = dataSourceCollection.get(i);
 
-        var length = dataSources.getLength();
-        for ( var i = 0; i < length; i++) {
-            var dataSource = dataSources.get(i);
             this._onDataSourceRemoved(this._dataSourceCollection, dataSource);
+
             if (typeof dataSource.destroy === 'function') {
                 dataSource.destroy();
             }
         }
+
         return destroyObject(this);
     };
 
@@ -151,21 +158,19 @@ define(['./DataSourceCollection',
         }
 
         var timeVaryingSources = this._timeVaryingSources;
-        var staticSourcesToUpdate = this._staticSourcesToUpdate;
-        var length;
         var i;
-
-        length = timeVaryingSources.length;
+        var length = timeVaryingSources.length;
         for (i = 0; i < length; i++) {
             timeVaryingSources[i]._visualizerCollection.update(time);
         }
 
+        var staticSourcesToUpdate = this._staticSourcesToUpdate;
         length = staticSourcesToUpdate.length;
         if (length > 0) {
             for (i = 0; i < length; i++) {
                 staticSourcesToUpdate[i]._visualizerCollection.update(time);
             }
-            this._staticSourcesToUpdate = [];
+            staticSourcesToUpdate.length = 0;
         }
     };
 

Source/Widgets/BaseLayerPicker/BaseLayerPicker.js

@@ -154,8 +154,8 @@ define([
             }
         };
 
-        document.addEventListener('mousedown', this._closeDropDown);
-        document.addEventListener('touchstart', this._closeDropDown);
+        document.addEventListener('mousedown', this._closeDropDown, true);
+        document.addEventListener('touchstart', this._closeDropDown, true);
     };
 
     defineProperties(BaseLayerPicker.prototype, {
@@ -198,8 +198,8 @@ define([
      * @memberof BaseLayerPicker
      */
     BaseLayerPicker.prototype.destroy = function() {
-        document.removeEventListener('mousedown', this._closeDropDown);
-        document.removeEventListener('touchstart', this._closeDropDown);
+        document.removeEventListener('mousedown', this._closeDropDown, true);
+        document.removeEventListener('touchstart', this._closeDropDown, true);
         var container = this._container;
         knockout.cleanNode(container);
         container.removeChild(this._element);

Source/Widgets/ClockViewModel.js

@@ -3,12 +3,16 @@ define([
         '../Core/Clock',
         '../Core/defaultValue',
         '../Core/defineProperties',
+        '../Core/destroyObject',
+        '../Core/EventHelper',
         '../Core/JulianDate',
         '../ThirdParty/knockout'
     ], function(
         Clock,
         defaultValue,
         defineProperties,
+        destroyObject,
+        EventHelper,
         JulianDate,
         knockout) {
     "use strict";
@@ -25,7 +29,9 @@ define([
     var ClockViewModel = function(clock) {
         clock = defaultValue(clock, new Clock());
         this._clock = clock;
-        this._clock.onTick.addEventListener(this.synchronize, this);
+
+        this._eventHelper = new EventHelper();
+        this._eventHelper.add(clock.onTick, this.synchronize, this);
 
         var startTime = knockout.observable(clock.startTime);
         startTime.equalityComparer = JulianDate.equals;
@@ -197,5 +203,24 @@ define([
         this.shouldAnimate = shouldAnimate;
     };
 
+    /**
+     * @memberof ClockViewModel
+     * @returns {Boolean} true if the object has been destroyed, false otherwise.
+     */
+    ClockViewModel.prototype.isDestroyed = function() {
+        return false;
+    };
+
+    /**
+     * Destroys the view model.  Should be called to
+     * properly clean up the view model when it is no longer needed.
+     * @memberof ClockViewModel
+     */
+    ClockViewModel.prototype.destroy = function() {
+        this._eventHelper.removeAll();
+
+        destroyObject(this);
+    };
+
     return ClockViewModel;
 });

Source/Widgets/SceneModePicker/SceneModePicker.js

@@ -111,8 +111,8 @@ define([
             }
         };
 
-        document.addEventListener('mousedown', this._closeDropDown);
-        document.addEventListener('touchstart', this._closeDropDown);
+        document.addEventListener('mousedown', this._closeDropDown, true);
+        document.addEventListener('touchstart', this._closeDropDown, true);
     };
 
     defineProperties(SceneModePicker.prototype, {
@@ -156,8 +156,8 @@ define([
      */
     SceneModePicker.prototype.destroy = function() {
         this._viewModel.destroy();
-        document.removeEventListener('mousedown', this._closeDropDown);
-        document.removeEventListener('touchstart', this._closeDropDown);
+        document.removeEventListener('mousedown', this._closeDropDown, true);
+        document.removeEventListener('touchstart', this._closeDropDown, true);
         var container = this._container;
         knockout.cleanNode(container);
         container.removeChild(this._element);

Source/Widgets/SceneModePicker/SceneModePickerViewModel.js

@@ -3,13 +3,15 @@ define([
         '../../Core/defineProperties',
         '../../Core/destroyObject',
         '../../Core/DeveloperError',
+        '../../Core/EventHelper',
         '../../Scene/SceneMode',
         '../createCommand',
         '../../ThirdParty/knockout'
     ], function(
         defineProperties,
         destroyObject,
         DeveloperError,
+        EventHelper,
         SceneMode,
         createCommand,
         knockout) {
@@ -29,15 +31,17 @@ define([
             throw new DeveloperError('transitioner is required.');
         }
 
+        this._transitioner = transitioner;
+
         var that = this;
 
-        this._transitionStart = function(transitioner, oldMode, newMode, isMorphing) {
+        var transitionStart = function(transitioner, oldMode, newMode, isMorphing) {
             that.sceneMode = newMode;
             that.dropDownVisible = false;
         };
 
-        transitioner.onTransitionStart.addEventListener(this._transitionStart);
-        this._transitioner = transitioner;
+        this._eventHelper = new EventHelper();
+        this._eventHelper.add(transitioner.onTransitionStart, transitionStart);
 
         /**
          * Gets or sets the current SceneMode.  This property is observable.
@@ -182,7 +186,8 @@ define([
      * @memberof SceneModePickerViewModel
      */
     SceneModePickerViewModel.prototype.destroy = function() {
-        this._transitioner.onTransitionStart.removeEventListener(this._transitionStart);
+        this._eventHelper.removeAll();
+
         destroyObject(this);
     };
 

Source/Widgets/Timeline/Timeline.js

@@ -169,6 +169,8 @@ define([
     };
 
     Timeline.prototype.destroy = function() {
+        this._clock.onTick.removeEventListener(this.updateFromClock, this);
+
         document.removeEventListener('mouseup', this._onMouseUp, false);
         document.removeEventListener('mousemove', this._onMouseMove, false);