feat: add debug flag for image loading. fixes #272

core/Node.js

@@ -95,14 +95,14 @@ function Node () {
     this._transformID = null;
     this._sizeID = null;
 
-    if (this.constructor.INIT_DEFAULT_COMPONENTS) this._init();
+    if (!this.constructor.NO_DEFAULT_COMPONENTS) this._init();
 }
 
 Node.RELATIVE_SIZE = 0;
 Node.ABSOLUTE_SIZE = 1;
 Node.RENDER_SIZE = 2;
 Node.DEFAULT_SIZE = 0;
-Node.INIT_DEFAULT_COMPONENTS = true;
+Node.NO_DEFAULT_COMPONENTS = false;
 
 /**
  * Protected method. Initializes a node with a default Transform and Size component
@@ -201,7 +201,7 @@ Node.prototype.getLocation = function getLocation () {
 Node.prototype.getId = Node.prototype.getLocation;
 
 /**
- * Globally dispatches the event using the Dispatch. All descendent nodes will
+ * Dispatches the event using the Dispatch. All descendent nodes will
  * receive the dispatched event.
  *
  * @method emit
@@ -370,8 +370,10 @@ Node.prototype.getParent = function getParent () {
 Node.prototype.requestUpdate = function requestUpdate (requester) {
     if (this._inUpdate || !this.isMounted())
         return this.requestUpdateOnNextTick(requester);
-    this._updateQueue.push(requester);
-    if (!this._requestingUpdate) this._requestUpdate();
+    if (this._updateQueue.indexOf(requester) === -1) {
+        this._updateQueue.push(requester);
+        if (!this._requestingUpdate) this._requestUpdate();
+    }
     return this;
 };
 
@@ -390,7 +392,8 @@ Node.prototype.requestUpdate = function requestUpdate (requester) {
  * @return {Node} this
  */
 Node.prototype.requestUpdateOnNextTick = function requestUpdateOnNextTick (requester) {
-    this._nextUpdateQueue.push(requester);
+    if (this._nextUpdateQueue.indexOf(requester) === -1)
+        this._nextUpdateQueue.push(requester);
     return this;
 };
 
@@ -440,7 +443,7 @@ Node.prototype.getOpacity = function getOpacity () {
  * @return {Float32Array}   An array representing the mount point.
  */
 Node.prototype.getMountPoint = function getMountPoint () {
-    if (this.constructor.INIT_DEFAULT_COMPONENTS)
+    if (!this.constructor.NO_DEFAULT_COMPONENTS)
         return this.getComponent(this._transformID).getMountPoint();
     else if (this.isMounted())
         return TransformSystem.get(this.getLocation()).getMountPoint();
@@ -455,7 +458,7 @@ Node.prototype.getMountPoint = function getMountPoint () {
  * @return {Float32Array}   An array representing the align.
  */
 Node.prototype.getAlign = function getAlign () {
-    if (this.constructor.INIT_DEFAULT_COMPONENTS)
+    if (!this.constructor.NO_DEFAULT_COMPONENTS)
         return this.getComponent(this._transformID).getAlign();
     else if (this.isMounted())
         return TransformSystem.get(this.getLocation()).getAlign();
@@ -470,7 +473,7 @@ Node.prototype.getAlign = function getAlign () {
  * @return {Float32Array}   An array representing the origin.
  */
 Node.prototype.getOrigin = function getOrigin () {
-    if (this.constructor.INIT_DEFAULT_COMPONENTS)
+    if (!this.constructor.NO_DEFAULT_COMPONENTS)
         return this.getComponent(this._transformID).getOrigin();
     else if (this.isMounted())
         return TransformSystem.get(this.getLocation()).getOrigin();
@@ -485,7 +488,7 @@ Node.prototype.getOrigin = function getOrigin () {
  * @return {Float32Array}   An array representing the position.
  */
 Node.prototype.getPosition = function getPosition () {
-    if (this.constructor.INIT_DEFAULT_COMPONENTS)
+    if (!this.constructor.NO_DEFAULT_COMPONENTS)
         return this.getComponent(this._transformID).getPosition();
     else if (this.isMounted())
         return TransformSystem.get(this.getLocation()).getPosition();
@@ -500,7 +503,7 @@ Node.prototype.getPosition = function getPosition () {
  * @return {Float32Array} an array of four values, showing the rotation as a quaternion
  */
 Node.prototype.getRotation = function getRotation () {
-    if (this.constructor.INIT_DEFAULT_COMPONENTS)
+    if (!this.constructor.NO_DEFAULT_COMPONENTS)
         return this.getComponent(this._transformID).getRotation();
     else if (this.isMounted())
         return TransformSystem.get(this.getLocation()).getRotation();
@@ -515,7 +518,7 @@ Node.prototype.getRotation = function getRotation () {
  * @return {Float32Array} an array showing the current scale vector
  */
 Node.prototype.getScale = function getScale () {
-    if (this.constructor.INIT_DEFAULT_COMPONENTS)
+    if (!this.constructor.NO_DEFAULT_COMPONENTS)
         return this.getComponent(this._transformID).getScale();
     else if (this.isMounted())
         return TransformSystem.get(this.getLocation()).getScale();
@@ -530,7 +533,7 @@ Node.prototype.getScale = function getScale () {
  * @return {Float32Array} an array of numbers showing the current size mode
  */
 Node.prototype.getSizeMode = function getSizeMode () {
-    if (this.constructor.INIT_DEFAULT_COMPONENTS)
+    if (!this.constructor.NO_DEFAULT_COMPONENTS)
         return this.getComponent(this._sizeID).getSizeMode();
     else if (this.isMounted())
         return SizeSystem.get(this.getLocation()).getSizeMode();
@@ -545,7 +548,7 @@ Node.prototype.getSizeMode = function getSizeMode () {
  * @return {Float32Array} a vector 3 showing the current proportional size
  */
 Node.prototype.getProportionalSize = function getProportionalSize () {
-    if (this.constructor.INIT_DEFAULT_COMPONENTS)
+    if (!this.constructor.NO_DEFAULT_COMPONENTS)
         return this.getComponent(this._sizeID).getProportional();
     else if (this.isMounted())
         return SizeSystem.get(this.getLocation()).getProportional();
@@ -560,7 +563,7 @@ Node.prototype.getProportionalSize = function getProportionalSize () {
  * @return {Float32Array} a vector 3 showing the current differential size
  */
 Node.prototype.getDifferentialSize = function getDifferentialSize () {
-    if (this.constructor.INIT_DEFAULT_COMPONENTS)
+    if (!this.constructor.NO_DEFAULT_COMPONENTS)
         return this.getComponent(this._sizeID).getDifferential();
     else if (this.isMounted())
         return SizeSystem.get(this.getLocation()).getDifferential();
@@ -575,7 +578,7 @@ Node.prototype.getDifferentialSize = function getDifferentialSize () {
  * @return {Float32Array} a vector 3 showing the current absolute size of the node
  */
 Node.prototype.getAbsoluteSize = function getAbsoluteSize () {
-    if (this.constructor.INIT_DEFAULT_COMPONENTS)
+    if (!this.constructor.NO_DEFAULT_COMPONENTS)
         return this.getComponent(this._sizeID).getAbsolute();
     else if (this.isMounted())
         return SizeSystem.get(this.getLocation()).getAbsolute();
@@ -592,7 +595,7 @@ Node.prototype.getAbsoluteSize = function getAbsoluteSize () {
  * @return {Float32Array} a vector 3 showing the current render size
  */
 Node.prototype.getRenderSize = function getRenderSize () {
-    if (this.constructor.INIT_DEFAULT_COMPONENTS)
+    if (!this.constructor.NO_DEFAULT_COMPONENTS)
         return this.getComponent(this._sizeID).getRender();
     else if (this.isMounted())
         return SizeSystem.get(this.getLocation()).getRender();
@@ -607,7 +610,7 @@ Node.prototype.getRenderSize = function getRenderSize () {
  * @return {Float32Array} a vector 3 of the final calculated side of the node
  */
 Node.prototype.getSize = function getSize () {
-    if (this.constructor.INIT_DEFAULT_COMPONENTS)
+    if (!this.constructor.NO_DEFAULT_COMPONENTS)
         return this.getComponent(this._sizeID).get();
     else if (this.isMounted())
         return SizeSystem.get(this.getLocation()).get();
@@ -885,7 +888,7 @@ Node.prototype.hide = function hide () {
  * @return {Node} this
  */
 Node.prototype.setAlign = function setAlign (x, y, z) {
-    if (this.constructor.INIT_DEFAULT_COMPONENTS)
+    if (!this.constructor.NO_DEFAULT_COMPONENTS)
         this.getComponent(this._transformID).setAlign(x, y, z);
     else if (this.isMounted())
         TransformSystem.get(this.getLocation()).setAlign(x, y, z);
@@ -906,7 +909,7 @@ Node.prototype.setAlign = function setAlign (x, y, z) {
  * @return {Node} this
  */
 Node.prototype.setMountPoint = function setMountPoint (x, y, z) {
-    if (this.constructor.INIT_DEFAULT_COMPONENTS)
+    if (!this.constructor.NO_DEFAULT_COMPONENTS)
         this.getComponent(this._transformID).setMountPoint(x, y, z);
     else if (this.isMounted())
         TransformSystem.get(this.getLocation()).setMountPoint(x, y, z);
@@ -927,7 +930,7 @@ Node.prototype.setMountPoint = function setMountPoint (x, y, z) {
  * @return {Node} this
  */
 Node.prototype.setOrigin = function setOrigin (x, y, z) {
-    if (this.constructor.INIT_DEFAULT_COMPONENTS)
+    if (!this.constructor.NO_DEFAULT_COMPONENTS)
         this.getComponent(this._transformID).setOrigin(x, y, z);
     else if (this.isMounted())
         TransformSystem.get(this.getLocation()).setOrigin(x, y, z);
@@ -948,7 +951,7 @@ Node.prototype.setOrigin = function setOrigin (x, y, z) {
  * @return {Node} this
  */
 Node.prototype.setPosition = function setPosition (x, y, z) {
-    if (this.constructor.INIT_DEFAULT_COMPONENTS)
+    if (!this.constructor.NO_DEFAULT_COMPONENTS)
         this.getComponent(this._transformID).setPosition(x, y, z);
     else if (this.isMounted())
         TransformSystem.get(this.getLocation()).setPosition(x, y, z);
@@ -972,7 +975,7 @@ Node.prototype.setPosition = function setPosition (x, y, z) {
  * @return {Node} this
  */
 Node.prototype.setRotation = function setRotation (x, y, z, w) {
-    if (this.constructor.INIT_DEFAULT_COMPONENTS)
+    if (!this.constructor.NO_DEFAULT_COMPONENTS)
         this.getComponent(this._transformID).setRotation(x, y, z, w);
     else if (this.isMounted())
         TransformSystem.get(this.getLocation()).setRotation(x, y, z, w);
@@ -993,7 +996,7 @@ Node.prototype.setRotation = function setRotation (x, y, z, w) {
  * @return {Node} this
  */
 Node.prototype.setScale = function setScale (x, y, z) {
-    if (this.constructor.INIT_DEFAULT_COMPONENTS)
+    if (!this.constructor.NO_DEFAULT_COMPONENTS)
         this.getComponent(this._transformID).setScale(x, y, z);
     else if (this.isMounted())
         TransformSystem.get(this.getLocation()).setScale(x, y, z);
@@ -1054,7 +1057,7 @@ Node.prototype.setOpacity = function setOpacity (val) {
  * @return {Node} this
  */
 Node.prototype.setSizeMode = function setSizeMode (x, y, z) {
-    if (this.constructor.INIT_DEFAULT_COMPONENTS)
+    if (!this.constructor.NO_DEFAULT_COMPONENTS)
         this.getComponent(this._sizeID).setSizeMode(x, y, z);
     else if (this.isMounted())
         SizeSystem.get(this.getLocation()).setSizeMode(x, y, z);
@@ -1076,7 +1079,7 @@ Node.prototype.setSizeMode = function setSizeMode (x, y, z) {
  * @return {Node} this
  */
 Node.prototype.setProportionalSize = function setProportionalSize (x, y, z) {
-    if (this.constructor.INIT_DEFAULT_COMPONENTS)
+    if (!this.constructor.NO_DEFAULT_COMPONENTS)
         this.getComponent(this._sizeID).setProportional(x, y, z);
     else if (this.isMounted())
         SizeSystem.get(this.getLocation()).setProportional(x, y, z);
@@ -1103,7 +1106,7 @@ Node.prototype.setProportionalSize = function setProportionalSize (x, y, z) {
  * @return {Node} this
  */
 Node.prototype.setDifferentialSize = function setDifferentialSize (x, y, z) {
-    if (this.constructor.INIT_DEFAULT_COMPONENTS)
+    if (!this.constructor.NO_DEFAULT_COMPONENTS)
         this.getComponent(this._sizeID).setDifferential(x, y, z);
     else if (this.isMounted())
         SizeSystem.get(this.getLocation()).setDifferential(x, y, z);
@@ -1123,7 +1126,7 @@ Node.prototype.setDifferentialSize = function setDifferentialSize (x, y, z) {
  * @return {Node} this
  */
 Node.prototype.setAbsoluteSize = function setAbsoluteSize (x, y, z) {
-    if (this.constructor.INIT_DEFAULT_COMPONENTS)
+    if (!this.constructor.NO_DEFAULT_COMPONENTS)
         this.getComponent(this._sizeID).setAbsolute(x, y, z);
     else if (this.isMounted())
         SizeSystem.get(this.getLocation()).setAbsolute(x, y, z);
@@ -1170,8 +1173,6 @@ Node.prototype.update = function update (time){
     var queue = this._updateQueue;
     var item;
 
-    if (this.onUpdate) this.onUpdate();
-
     while (nextQueue.length) queue.unshift(nextQueue.pop());
 
     while (queue.length) {
@@ -1208,7 +1209,7 @@ Node.prototype.mount = function mount (path) {
     if (this.isMounted())
         throw new Error('Node is already mounted at: ' + this.getLocation());
 
-    if (this.constructor.INIT_DEFAULT_COMPONENTS){
+    if (!this.constructor.NO_DEFAULT_COMPONENTS){
         TransformSystem.registerTransformAtPath(path, this.getComponent(this._transformID));
         SizeSystem.registerSizeAtPath(path, this.getComponent(this._sizeID));
     }

core/Scene.js

@@ -74,6 +74,7 @@ function Scene (selector, updater) {
 // Scene inherits from node
 Scene.prototype = Object.create(Node.prototype);
 Scene.prototype.constructor = Scene;
+Scene.NO_DEFAULT_COMPONENTS = true;
 
 /**
  * Scene getUpdater function returns the passed in updater

dom-renderables/DOMElement.js

@@ -75,8 +75,6 @@ function DOMElement(node, options) {
     this._id = node ? node.addComponent(this) : null;
     this._node = node;
 
-    this.onSizeModeChange.apply(this, node.getSizeMode());
-
     this._callbacks = new CallbackStore();
 
     this.setProperty('display', node.isShown() ? 'block' : 'none');
@@ -172,6 +170,7 @@ DOMElement.prototype.onMount = function onMount(node, id) {
     this._id = id;
     this._UIEvents = node.getUIEvents().slice(0);
     TransformSystem.makeBreakPointAt(node.getLocation());
+    this.onSizeModeChange.apply(this, node.getSizeMode());
     this.draw();
     this.setAttribute('data-fa-path', node.getLocation());
 };

webgl-materials/Material.js

@@ -179,7 +179,7 @@ function Material(name, chunk, inputs, options) {
     this.attributes = options.attributes;
 
     if (options.texture) {
-        this.texture = options.texture.__isATexture__ ? options.texture : TextureRegistry.register(null, options.texture);
+        this.texture = options.texture.__isATexture__ ? options.texture : TextureRegistry.register(null, options.texture, options);
     }
 
     this._id = Material.id++;

webgl-renderers/TextureManager.js

@@ -97,7 +97,10 @@ TextureManager.prototype.register = function register(input, slot) {
     if (!texture) {
 
         texture = new Texture(this.gl, options);
-        texture.setImage(this._checkerboard);
+
+        if (options.debug) {
+            texture.setImage(this._checkerboard);
+        }
 
         // Add texture to registry
 
@@ -108,38 +111,39 @@ TextureManager.prototype.register = function register(input, slot) {
             texture: texture,
             source: source,
             id: textureId,
-            slot: slot
+            slot: slot,
+            debug: options.debug
         };
 
         // Handle array
 
         if (Array.isArray(source) || source instanceof Uint8Array || source instanceof Float32Array) {
+            spec.isLoaded = true;
             this.bindTexture(textureId);
             texture.setArray(source);
-            spec.isLoaded = true;
         }
 
         // Handle video
 
         else if (source instanceof HTMLVideoElement) {
             source.addEventListener('loadeddata', function() {
-                _this.bindTexture(textureId);
-                texture.setImage(source);
-
                 spec.isLoaded = true;
                 spec.source = source;
+
+                _this.bindTexture(textureId);
+                texture.setImage(source);
             });
         }
 
         // Handle image url
 
         else if (typeof source === 'string') {
             loadImage(source, function (img) {
-                _this.bindTexture(textureId);
-                texture.setImage(img);
-
                 spec.isLoaded = true;
                 spec.source = img;
+
+                _this.bindTexture(textureId);
+                texture.setImage(img);
             });
         }
     }
@@ -188,6 +192,8 @@ function loadImage (input, callback) {
 TextureManager.prototype.bindTexture = function bindTexture(id) {
     var spec = this.registry[id];
 
+    if (! spec.isLoaded && ! spec.debug) return true;
+
     if (this._activeTexture !== spec.slot) {
         this.gl.activeTexture(this.gl.TEXTURE0 + spec.slot);
         this._activeTexture = spec.slot;

webgl-renderers/WebGLRenderer.js

@@ -550,6 +550,7 @@ WebGLRenderer.prototype.draw = function draw(renderState) {
  */
 WebGLRenderer.prototype.drawMeshes = function drawMeshes() {
     var gl = this.gl;
+    var loading;
     var buffers;
     var mesh;
 
@@ -571,7 +572,10 @@ WebGLRenderer.prototype.drawMeshes = function drawMeshes() {
         if (!buffers) continue;
 
         var j = mesh.textures.length;
-        while (j--) this.textureManager.bindTexture(mesh.textures[j]);
+
+        while (j--) loading = loading || this.textureManager.bindTexture(mesh.textures[j]);
+
+        if (loading) continue;
 
         if (mesh.options) this.handleOptions(mesh.options, mesh);