Merge pull request #695 from ngokevin/waitload

have entities wait for child entities to load before emitting load

Author: dmarcos

src/components/camera.js

@@ -16,7 +16,7 @@ module.exports.Component = registerComponent('camera', {
     var camera = this.camera = new THREE.PerspectiveCamera();
     var el = this.el;
     el.object3D.add(camera);
-    el.sceneEl.cameraEl = el;
+    el.sceneEl.registerCamera(el);
   },
 
   /**

src/components/look-at.js

@@ -58,7 +58,7 @@ module.exports.Component = registerComponent('look-at', {
         warn('"' + targetSelector + '" does not point to a valid entity to look-at');
         return;
       }
-      if (!targetEl.object3D) {
+      if (!targetEl.hasLoaded) {
         return targetEl.addEventListener('loaded', function () {
           self.beginTracking(targetEl);
         });

src/core/a-animation.js

@@ -72,7 +72,11 @@ module.exports.AAnimation = registerElement('a-animation', {
         var el = self.el = self.parentNode;
 
         if (el.isNode) {
-          init();
+          if (el.hasLoaded) {
+            init();
+          } else {
+            el.addEventListener('loaded', init.bind(self));
+          }
         } else {
           // To handle elements that are not yet `<a-entity>`s (e.g., templates).
           el.addEventListener('nodeready', init.bind(self));

src/core/a-assets.js

@@ -1,67 +1,15 @@
-/* global HTMLElement */
-var re = require('./a-register-element');
-var utils = require('../utils/');
-
-var isNode = re.isNode;
-var registerElement = re.registerElement;
-
-module.exports = registerElement(
-  'a-assets',
-  {
-    prototype: Object.create(
-      HTMLElement.prototype,
-      {
-        attachedCallback: {
-          value: function () {
-            this.attachEventListeners();
-          }
-        },
-
-        attachEventListeners: {
-          value: function () {
-            var self = this;
-            var assetLoaded = this.assetLoaded.bind(this);
-            this.assetsPending = 0;
-            var children = this.querySelectorAll('*');
-            Array.prototype.slice.call(children).forEach(countElement);
-
-            if (!this.assetsPending) {
-              assetLoaded();
-            }
-
-            function countElement (node) {
-              if (!isNode(node)) { return; }
-              if (!node.hasLoaded) {
-                attachEventListener(node);
-                self.assetsPending++;
-              }
-            }
-
-            function attachEventListener (node) {
-              node.addEventListener('loaded', assetLoaded);
-            }
-          }
-        },
-
-        assetLoaded: {
-          value: function () {
-            this.assetsPending--;
-            if (this.assetsPending <= 0) {
-              this.load();
-            }
-          }
-        },
-
-        load: {
-          value: function () {
-            // To prevent emitting the loaded event more than once.
-            if (this.hasLoaded) { return; }
-            this.hasLoaded = true;
-            var data = { bubbles: false, detail: {} };
-            utils.fireEvent(this, 'loaded', data);
-          }
-        }
+var ANode = require('./a-node');
+var registerElement = require('./a-register-element').registerElement;
+
+/**
+ * TODO: Block on assets before loading.
+ */
+module.exports = registerElement('a-assets', {
+  prototype: Object.create(ANode.prototype, {
+    load: {
+      value: function () {
+        ANode.prototype.load.call(this);
       }
-    )
-  }
-);
+    }
+  })
+});

src/core/a-entity.js

@@ -10,6 +10,8 @@ var log = debug('core:a-entity');
 var error = debug('core:a-entity:error');
 var registerElement = re.registerElement;
 
+var AEntity;
+
 /**
  * Entity element definition.
  * Entities represent all elements that are part of the scene, and always have
@@ -25,7 +27,7 @@ var registerElement = re.registerElement;
  * @member {object} object3D - three.js object.
  * @member {array} states
  */
-var proto = {
+var proto = Object.create(ANode.prototype, {
   defaults: {
     value: {
       position: '',
@@ -37,6 +39,7 @@ var proto = {
 
   createdCallback: {
     value: function () {
+      this.isEntity = true;
       this.states = [];
       this.components = {};
       this.object3D = new THREE.Mesh();
@@ -52,7 +55,9 @@ var proto = {
   attachedCallback: {
     value: function () {
       this.addToParent();
-      this.load();
+      if (!this.isScene) {
+        this.load();
+      }
     }
   },
 
@@ -155,16 +160,18 @@ var proto = {
 
   load: {
     value: function () {
-      // To prevent calling load more than once
       if (this.hasLoaded) { return; }
-      // Handle to the associated DOM element
       this.object3D.el = this;
-      // It attaches itself to the threejs parent object3D
+
+      // Attach to parent object3D.
       this.addToParent();
-      // Components initialization
-      this.updateComponents();
-      // Call the parent class
-      ANode.prototype.load.call(this);
+
+      if (this.isScene) {
+        ANode.prototype.load.call(this, this.updateComponents.bind(this));
+      } else {
+        ANode.prototype.load.call(this, this.updateComponents.bind(this),
+                                  function (el) { return el.isEntity; });
+      }
     },
     writable: window.debug
   },
@@ -175,6 +182,25 @@ var proto = {
     }
   },
 
+  /**
+   * @returns {array} Direct children that are entities.
+   */
+  getChildEntities: {
+    value: function () {
+      var children = this.children;
+      var childEntities = [];
+
+      for (var i = 0; i < this.children.length; i++) {
+        var child = children[i];
+        if (child instanceof AEntity) {
+          childEntities.push(child);
+        }
+      }
+
+      return childEntities;
+    }
+  },
+
   /**
    * Check if a component is defined for an entity, including defaults and mixins.
    *
@@ -297,7 +323,6 @@ var proto = {
           newData = component.parse(newData);
         }
         // Component already initialized. Update component.
-        // TODO: update component attribute more granularly.
         component.updateAttributes(newData);
         return;
       }
@@ -341,9 +366,10 @@ var proto = {
     value: function (attr, oldVal, newVal) {
       var component = components[attr];
       oldVal = oldVal || this.getAttribute(attr);
-      // When creating objects programatically and setting attributes, the object is not part
-      // of the scene until is inserted into the DOM.
-      if (!this.hasLoaded) { return; }
+      // When creating entities programatically and setting attributes, it is not part
+      // of the scene until it is inserted into the DOM. This does not apply to scenes as
+      // scenes depend on its child entities to load.
+      if (!this.hasLoaded && !this.isScene) { return; }
       if (attr === 'mixin') {
         this.updateStateMixins(newVal, oldVal);
         this.updateComponents();
@@ -465,8 +491,9 @@ var proto = {
       return is;
     }
   }
-};
+});
 
-module.exports = registerElement('a-entity', {
-  prototype: Object.create(ANode.prototype, proto)
+AEntity = registerElement('a-entity', {
+  prototype: proto
 });
+module.exports = AEntity;

src/core/a-node.js

@@ -4,11 +4,16 @@ var utils = require('../utils/');
 
 /**
  * Base class for A-Frame that manages loading of objects.
+ *
+ * Nodes can be modified using mixins.
+ * Nodes emit a `loaded` event when they and their children have initialized. Which children
+ * to wait for can be customized using `loadChildrenFilter`.
  */
 module.exports = registerElement('a-node', {
   prototype: Object.create(HTMLElement.prototype, {
     createdCallback: {
       value: function () {
+        this.hasLoaded = false;
         this.isNode = true;
         this.mixinEls = [];
         this.mixinObservers = {};
@@ -18,28 +23,61 @@ module.exports = registerElement('a-node', {
     attachedCallback: {
       value: function () {
         var mixins = this.getAttribute('mixin');
+
         this.sceneEl = document.querySelector('a-scene');
         this.emit('nodeready', {}, false);
         if (mixins) { this.updateMixins(mixins); }
       }
     },
 
-    detachedCallback: {
-      value: function () { /* no-op */ }
-    },
-
     attributeChangedCallback: {
       value: function (attr, oldVal, newVal) {
         if (attr === 'mixin') { this.updateMixins(newVal, oldVal); }
       }
     },
 
+    detachedCallback: {
+      value: function () { /* no-op */ }
+    },
+
+    /**
+     * Wait for children to load, if any.
+     * Then emit `loaded` event and set `hasLoaded`.
+     */
     load: {
+      value: function (cb, childFilter) {
+        var children;
+        var childrenLoaded;
+        var self = this;
+
+        if (self.hasLoaded) { return; }
+
+        // Default to waiting for all nodes.
+        childFilter = childFilter || function (el) { return el.isNode; };
+
+        // Wait for children to load (if any), then load.
+        children = this.getChildren();
+        childrenLoaded = children.filter(childFilter).map(function (child) {
+          return new Promise(function waitForLoaded (resolve) {
+            child.addEventListener('loaded', resolve);
+          });
+        });
+
+        Promise.all(childrenLoaded).then(function emitLoaded () {
+          if (cb) { cb(); }
+          self.hasLoaded = true;
+          self.emit('loaded', {}, false);
+        });
+      }
+    },
+
+    getChildren: {
       value: function () {
-        // To prevent emmitting the loaded event more than once
-        if (this.hasLoaded) { return; }
-        this.hasLoaded = true;
-        this.emit('loaded', {}, false);
+        var children = [];
+        for (var i = 0; i < this.children.length; i++) {
+          children.push(this.children[i]);
+        }
+        return children;
       }
     },