famous - npm Package Compare versions

Comparing version 0.6.2 to 0.7.0

AUTHORS.md

@@ -1,23 +0,20 @@
-# This is the official list of authors who have made a contribution that was
-# merged into the Famous framework.
-#
-# Names should be added to this file in the following format:
-#
-#   Name or Organization <email address>
-#
-# The email address is not required for organizations.
-#
-# Please keep this list sorted alphabetically by first name.
-# This list can be generated using the git command:
-# git log --all --format='%aN <%aE>' | sort -u
-
-Adnan Wahab <[e-mail]>, <[e-mail]>
-Alexander Gugel <[e-mail]>, <[e-mail]>
+Adnan Wahab <[e-mail]>
+Alexander Gugel <[e-mail]>
+Alexander Gugel <[e-mail]>
+Anne-Gaelle Colom <[e-mail]>
 Arkady Pevzner <[e-mail]>
-Ben Rowles <[e-mail]>, <[e-mail]>
-Dan Miller <[e-mail]>, <[e-mail]>, <[e-mail]>
-Farhad Ghayour <[e-mail]>, <[e-mail]>
+Ben Rowles <[e-mail]>
+Dan <[e-mail]>
+Dan Miller <[e-mail]>
+Daniel Miller <[e-mail]>
+DnMllr <[e-mail]>
+Farhad Ghayour <[e-mail]>
+Farhad Ghayour <[e-mail]>
 Felix Tripier <[e-mail]>
+GrG <[e-mail]>
+Hannah Howard <[e-mail]>
 Imti <[e-mail]>
-Joseph <[e-mail]>, <[e-mail]>
+Joseph <[e-mail]>
+Joseph Carroll <[e-mail]>
+Joseph Orbegoso Pea <[e-mail]>
 Larry Gordon <[e-mail]>
@@ -28,6 +25,17 @@ Marc Wilhite <[e-mail]>
 Matthew Trost <[e-mail]>
-Mike O'Brien <[e-mail]>, <[e-mail]>
+Michael O'Brien <[e-mail]>
+Mike O'Brien <[e-mail]>
+Mike O'Brien <[e-mail]>
 Morgan Plant <[e-mail]>
+Myles Borins <[e-mail]>
 Myles Borins <[e-mail]>
+Pilwon Huh <[e-mail]>
+Rick Armbrust <[e-mail]>
 SWES <[e-mail]>
 Zack Brown <[e-mail]>
+ben <[e-mail]>
+felix <[e-mail]>
+joseph <[e-mail]>
+quack quack <[e-mail]>
+redwoodfavorite <[e-mail]>
+unknown <[e-mail]>

CHANGELOG.md

 # Famous Rendering Engine Changelog
 
+## 0.7.0
+
+### Breaking Changes
+
+- Make names of update methods of systems consistent d530a5ca612c1db30cfaa9df7800dffe35e2b674
+
+### Bug Fixes
+
+- No longer rely on id returned by Node#addComponent f345c5c0faa1dfef5e7d0023f7431ee4f47c2046
+- Set DOMElement#_node before _requestUpdate e1eaec2128153aa1ca0fbf658250917de55fe3c7
+- rename time material uniform ae4bf986b59119492ddd34e5229399f9d7d2cb73
+- move traverse to material 73256911df5ee9bb7a8818ba468229e4d0b7baf0
+- #151, materials now update meshes on uniform setting. [#95480122] 4648641e47f068b04fd7f2b48b949823a330e7f2
+- Show nodes by default a158d08b31c00cf431a831eb91766d7980e129f9
+- fix render size bug that was caused by the frist frame being display none to get rid of the bad frame dd29c7009f29d345b43dbe1c5bb6f5c90d28f0e3
+- 361 ed1cd18cee4259295934d6819c84f940cf5cb413
+- Remove duplicate Debug d3e970ad5eca2ba833ea2b8dc5c5cdadbbb90b81
+- Fix onReceive bug when removing child while receiving event fdb3b1b7cbfee9506dbbba08ad3240862997d73d
+- No longer throw error in Node#removeChild e21c094f4080eb3d9071216bcb741bd0b6bdd01c
+- undefined i 4fe6dfc38bece5727ecfe6c29080dc118fa24b2f
+- typo 7f06479d83c57042f5bfecc6b55d9251fc57fba2
+- update breaking reference to the node's sizeMode c4580714da1d5a142a428dfc215dc1094d26a4bf
+- Make Node#getChildren() return array without holes [#96509964] 9525278b0a7cc804a7f26de31c888a9e1e705a31
+- Remove redundant DOMRenderer#unsubscribe function 5c85025ac8ef00ca9a1317f439bcdac73f2b22c3
+- Fix UNSUBSCRIBE in DOMElement aa994fa6ba85a92adf7fed89312f1b8e0d4b7afe
+- no default components on scene 352933f60ba27e03ffd5284b204c98ee905b48ab
+- dom-element checks for sizeMode onMount 6b2a575678a2c3dcf2ac45500c594c91b7730fb6
+- opt-out of default components rather than opt-in 3b63e3bb2f378ac2fa728b041d0077a91ed2c013
+- multiple updates in node 3129bb427e465d1e44e68e6373ce688336ac8090
+- can calculate world matrix without setting breakpoint f6b1dde0ce34d0e952b6c36d77ee30d6387bcbc9
+- no default components on Scene 6e732fcecb8c6d2344019a6f2d15802883918d62
+- dom element checks for sizemode on mount 5c7bdc6dcbb68c9a42eb3c831f479b211d881172
+- opt-out of default components 8dc6a4e8c130679c28c55e5c282000d166839c97
+- multiple updates in Node e4476319688ccd7b2ec99e0b35b7b2d4c0885fab
+- add contextmenu to eventmap #290 076d913a43a3642c11bca118a10a87a10de482b0
+
+### Features
+
+- Add ElementCache lifecycle events 7f62062057db688d604aa9ecd5ca21581170e516
+- added more commands to pretty printer 66168c82bfc94209c4d89005c91b186917920a60
+- added more commands to the pretty printer 462ea1276773ca5340478be32b6bc07b293e72dc
+- started adding commands to the command printer 1f2757ab05162c4997f9359a729219f57dbf1195
+
+### Testing and Tooling
+
+- Remove t.comment f3779b182cbf0b00bcd8c6c5819da8ffef4b8083
+- Run FamousEngine tests 471886ae08590c63bc1b8e46e5459ef3ca9f636c
+- Run Event tests 08d7dd21e3a0b0860e15850cd3449a5b0481a844
+- Test Channel 5fd46760ff35636f2acadb503d7b9979af2e32bb
+- Test Clock ba20fd65ae097d63f2894d5f52f98f5ac0ba508f
+- Add test-case for man in the middle insertion cf631efa299f073571d01a85c8d75e874450ddc0
+- Fix Node.api f732d50238a1fdcdbf6c12cb689d05ae89df4a47
+- Test Node, Node#getChildren, Node#getRawChildren 007a93255ec70a669c44f76412400b3e0797ca9d
+
+
 ## 0.6.2
@@ -4,0 +59,0 @@

components/Size.js

@@ -28,2 +28,3 @@ /**
 var Transitionable = require('../transitions/Transitionable');
+var SizeSystem = require('../core/SizeSystem');
 
@@ -132,3 +133,3 @@ /**
     return {
-        sizeMode: this._node.value.sizeMode,
+        sizeMode: SizeSystem.get(this._node.getLocation()).getSizeMode(),
         absolute: {
@@ -135,0 +136,0 @@ x: this._absolute.x.get(),

core/Commands.js

@@ -66,5 +66,149 @@ /**
     ALLOW_DEFAULT: 34,
-    PREVENT_DEFAULT: 35
+    PREVENT_DEFAULT: 35,
+    UNSUBSCRIBE: 36,
+    prettyPrint: function (buffer, start, count) {
+        var callback;
+        start = start ? start : 0;
+        var data = {
+            i: start,
+            result: ''
+        };
+        for (var len = count ? count + start : buffer.length ; data.i < len ; data.i++) {
+            callback = commandPrinters[buffer[data.i]];
+            if (!callback) throw new Error('PARSE ERROR: no command registered for: ' + buffer[data.i]);
+            callback(buffer, data);
+        }
+        return data.result;
+    }
 };
 
+var commandPrinters = [];
+
+commandPrinters[Commands.INIT_DOM] = function init_dom (buffer, data) {
+    data.result += data.i + '. INIT_DOM\n    tagName: ' + buffer[++data.i] + '\n\n';
+}; 
+
+commandPrinters[Commands.DOM_RENDER_SIZE] = function dom_render_size (buffer, data) {
+    data.result += data.i + '. DOM_RENDER_SIZE\n    selector: ' + buffer[++data.i] + '\n\n';
+};
+
+commandPrinters[Commands.CHANGE_TRANSFORM] = function change_transform (buffer, data) {
+    data.result += data.i + '. CHANGE_TRANSFORM\n    val: [';
+    for (var j = 0 ; j < 16 ; j++) data.result += buffer[++data.i] + (j < 15 ? ', ' : '');
+    data.result += ']\n\n';
+};
+
+commandPrinters[Commands.CHANGE_SIZE] = function change_size (buffer, data) {
+    data.result += data.i + '. CHANGE_SIZE\n    x: ' + buffer[++data.i] + ', y: ' + buffer[++data.i] + '\n\n';
+};
+
+commandPrinters[Commands.CHANGE_PROPERTY] = function change_property (buffer, data) {
+    data.result += data.i + '. CHANGE_PROPERTY\n    key: ' + buffer[++data.i] + ', value: ' + buffer[++data.i] + '\n\n';
+};
+
+commandPrinters[Commands.CHANGE_CONTENT] = function change_content (buffer, data) {
+    data.result += data.i + '. CHANGE_CONTENT\n    content: ' + buffer[++data.i] + '\n\n';
+};
+
+commandPrinters[Commands.CHANGE_ATTRIBUTE] = function change_attribute (buffer, data) {
+    data.result += data.i + '. CHANGE_ATTRIBUTE\n    key: ' + buffer[++data.i] + ', value: ' + buffer[++data.i] + '\n\n';
+};
+
+commandPrinters[Commands.ADD_CLASS] = function add_class (buffer, data) {
+    data.result += data.i + '. ADD_CLASS\n    className: ' + buffer[++data.i] + '\n\n';
+};
+
+commandPrinters[Commands.REMOVE_CLASS] = function remove_class (buffer, data) {
+    data.result += data.i + '. REMOVE_CLASS\n    className: ' + buffer[++data.i] + '\n\n';
+};
+
+commandPrinters[Commands.SUBSCRIBE] = function subscribe (buffer, data) {
+    data.result += data.i + '. SUBSCRIBE\n    event: ' + buffer[++data.i] + '\n\n';
+};
+
+commandPrinters[Commands.GL_SET_DRAW_OPTIONS] = function gl_set_draw_options (buffer, data) {
+    data.result += data.i + '. GL_SET_DRAW_OPTIONS\n    options: ' + buffer[++data.i] + '\n\n';
+};
+
+commandPrinters[Commands.GL_AMBIENT_LIGHT] = function gl_ambient_light (buffer, data) {
+    data.result += data.i + '. GL_AMBIENT_LIGHT\n    r: ' + buffer[++data.i] + 'g: ' + buffer[++data.i] + 'b: ' + buffer[++data.i] + '\n\n';
+};
+
+commandPrinters[Commands.GL_LIGHT_POSITION] = function gl_light_position (buffer, data) {
+    data.result += data.i + '. GL_LIGHT_POSITION\n    x: ' + buffer[++data.i] + 'y: ' + buffer[++data.i] + 'z: ' + buffer[++data.i] + '\n\n';
+};
+
+commandPrinters[Commands.GL_LIGHT_COLOR] = function gl_light_color (buffer, data) {
+    data.result += data.i + '. GL_LIGHT_COLOR\n    r: ' + buffer[++data.i] + 'g: ' + buffer[++data.i] + 'b: ' + buffer[++data.i] + '\n\n';
+};
+
+commandPrinters[Commands.MATERIAL_INPUT] = function material_input (buffer, data) {
+    data.result += data.i + '. MATERIAL_INPUT\n    key: ' + buffer[++data.i] + ', value: ' + buffer[++data.i] + '\n\n';
+};
+
+commandPrinters[Commands.GL_SET_GEOMETRY] = function gl_set_geometry (buffer, data) {
+    data.result += data.i + '. GL_SET_GEOMETRY\n   x: ' + buffer[++data.i] + ', y: ' + buffer[++data.i] + ', z: ' + buffer[++data.i] + '\n\n';
+};
+
+commandPrinters[Commands.GL_UNIFORMS] = function gl_uniforms (buffer, data) {
+    data.result += data.i + '. GL_UNIFORMS\n    key: ' + buffer[++data.i] + ', value: ' + buffer[++data.i] + '\n\n';
+};
+
+commandPrinters[Commands.GL_BUFFER_DATA] = function gl_buffer_data (buffer, data) {
+    data.result += data.i + '. GL_BUFFER_DATA\n    data: ';
+    for (var i = 0; i < 5 ; i++) data.result += buffer[++data.i] + ', ';
+    data.result += '\n\n';
+};
+
+commandPrinters[Commands.GL_CUTOUT_STATE] = function gl_cutout_state (buffer, data) {
+    data.result += data.i + '. GL_CUTOUT_STATE\n    state: ' + buffer[++data.i] + '\n\n';
+};
+
+commandPrinters[Commands.GL_MESH_VISIBILITY] = function gl_mesh_visibility (buffer, data) {
+    data.result += data.i + '. GL_MESH_VISIBILITY\n    visibility: ' + buffer[++data.i] + '\n\n';
+};
+
+commandPrinters[Commands.GL_REMOVE_MESH] = function gl_remove_mesh (buffer, data) {
+    data.result += data.i + '. GL_REMOVE_MESH\n\n';
+};
+
+commandPrinters[Commands.PINHOLE_PROJECTION] = function pinhole_projection (buffer, data) {
+    data.result += data.i + '. PINHOLE_PROJECTION\n    depth: ' + buffer[++data.i] + '\n\n';
+};
+
+commandPrinters[Commands.ORTHOGRAPHIC_PROJECTION] = function orthographic_projection (buffer, data) {
+    data.result += data.i + '. ORTHOGRAPHIC_PROJECTION\n';
+};
+
+commandPrinters[Commands.CHANGE_VIEW_TRANSFORM] = function change_view_transform (buffer, data) {
+    data.result += data.i + '. CHANGE_VIEW_TRANSFORM\n   value: [';
+    for (var i = 0; i < 16 ; i++) data.result += buffer[++data.i] + (i < 15 ? ', ' : '');
+    data.result += ']\n\n';
+};
+
+commandPrinters[Commands.PREVENT_DEFAULT] = function prevent_default (buffer, data) {
+    data.result += data.i + '. PREVENT_DEFAULT\n    value: ' + buffer[++data.i] + '\n\n';
+};
+
+commandPrinters[Commands.ALLOW_DEFAULT] = function allow_default (buffer, data) {
+    data.result += data.i + '. ALLOW_DEFAULT\n    value: ' + buffer[++data.i] + '\n\n';
+};
+
+commandPrinters[Commands.READY] = function ready (buffer, data) {
+    data.result += data.i + '. READY\n\n';
+};
+
+commandPrinters[Commands.WITH] = function w (buffer, data) {
+    data.result += data.i + '. **WITH**\n     path: ' + buffer[++data.i] + '\n\n';
+};
+
+commandPrinters[Commands.TIME] = function time (buffer, data) {
+    data.result += data.i + '. TIME\n     ms: ' + buffer[++data.i] + '\n\n';
+};
+
+commandPrinters[Commands.NEED_SIZE_FOR] = function need_size_for (buffer, data) {
+    data.result += data.i + '. NEED_SIZE_FOR\n    selector: ' + buffer[++data.i] + '\n\n';
+};
+
 module.exports = Commands;
+

core/Dispatch.js

@@ -105,3 +105,3 @@ /**
     var child = this._queue.shift();
-    if (!child) return void 0; 
+    if (!child) return void 0;
     this.addChildrenToQueue(child);
@@ -328,4 +328,4 @@ return child;
     var node = this._nodes[path];
-    if (!node)
-        throw new Error('No node registered at path: ' + path);
+    
+    if (!node) return;
 
@@ -336,3 +336,3 @@ this.addChildrenToQueue(node);
     while ((child = this.breadthFirstNext()))
-        if (child.onReceive)
+        if (child && child.onReceive)
             child.onReceive(event, payload);
@@ -339,0 +339,0 @@

core/FamousEngine.js

@@ -154,3 +154,3 @@ /**
     SizeSystem.update();
-    TransformSystem.onUpdate();
+    TransformSystem.update();
 
@@ -157,0 +157,0 @@ while (nextQueue.length) queue.unshift(nextQueue.pop());

core/Node.js

@@ -77,3 +77,3 @@ /**
     this._mounted = false;
-    this._shown = false;
+    this._shown = true;
     this._updater = null;
@@ -92,2 +92,4 @@ this._opacity = 1;
 
+    this._fullChildren = [];
+
     this._parent = null;
@@ -100,3 +102,3 @@
 
-    if (this.constructor.INIT_DEFAULT_COMPONENTS) this._init();
+    if (!this.constructor.NO_DEFAULT_COMPONENTS) this._init();
 }
@@ -108,3 +110,3 @@
 Node.DEFAULT_SIZE = 0;
-Node.INIT_DEFAULT_COMPONENTS = true;
+Node.NO_DEFAULT_COMPONENTS = false;
 
@@ -128,3 +130,3 @@ /**
  * @method
- * 
+ *
  * @param {Node} parent The node to set as the parent of this
@@ -209,3 +211,3 @@ *
 /**
- * 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.
@@ -243,3 +245,3 @@ *
     var i = 0;
- 
+
     var value = {
@@ -276,3 +278,3 @@ location: this.getId(),
     };
-    
+
     if (value.location) {
@@ -348,2 +350,15 @@ var transform = TransformSystem.get(this.getId());
 Node.prototype.getChildren = function getChildren () {
+    return this._fullChildren;
+};
+
+/**
+ * Method used internally to retrieve the children of a node. Each index in the
+ * returned array represents a path fragment.
+ *
+ * @method getRawChildren
+ * @private
+ *
+ * @return {Array}  An array of children. Might contain `null` elements.
+ */
+Node.prototype.getRawChildren = function getRawChildren() {
     return this._children;
@@ -382,4 +397,6 @@ };
         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;
@@ -403,3 +420,4 @@ };
 Node.prototype.requestUpdateOnNextTick = function requestUpdateOnNextTick (requester) {
-    this._nextUpdateQueue.push(requester);
+    if (this._nextUpdateQueue.indexOf(requester) === -1)
+        this._nextUpdateQueue.push(requester);
     return this;
@@ -421,2 +439,14 @@ };
 /**
+ * Checks if the node is being rendered. A node is being rendererd when it is
+ * mounted to a parent node **and** shown.
+ *
+ * @method isRendered
+ *
+ * @return {Boolean}    Boolean indicating whether the node is rendered or not.
+ */
+Node.prototype.isRendered = function isRendered () {
+    return this._mounted && this._shown;
+};
+
+/**
  * Checks if the node is visible ("shown").
@@ -455,3 +485,3 @@ *
 Node.prototype.getMountPoint = function getMountPoint () {
-    if (this.constructor.INIT_DEFAULT_COMPONENTS)
+    if (!this.constructor.NO_DEFAULT_COMPONENTS)
         return this.getComponent(this._transformID).getMountPoint();
@@ -471,3 +501,3 @@ else if (this.isMounted())
 Node.prototype.getAlign = function getAlign () {
-    if (this.constructor.INIT_DEFAULT_COMPONENTS)
+    if (!this.constructor.NO_DEFAULT_COMPONENTS)
         return this.getComponent(this._transformID).getAlign();
@@ -487,3 +517,3 @@ else if (this.isMounted())
 Node.prototype.getOrigin = function getOrigin () {
-    if (this.constructor.INIT_DEFAULT_COMPONENTS)
+    if (!this.constructor.NO_DEFAULT_COMPONENTS)
         return this.getComponent(this._transformID).getOrigin();
@@ -503,3 +533,3 @@ else if (this.isMounted())
 Node.prototype.getPosition = function getPosition () {
-    if (this.constructor.INIT_DEFAULT_COMPONENTS)
+    if (!this.constructor.NO_DEFAULT_COMPONENTS)
         return this.getComponent(this._transformID).getPosition();
@@ -519,3 +549,3 @@ else if (this.isMounted())
 Node.prototype.getRotation = function getRotation () {
-    if (this.constructor.INIT_DEFAULT_COMPONENTS)
+    if (!this.constructor.NO_DEFAULT_COMPONENTS)
         return this.getComponent(this._transformID).getRotation();
@@ -535,3 +565,3 @@ else if (this.isMounted())
 Node.prototype.getScale = function getScale () {
-    if (this.constructor.INIT_DEFAULT_COMPONENTS)
+    if (!this.constructor.NO_DEFAULT_COMPONENTS)
         return this.getComponent(this._transformID).getScale();
@@ -551,3 +581,3 @@ else if (this.isMounted())
 Node.prototype.getSizeMode = function getSizeMode () {
-    if (this.constructor.INIT_DEFAULT_COMPONENTS)
+    if (!this.constructor.NO_DEFAULT_COMPONENTS)
         return this.getComponent(this._sizeID).getSizeMode();
@@ -567,3 +597,3 @@ else if (this.isMounted())
 Node.prototype.getProportionalSize = function getProportionalSize () {
-    if (this.constructor.INIT_DEFAULT_COMPONENTS)
+    if (!this.constructor.NO_DEFAULT_COMPONENTS)
         return this.getComponent(this._sizeID).getProportional();
@@ -583,3 +613,3 @@ else if (this.isMounted())
 Node.prototype.getDifferentialSize = function getDifferentialSize () {
-    if (this.constructor.INIT_DEFAULT_COMPONENTS)
+    if (!this.constructor.NO_DEFAULT_COMPONENTS)
         return this.getComponent(this._sizeID).getDifferential();
@@ -599,3 +629,3 @@ else if (this.isMounted())
 Node.prototype.getAbsoluteSize = function getAbsoluteSize () {
-    if (this.constructor.INIT_DEFAULT_COMPONENTS)
+    if (!this.constructor.NO_DEFAULT_COMPONENTS)
         return this.getComponent(this._sizeID).getAbsolute();
@@ -617,3 +647,3 @@ else if (this.isMounted())
 Node.prototype.getRenderSize = function getRenderSize () {
-    if (this.constructor.INIT_DEFAULT_COMPONENTS)
+    if (!this.constructor.NO_DEFAULT_COMPONENTS)
         return this.getComponent(this._sizeID).getRender();
@@ -633,3 +663,3 @@ else if (this.isMounted())
 Node.prototype.getSize = function getSize () {
-    if (this.constructor.INIT_DEFAULT_COMPONENTS)
+    if (!this.constructor.NO_DEFAULT_COMPONENTS)
         return this.getComponent(this._sizeID).get();
@@ -683,2 +713,3 @@ else if (this.isMounted())
         this._children[index] = child;
+        this._fullChildren.push(child);
     }
@@ -712,4 +743,16 @@
 
+        var fullChildrenIndex = this._fullChildren.indexOf(child);
+        var len = this._fullChildren.length;
+        var i = 0;
+
+        for (i = fullChildrenIndex; i < len-1; i++)
+            this._fullChildren[i] = this._fullChildren[i + 1];
+
+        this._fullChildren.pop();
+
         return true;
-    } else throw new Error('Node is not a child of this node');
+    }
+    else {
+        return false;
+    }
 };
@@ -781,3 +824,3 @@
 /**
- * Removes a node's subscription to a particular UIEvent. All components 
+ * Removes a node's subscription to a particular UIEvent. All components
  * on the node will have the opportunity to remove all listeners depending
@@ -816,3 +859,3 @@ * on this event.
  *
- * @return {undefined} undefined
+ * @return {Node} this
  */
@@ -832,2 +875,4 @@ Node.prototype.addUIEvent = function addUIEvent (eventName) {
     }
+    
+    return this;
 };
@@ -917,3 +962,3 @@
 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);
@@ -939,3 +984,3 @@ else if (this.isMounted())
 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);
@@ -961,3 +1006,3 @@ else if (this.isMounted())
 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);
@@ -983,3 +1028,3 @@ else if (this.isMounted())
 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);
@@ -1008,3 +1053,3 @@ else if (this.isMounted())
 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);
@@ -1030,3 +1075,3 @@ else if (this.isMounted())
 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);
@@ -1092,3 +1137,3 @@ else if (this.isMounted())
 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);
@@ -1115,3 +1160,3 @@ else if (this.isMounted())
 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);
@@ -1143,3 +1188,3 @@ else if (this.isMounted())
 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);
@@ -1164,3 +1209,3 @@ else if (this.isMounted())
 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);
@@ -1212,4 +1257,2 @@ else if (this.isMounted())
 
-    if (this.onUpdate) this.onUpdate();
-
     while (nextQueue.length) queue.unshift(nextQueue.pop());
@@ -1251,3 +1294,3 @@
 
-    if (this.constructor.INIT_DEFAULT_COMPONENTS){
+    if (!this.constructor.NO_DEFAULT_COMPONENTS){
         TransformSystem.registerTransformAtPath(path, this.getComponent(this._transformID));
@@ -1254,0 +1297,0 @@ SizeSystem.registerSizeAtPath(path, this.getComponent(this._sizeID));

core/Path.js

 /**
  * The MIT License (MIT)
- * 
+ *
  * Copyright (c) 2015 Famous Industries Inc.
- * 
+ *
  * Permission is hereby granted, free of charge, to any person obtaining a copy
@@ -12,6 +12,6 @@ * of this software and associated documentation files (the "Software"), to deal
  * furnished to do so, subject to the following conditions:
- * 
+ *
  * The above copyright notice and this permission notice shall be included in
  * all copies or substantial portions of the Software.
- * 
+ *
  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
@@ -31,144 +31,144 @@ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  *
- * @class
+ * @namespace
  */
-function PathUtils () {
-}
+var Path = {
 
-/**
- * determines if the passed in path has a trailing slash. Paths of the form
- * 'body/0/1/' return true, while paths of the form 'body/0/1' return false.
- *
- * @method
- *
- * @param {String} path the path
- *
- * @return {Boolean} whether or not the path has a trailing slash
- */
-PathUtils.prototype.hasTrailingSlash = function hasTrailingSlash (path) {
-    return path[path.length - 1] === '/';
-};
+    /**
+     * determines if the passed in path has a trailing slash. Paths of the form
+     * 'body/0/1/' return true, while paths of the form 'body/0/1' return false.
+     *
+     * @method
+     *
+     * @param {String} path the path
+     *
+     * @return {Boolean} whether or not the path has a trailing slash
+     */
+    hasTrailingSlash: function hasTrailingSlash (path) {
+        return path[path.length - 1] === '/';
+    },
 
-/**
- * Returns the depth in the tree this path represents. Essentially counts
- * the slashes ignoring a trailing slash.
- *
- * @method
- *
- * @param {String} path the path
- *
- * @return {Number} the depth in the tree that this path represents
- */
-PathUtils.prototype.depth = function depth (path) {
-    var count = 0;
-    var length = path.length;
-    var len = this.hasTrailingSlash(path) ? length - 1 : length;
-    var i = 0;
-    for (; i < len ; i++) count += path[i] === '/' ? 1 : 0;
-    return count;
-};
+    /**
+     * Returns the depth in the tree this path represents. Essentially counts
+     * the slashes ignoring a trailing slash.
+     *
+     * @method
+     *
+     * @param {String} path the path
+     *
+     * @return {Number} the depth in the tree that this path represents
+     */
+    depth: function depth (path) {
+        var count = 0;
+        var length = path.length;
+        var len = this.hasTrailingSlash(path) ? length - 1 : length;
+        var i = 0;
+        for (; i < len ; i++) count += path[i] === '/' ? 1 : 0;
+        return count;
+    },
 
-/**
- * Gets the position of this path in relation to its siblings.
- *
- * @method
- *
- * @param {String} path the path
- *
- * @return {Number} the index of this path in relation to its siblings.
- */
-PathUtils.prototype.index = function index (path) {
-    var length = path.length;
-    var len = this.hasTrailingSlash(path) ? length - 1 : length;
-    while (len--) if (path[len] === '/') break;
-    var result = parseInt(path.substring(len + 1));
-    return isNaN(result) ? 0 : result;
-};
+    /**
+     * Gets the position of this path in relation to its siblings.
+     *
+     * @method
+     *
+     * @param {String} path the path
+     *
+     * @return {Number} the index of this path in relation to its siblings.
+     */
+    index: function index (path) {
+        var length = path.length;
+        var len = this.hasTrailingSlash(path) ? length - 1 : length;
+        while (len--) if (path[len] === '/') break;
+        var result = parseInt(path.substring(len + 1));
+        return isNaN(result) ? 0 : result;
+    },
 
-/**
- * Gets the position of the path at a particular breadth in relationship
- * to its siblings
- *
- * @method
- *
- * @param {String} path the path
- * @param {Number} depth the breadth at which to find the index
- *
- * @return {Number} index at the particular depth
- */
-PathUtils.prototype.indexAtDepth = function indexAtDepth (path, depth) {
-    var i = 0;
-    var len = path.length;
-    var index = 0;
-    for (; i < len ; i++) {
-        if (path[i] === '/') index++;
-        if (index === depth) {
-            path = path.substring(i ? i + 1 : i);
-            index = path.indexOf('/');
-            path = index === -1 ? path : path.substring(0, index);
-            index = parseInt(path);
-            return isNaN(index) ? path : index;
+    /**
+     * Gets the position of the path at a particular breadth in relationship
+     * to its siblings
+     *
+     * @method
+     *
+     * @param {String} path the path
+     * @param {Number} depth the breadth at which to find the index
+     *
+     * @return {Number} index at the particular depth
+     */
+    indexAtDepth: function indexAtDepth (path, depth) {
+        var i = 0;
+        var len = path.length;
+        var index = 0;
+        for (; i < len ; i++) {
+            if (path[i] === '/') index++;
+            if (index === depth) {
+                path = path.substring(i ? i + 1 : i);
+                index = path.indexOf('/');
+                path = index === -1 ? path : path.substring(0, index);
+                index = parseInt(path);
+                return isNaN(index) ? path : index;
+            }
         }
-    }
-};
+    },
 
-/**
- * returns the path of the passed in path's parent.
- *
- * @method
- *
- * @param {String} path the path
- *
- * @return {String} the path of the passed in path's parent
- */
-PathUtils.prototype.parent = function parent (path) {
-    return path.substring(0, path.lastIndexOf('/', path.length - 2));
-};
+    /**
+     * returns the path of the passed in path's parent.
+     *
+     * @method
+     *
+     * @param {String} path the path
+     *
+     * @return {String} the path of the passed in path's parent
+     */
+    parent: function parent (path) {
+        return path.substring(0, path.lastIndexOf('/', path.length - 2));
+    },
 
-/**
- * Determines whether or not the first argument path is the direct child
- * of the second argument path.
- *
- * @method
- *
- * @param {String} child the path that may be a child
- * @param {String} parent the path that may be a parent
- *
- * @return {Boolean} whether or not the first argument path is a child of the second argument path
- */
-PathUtils.prototype.isChildOf = function isChildOf (child, parent) {
-    return this.isDescendentOf(child, parent) && this.depth(child) === this.depth(parent) + 1;
-};
+    /**
+     * Determines whether or not the first argument path is the direct child
+     * of the second argument path.
+     *
+     * @method
+     *
+     * @param {String} child the path that may be a child
+     * @param {String} parent the path that may be a parent
+     *
+     * @return {Boolean} whether or not the first argument path is a child of the second argument path
+     */
+    isChildOf: function isChildOf (child, parent) {
+        return this.isDescendentOf(child, parent) && this.depth(child) === this.depth(parent) + 1;
+    },
 
-/**
- * Returns true if the first argument path is a descendent of the second argument path.
- *
- * @method
- *
- * @param {String} child potential descendent path
- * @param {String} parent potential ancestor path
- *
- * @return {Boolean} whether or not the path is a descendent
- */
-PathUtils.prototype.isDescendentOf = function isDescendentOf(child, parent) {
-    if (child === parent) return false;
-    child = this.hasTrailingSlash(child) ? child : child + '/';
-    parent = this.hasTrailingSlash(parent) ? parent : parent + '/';
-    return this.depth(parent) < this.depth(child) && child.indexOf(parent) === 0;
-};
+    /**
+     * Returns true if the first argument path is a descendent of the second argument path.
+     *
+     * @method
+     *
+     * @param {String} child potential descendent path
+     * @param {String} parent potential ancestor path
+     *
+     * @return {Boolean} whether or not the path is a descendent
+     */
+    isDescendentOf: function isDescendentOf(child, parent) {
+        if (child === parent) return false;
+        child = this.hasTrailingSlash(child) ? child : child + '/';
+        parent = this.hasTrailingSlash(parent) ? parent : parent + '/';
+        return this.depth(parent) < this.depth(child) && child.indexOf(parent) === 0;
+    },
 
-/**
- * returns the selector portion of the path.
- *
- * @method
- *
- * @param {String} path the path
- *
- * @return {String} the selector portion of the path.
- */
-PathUtils.prototype.getSelector = function getSelector(path) {
-    var index = path.indexOf('/');
-    return index === -1 ? path : path.substring(0, index);
+    /**
+     * returns the selector portion of the path.
+     *
+     * @method
+     *
+     * @param {String} path the path
+     *
+     * @return {String} the selector portion of the path.
+     */
+    getSelector: function getSelector(path) {
+        var index = path.indexOf('/');
+        return index === -1 ? path : path.substring(0, index);
+    }
+
 };
 
-module.exports = new PathUtils();
-
+module.exports = Path;

core/Scene.js

@@ -41,2 +41,3 @@ /**
  * @constructor
+ * @extends Node
  *
@@ -78,2 +79,3 @@ * @param {String} selector a string which is a dom selector
 Scene.prototype.constructor = Scene;
+Scene.NO_DEFAULT_COMPONENTS = true;
 
@@ -80,0 +82,0 @@ /**

core/test/expected/DefaultNodeSpec.json

@@ -5,3 +5,3 @@ {
         "mounted": false,
-        "shown": false,
+        "shown": true,
         "opacity": 1
@@ -8,0 +8,0 @@ },

core/test/Node.js

@@ -200,7 +200,11 @@ /**
         t.equal(typeof child.isShown, 'function', 'child.isShown should be a function');
-        t.equal(child.isShown(), false, 'nodes should not be shown when being initialized');
+        t.equal(child.isShown(), true, 'nodes should be shown by default');
 
+        child.hide();
+
+        t.equal(child.isShown(), false, 'node.isShown should return false when node has been hidden using Node#hide');
+
         child.show();
 
-        t.equal(child.isShown(), true, 'node.isShown should indicate shown state after node has been mounted');
+        t.equal(child.isShown(), true, 'node.isShown should return true when node has been shown using Node#shown');
 
@@ -207,0 +211,0 @@ t.end();

core/test/node/Node.api.js

 module.exports = [
+    '_init',
+    '_setParent',
+    '_setMounted',
+    '_setShown',
     '_setUpdater',
     'getLocation',
     'getId',
+    'getLocation',
     'emit',
@@ -10,6 +15,6 @@ 'sendDrawCommand',
     'getChildren',
+    'getRawChildren',
     'getParent',
     'requestUpdate',
     'requestUpdateOnNextTick',
-    'getUpdater',
     'isMounted',
@@ -37,3 +42,6 @@ 'isShown',
     'removeComponent',
+    'removeUIEvent',
     'addUIEvent',
+    '_requestUpdate',
+    '_vecOptionalSet',
     'show',
@@ -43,2 +51,3 @@ 'hide',
     'setMountPoint',
+    'setOrigin',
     'setPosition',
@@ -56,4 +65,3 @@ 'setRotation',
     'mount',
-    'dismount',
-    'receive'
+    'dismount'
 ];

core/Transform.js

@@ -61,2 +61,3 @@ /**
     this.breakPoint = false;
+    this.calculatingWorldMatrix = false;
 }
@@ -83,2 +84,3 @@
     this.breakPoint = false;
+    this.calculatingWorldMatrix = false;
 };
@@ -121,5 +123,17 @@
     this.breakPoint = true;
+    this.calculatingWorldMatrix = true;
 };
 
 /**
+ * Set this node to calculate the world matrix.
+ *
+ * @method
+ *
+ * @return {undefined} undefined
+ */
+Transform.prototype.setCalculateWorldMatrix = function setCalculateWorldMatrix () {
+    this.calculatingWorldMatrix = true;
+};
+
+/**
  * returns whether or not this transform is a breakpoint.
@@ -154,3 +168,3 @@ *
 Transform.prototype.getWorldTransform = function getWorldTransform () {
-    if (!this.isBreakPoint())
+    if (!this.isBreakPoint() && !this.calculatingWorldMatrix)
         throw new Error('This transform is not calculating world transforms');
@@ -543,3 +557,3 @@ return this.global;
 
-    if (transform.isBreakPoint() && transform.calculateWorldMatrix())
+    if (transform.calculatingWorldMatrix && transform.calculateWorldMatrix())
         changed |= Transform.WORLD_CHANGED;
@@ -669,3 +683,3 @@
 
-    if (transform.isBreakPoint() && transform.calculateWorldMatrix())
+    if (transform.calculatingWorldMatrix && transform.calculateWorldMatrix())
         changed |= Transform.WORLD_CHANGED;
@@ -672,0 +686,0 @@

core/TransformSystem.js

@@ -53,3 +53,4 @@ /**
 TransformSystem.prototype.registerTransformAtPath = function registerTransformAtPath (path, transform) {
-    if (!PathUtils.depth(path)) return this.pathStore.insert(path, transform ? transform : new Transform());
+    if (!PathUtils.depth(path))
+        return this.pathStore.insert(path, transform ? transform : new Transform());
 
@@ -99,2 +100,17 @@ var parent = this.pathStore.get(PathUtils.parent(path));
 /**
+ * Method that will make the transform at this location calculate a world matrix.
+ *
+ * @method
+ *
+ * @param {String} path The path at which to make the transform calculate a world matrix
+ *
+ * @return {undefined} undefined
+ */
+TransformSystem.prototype.makeCalculateWorldMatrixAt = function makeCalculateWorldMatrixAt (path) {
+        var transform = this.pathStore.get(path);
+        if (!transform) throw new Error('No transform Registered at path: ' + path);
+        transform.setCalculateWorldMatrix();
+};
+
+/**
  * Returns the instance of the transform class associated with the given path,
@@ -114,3 +130,3 @@ * or undefined if no transform is associated.
 /**
- * onUpdate is called when the transform system requires an update.
+ * update is called when the transform system requires an update.
  * It traverses the transform array and evaluates the necessary transforms
@@ -120,7 +136,7 @@ * in the scene graph with the information from the corresponding node
  *
- * @method onUpdate
+ * @method update
  *
  * @return {undefined} undefined
  */
-TransformSystem.prototype.onUpdate = function onUpdate () {
+TransformSystem.prototype.update = function update () {
     var transforms = this.pathStore.getItems();
@@ -364,2 +380,1 @@ var paths = this.pathStore.getPaths();
 module.exports = new TransformSystem();
-

dom-renderables/DOMElement.js

@@ -30,5 +30,4 @@ /**
 var Commands = require('../core/Commands');
+var Size = require('../core/Size');
 
-var RENDER_SIZE = 2;
-
 /**
@@ -61,3 +60,3 @@ * A DOMElement is a component that can be added to a Node with the
     this._changeQueue = [];
-    
+
     this._requestingUpdate = false;
@@ -78,7 +77,5 @@ this._renderSized = false;
 
-    this._id = node ? node.addComponent(this) : null;
     this._node = node;
+    if (node) node.addComponent(this);
 
-    this.onSizeModeChange.apply(this, node.getSizeMode());
-
     this._callbacks = new CallbackStore();
@@ -179,2 +176,3 @@
     TransformSystem.makeBreakPointAt(node.getLocation());
+    this.onSizeModeChange.apply(this, node.getSizeMode());
     this.draw();
@@ -278,4 +276,4 @@ this.setAttribute('data-fa-path', node.getLocation());
     var sizeMode = this._node.getSizeMode();
-    var sizedX = sizeMode[0] !== RENDER_SIZE;
-    var sizedY = sizeMode[1] !== RENDER_SIZE;
+    var sizedX = sizeMode[0] !== Size.RENDER;
+    var sizedY = sizeMode[1] !== Size.RENDER;
     if (this._initialized)
@@ -410,5 +408,5 @@ this._changeQueue.push(Commands.CHANGE_SIZE,
     if (this._initialized) {
-        this._changeQueue.push('UNSUBSCRIBE', UIEvent);
+        this._changeQueue.push(Commands.UNSUBSCRIBE, UIEvent);
     }
-    
+
     if (!this._requestingUpdate) this._requestUpdate();
@@ -431,3 +429,3 @@ };
 DOMElement.prototype.onSizeModeChange = function onSizeModeChange(x, y, z) {
-    if (x === RENDER_SIZE || y === RENDER_SIZE || z === RENDER_SIZE) {
+    if (x === Size.RENDER || y === Size.RENDER || z === Size.RENDER) {
         this._renderSized = true;
@@ -461,3 +459,3 @@ this._requestRenderSize = true;
 DOMElement.prototype._requestUpdate = function _requestUpdate() {
-    if (!this._requestingUpdate) {
+    if (!this._requestingUpdate && this._id) {
         this._node.requestUpdate(this._id);
@@ -464,0 +462,0 @@ this._requestingUpdate = true;

dom-renderers/DOMRenderer.js

@@ -31,2 +31,3 @@ /**
 var vendorPrefix = require('../utilities/vendorPrefix');
+var CallbackStore = require('../utilities/CallbackStore');
 var eventMap = require('./events/EventMap');
@@ -72,2 +73,5 @@
 
+     this._insertElCallbackStore = new CallbackStore();
+     this._removeElCallbackStore = new CallbackStore();
+
     this._root = new ElementCache(element, selector); // the root
@@ -117,16 +121,2 @@ // of the dom tree that this
 /**
- * Unsubscribes from all events that are of the specified type.
- *
- * @method
- *
- * @param  {String} type    Event type to unsubscribe from.
- * @return {undefined}      undefined
- */
-DOMRenderer.prototype.unsubscribe = function unsubscribe(type) {
-    this._assertTargetLoaded();
-    this._listen(type);
-    this._target.subscribe[type] = false;
-};
-
-/**
  * Used to preventDefault if an event of the specified type is being emitted on
@@ -192,4 +182,3 @@ * the currently loaded target.
 /**
- * Removes an EventListener of given type from the element on which it was
- * registered.
+ * Unsubscribes from all events that are of the specified type.
  *
@@ -199,3 +188,2 @@ * @method
  * @param {String} type DOM event type (e.g. click, mouseover).
- *
  * @return {undefined} undefined
@@ -403,2 +391,3 @@ */
  * @method
+ * @deprecated
  *
@@ -412,5 +401,4 @@ * @return {ElementCache|undefined} Element loaded under defined path.
 
-
 /**
- * Loads the passed in path.
+ * Loads the passed in path into the DOMRenderer.
  *
@@ -425,2 +413,3 @@ * @method
     this._path = path;
+    this._target = this._elements[this._path];
     return this._path;
@@ -484,3 +473,6 @@ };
 
-        if (this._target) this._parent.element.removeChild(this._target.element);
+        if (this._target) {
+            this._parent.element.removeChild(this._target.element);
+            this._removeElCallbackStore.trigger(this._path, this._target);
+        }
 
@@ -496,2 +488,4 @@ this._target = new ElementCache(document.createElement(tagName), this._path);
         this._elements[this._path] = this._target;
+
+        this._insertElCallbackStore.trigger(this._path, this._target);
     }
@@ -521,3 +515,3 @@ };
  * ("true-sizing").
- * 
+ *
  * Invoking setSize is equivalent to a manual invocation of `setWidth` followed
@@ -542,5 +536,5 @@ * by `setHeight`.
  * Sets the width of the currently loaded ElementCache.
- * 
+ *
  * @method
- *  
+ *
  * @param  {Number|false} width     The explicit width to be set on the
@@ -553,3 +547,3 @@ *                                  ElementCache's target (and content) element.
  * @return {undefined} undefined
- */ 
+ */
 DOMRenderer.prototype.setWidth = function setWidth(width) {
@@ -577,5 +571,5 @@ this._assertTargetLoaded();
  * Sets the height of the currently loaded ElementCache.
- * 
+ *
  * @method  setHeight
- *  
+ *
  * @param  {Number|false} height    The explicit height to be set on the
@@ -588,3 +582,3 @@ *                                  ElementCache's target (and content) element.
  * @return {undefined} undefined
- */ 
+ */
 DOMRenderer.prototype.setHeight = function setHeight(height) {
@@ -718,3 +712,3 @@ this._assertTargetLoaded();
     var r = 'matrix3d(';
-    
+
     r += (m[0] < 0.000001 && m[0] > -0.000001) ? '0,' : m[0] + ',';
@@ -735,3 +729,3 @@ r += (m[1] < 0.000001 && m[1] > -0.000001) ? '0,' : m[1] + ',';
     r += (m[14] < 0.000001 && m[14] > -0.000001) ? '0,' : m[14] + ',';
-    
+
     r += m[15] + ')';
@@ -741,2 +735,67 @@ return r;
 
+/**
+ * Registers a function to be executed when a new element is being inserted at
+ * the specified path.
+ *
+ * @method
+ *
+ * @param  {String}   path      Path at which to listen for element insertion.
+ * @param  {Function} callback  Function to be executed when an insertion
+ *                              occurs.
+ * @return {DOMRenderer}        this
+ */
+DOMRenderer.prototype.onInsertEl = function onInsertEl(path, callback) {
+    this._insertElCallbackStore.on(path, callback);
+    return this;
+};
+
+/**
+ * Deregisters a listener function to be no longer executed on future element
+ * insertions at the specified path.
+ *
+ * @method
+ *
+ * @param  {String}   path      Path at which the listener function has been
+ *                              registered.
+ * @param  {Function} callback  Callback function to be deregistered.
+ * @return {DOMRenderer}        this
+ */
+DOMRenderer.prototype.offInsertEl = function offInsertEl(path, callback) {
+    this._insertElCallbackStore.off(path, callback);
+    return this;
+};
+
+/**
+ * Registers an event handler to be triggered as soon as an element at the
+ * specified path is being removed.
+ *
+ * @method
+ *
+ * @param  {String}   path      Path at which to listen for the removal of an
+ *                              element.
+ * @param  {Function} callback  Function to be executed when an element is
+ *                              being removed at the specified path.
+ * @return {DOMRenderer}        this
+ */
+DOMRenderer.prototype.onRemoveEl = function onRemoveEl(path, callback) {
+    this._removeElCallbackStore.on(path, callback);
+    return this;
+};
+
+/**
+ * Deregisters a listener function to be no longer executed when an element is
+ * being removed from the specified path.
+ *
+ * @method
+ *
+ * @param  {String}   path      Path at which the listener function has been
+ *                              registered.
+ * @param  {Function} callback  Callback function to be deregistered.
+ * @return {DOMRenderer}        this
+ */
+DOMRenderer.prototype.offRemoveEl = function offRemoveEl(path, callback) {
+    this._removeElCallbackStore.off(path, callback);
+    return this;
+};
+
 module.exports = DOMRenderer;

dom-renderers/events/EventMap.js

@@ -73,2 +73,3 @@ /**
     mouseup                        : [MouseEvent, true],
+    contextMenu                    : [MouseEvent, true],
     resize                         : [UIEvent, false],
@@ -75,0 +76,0 @@

dom-renderers/test/DOMRenderer.js

@@ -62,11 +62,8 @@ /**
         domRenderer.loadPath(selector + '/' + 0);
-        domRenderer.findTarget();
         domRenderer.insertEl('div');
 
         domRenderer.loadPath(selector + '/' + 1);
-        domRenderer.findTarget();
         domRenderer.insertEl('section');
 
         domRenderer.loadPath(selector + '/' + 2);
-        domRenderer.findTarget();
         domRenderer.insertEl('div');
@@ -79,3 +76,2 @@
         domRenderer.loadPath(selector + '/' + 1 + '/' + 0);
-        domRenderer.findTarget();
         domRenderer.insertEl('div');
@@ -86,3 +82,2 @@
         domRenderer.loadPath(selector + '/' + 1 + '/' + 0 + '/' + 0);
-        domRenderer.findTarget();
         domRenderer.insertEl('div');
@@ -102,3 +97,2 @@
         domRenderer.loadPath('selector/0/0/1');
-        domRenderer.findTarget();
         domRenderer.insertEl('div');
@@ -127,3 +121,2 @@
         domRenderer.loadPath(selector + '/' + 1 + '/' + 0 + '/' + 0);
-        domRenderer.findTarget();
         domRenderer.insertEl('div');
@@ -138,3 +131,2 @@
         domRenderer.loadPath(selector + '/' + 1);
-        domRenderer.findTarget();
         domRenderer.insertEl('div');
@@ -161,3 +153,2 @@
         domRenderer.loadPath(selector + '/' + 0);
-        domRenderer.findTarget();
         domRenderer.insertEl('div');
@@ -182,3 +173,2 @@ domRenderer.setSize(200, 100);
         domRenderer.loadPath(selector + '/' + 0);
-        domRenderer.findTarget();
         domRenderer.insertEl('div');
@@ -202,3 +192,2 @@
         domRenderer.loadPath(selector + '/' + 0);
-        domRenderer.findTarget();
         domRenderer.insertEl('div');
@@ -215,3 +204,2 @@
         domRenderer.loadPath(selector + '/' + 0 + '/' + 1);
-        domRenderer.findTarget();
         domRenderer.insertEl('section');
@@ -234,3 +222,2 @@ t.equal(element.children[0].children[0].innerHTML, 'combined <strong>HTML</strong> and nodes <section></section>');
         domRenderer.loadPath(selector + '/' + 0 + '/' + 1);
-        domRenderer.findTarget();
         domRenderer.insertEl('div');
@@ -257,3 +244,2 @@
         domRenderer.loadPath(selector + '/' + 0);
-        domRenderer.findTarget();
         domRenderer.insertEl('div');
@@ -264,3 +250,2 @@
         domRenderer.loadPath(selector + '/' + 0 + '/' + 1);
-        domRenderer.findTarget();
         domRenderer.insertEl('section');
@@ -287,7 +272,5 @@
         domRenderer.loadPath(selector + '/' + 0);
-        domRenderer.findTarget();
         domRenderer.insertEl('div');
 
         domRenderer.loadPath(selector + '/' + 0 + '/' + 1);
-        domRenderer.findTarget();
         domRenderer.insertEl('div');
@@ -298,3 +281,2 @@
         domRenderer.loadPath(selector + '/' + 0 + '/' + 1 + '/' + 0);
-        domRenderer.findTarget();
         domRenderer.insertEl('div');
@@ -334,2 +316,41 @@
 
+    t.test('Man in the middle insertion', function(t) {
+        var element = document.createElement('div');
+        var selector = 'selector';
+        var compositor = createUnidirectionalCompositor();
+        var domRenderer = new DOMRenderer(element, selector, compositor);
+
+        domRenderer.loadPath('selector/0/0/1');
+        domRenderer.insertEl('div');
+        domRenderer.setAttribute('data-fa-path', 'selector/0/0/1');
+
+        t.equal(element.children.length, 1, 'domRenderer.insertEl should create a single DIV when no content is being set');
+        t.equal(element.children[0].children.length, 0, 'domRenderer.insertEl should not create a separate content DIV by default');
+
+        domRenderer.loadPath('selector/0');
+        domRenderer.insertEl('section');
+        domRenderer.setAttribute('data-fa-path', 'selector/0');
+
+        t.equal(element.children.length, 1, 'domRenderer.insertEl should insert second element in between root element and leaf node');
+        t.equal(element.children[0].tagName.toUpperCase(), 'SECTION', 'domRenderer.insertEl should insert using correct tagName');
+
+        t.equal(element.children[0].children.length, 1, 'domRenderer.insertEl should insert new element in between that has the previous leaf node as a child');
+        t.equal(element.children[0].children[0].tagName.toUpperCase(), 'DIV', 'domRenderer.insertEl should preserve tagName of previously inserted leaf node');
+
+        domRenderer.loadPath('selector/0/1');
+        domRenderer.insertEl('span');
+        domRenderer.setAttribute('data-fa-path', 'selector/0/1');
+
+        t.equal(element.children[0].children.length, 2, 'domRenderer.insertEl should insert sibling');
+        t.equal(element.children[0].children[1].tagName.toUpperCase(), 'SPAN', 'domRenderer.insertEl should insert sibling using correct tagName');
+        t.equal(element.children[0].children[1].children.length, 0, 'domRenderer.insertEl should insert sibling as leaf node');
+
+        domRenderer.loadPath('selector/0');
+
+        domRenderer.setContent('hello world');
+
+        t.equal(element.children[0].children.length, 3, 'domRenderer.insertEl should preserve correct DOM nesting when wrapping content');
+
+        t.end();
+    });
 });

package.json

 {
   "name": "famous",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "description": "",
@@ -5,0 +5,0 @@ "main": "index.js",

renderers/Context.js

@@ -73,3 +73,3 @@ /**
     this._canvasEl = null;
-    
+
     // State holders
@@ -148,3 +148,3 @@
     this._rootEl.appendChild(this._domRendererRootEl);
-    this._domRendererRootEl.style.display = 'none';
+    this._domRendererRootEl.style.visibility = 'hidden';
 
@@ -158,9 +158,2 @@ this._domRenderer = new DOMRenderer(
 
-Context.prototype.getRootSize = function getRootSize() {
-    return [
-        this._rootEl.offsetWidth,
-        this._rootEl.offsetHeight
-    ];
-};
-
 Context.prototype.initCommandCallbacks = function initCommandCallbacks () {
@@ -177,2 +170,3 @@ this._commandCallbacks[Commands.INIT_DOM] = initDOM;
     this._commandCallbacks[Commands.SUBSCRIBE] = subscribe;
+    this._commandCallbacks[Commands.UNSUBSCRIBE] = unsubscribe;
     this._commandCallbacks[Commands.GL_SET_DRAW_OPTIONS] = glSetDrawOptions;
@@ -246,3 +240,3 @@ this._commandCallbacks[Commands.GL_AMBIENT_LIGHT] = glAmbientLight;
     if (this._initDOM) {
-        this._domRendererRootEl.style.display = 'block';
+        this._domRendererRootEl.style.visibility = 'visible';
         this._initDOM = false;
@@ -271,7 +265,6 @@ }
     this._domRenderer.loadPath(path);
-    this._domRenderer.findTarget();
 
     while (command != null) {
         if (command === Commands.WITH || command === Commands.TIME) return localIterator - 1;
-        else localIterator = this._commandCallbacks[command](this, path, commands, localIterator) + 1; 
+        else localIterator = this._commandCallbacks[command](this, path, commands, localIterator) + 1;
         command = commands[localIterator];
@@ -354,3 +347,3 @@ }
     context._domRenderer.setMatrix(temp);
-    
+
     if (context._webGLRenderer)
@@ -372,3 +365,3 @@ context._webGLRenderer.setCutoutUniform(path, 'u_transform', temp);
     }
-    
+
     return iterator;
@@ -388,3 +381,3 @@ }
 }
-  
+
 function changeAttribute (context, path, commands, iterator) {
@@ -414,2 +407,8 @@ if (context._webGLRenderer) context._webGLRenderer.getOrSetCutout(path);
 
+function unsubscribe (context, path, commands, iterator) {
+    if (context._webGLRenderer) context._webGLRenderer.getOrSetCutout(path);
+    context._domRenderer.unsubscribe(commands[++iterator]);
+    return iterator;
+}
+
 function glSetDrawOptions (context, path, commands, iterator) {
@@ -416,0 +415,0 @@ if (!context._webGLRenderer) context._initWebGLRenderer();

webgl-materials/Material.js

@@ -77,3 +77,2 @@ /**
 
-
     /* fragCoord - The fragCoord function returns the fragment's position in screenspace. */
@@ -102,3 +101,3 @@
 
-    time: {glsl: 'time;', output: 1},
+    time: {glsl: 'u_time;', output: 1},
 
@@ -183,2 +182,4 @@ /* The Add function takes two inputs, adds them together and outputs the result. This addition operation is performed on a per channel basis, meaning that the inputs' R channels get added, G channels get added, B channels get added, etc. Both inputs must have the same number of channels unless one of them is a single Constant value. Constants can be added to a vector with any number of inputs. */
 
+    this.meshes = [];
+
     if (options.texture) {
@@ -200,2 +201,4 @@ this.texture = options.texture.__isATexture__ ? options.texture : TextureRegistry.register(null, options.texture);
     this.invalidations.push(name);
+
+    for(var i = 0; i < this.meshes.length; i++) this.meshes[i]._requestUpdate();
 };
@@ -214,1 +217,14 @@
 };
+
+// Recursively iterates over a material's inputs, invoking a given callback
+// with the current material
+Material.prototype.traverse = function traverse(callback) {
+	var inputs = this.inputs;
+    var len = inputs && inputs.length;
+    var idx = -1;
+
+    while (++idx < len) inputs[idx].traverse(callback);
+
+    callback(this);
+};
+

webgl-renderables/lights/AmbientLight.js

@@ -37,3 +37,2 @@ /**
  * @constructor
- * @component
  * @augments Light
@@ -40,0 +39,0 @@ *

webgl-renderables/lights/Light.js

@@ -34,3 +34,3 @@ /**
  * @constructor
- * @component
+ * @abstract
  *
@@ -37,0 +37,0 @@ * @param {Node} node The controlling node from the corresponding Render Node

webgl-renderables/lights/PointLight.js

@@ -36,3 +36,2 @@ /**
  * @constructor
- * @component
  * @augments Light
@@ -39,0 +38,0 @@ *

webgl-renderables/Mesh.js

@@ -45,2 +45,5 @@ /**
  */
+
+var INPUTS = ['baseColor', 'normals', 'glossiness', 'positionOffset'];
+
 function Mesh (node, options) {
@@ -168,2 +171,3 @@ this._node = node;
     if (isMaterial) {
+        addMeshToMaterial(this, color, 'baseColor');
         this.value.color = null;
@@ -263,2 +267,3 @@ this.value.expressions.baseColor = color;
     if (isMaterial) {
+        addMeshToMaterial(this, materialExpression, 'normals');
         this.value.expressions.normals = materialExpression;
@@ -307,2 +312,3 @@ }
     if (isMaterial) {
+        addMeshToMaterial(this, glossiness, 'glossiness');
         this.value.glossiness = [null, null];
@@ -354,2 +360,3 @@ this.value.expressions.glossiness = glossiness;
     if (isMaterial) {
+        addMeshToMaterial(this, materialExpression, 'positionOffset');
         this.value.expressions.positionOffset = materialExpression;
@@ -418,10 +425,13 @@ uniformValue = materialExpression;
     var expression = this.value.expressions[expressionName];
+    var sender = this._node;
     if (expression) {
-        var i = expression.invalidations.length;
-        while (i--) {
-            uniformKey = expression.invalidations.pop();
-            this._node.sendDrawCommand(Commands.GL_UNIFORMS);
-            this._node.sendDrawCommand(uniformKey);
-            this._node.sendDrawCommand(expression.uniforms[uniformKey]);
-        }
+        expression.traverse(function (node) {
+            var i = node.invalidations.length;
+            while (i--) {
+                uniformKey = node.invalidations.pop();
+                sender.sendDrawCommand(Commands.GL_UNIFORMS);
+                sender.sendDrawCommand(uniformKey);
+                sender.sendDrawCommand(node.uniforms[uniformKey]);
+            }
+        });
     }
@@ -469,2 +479,4 @@ return this;
         this._pushInvalidations('positionOffset');
+        this._pushInvalidations('normals');
+        this._pushInvalidations('glossiness');
 
@@ -493,3 +505,3 @@ for (var i = 0; i < queue.length; i++) {
 
-    TransformSystem.makeBreakPointAt(node.getLocation());
+    TransformSystem.makeCalculateWorldMatrixAt(node.getLocation());
 
@@ -672,2 +684,25 @@ this.draw();
 
+
+function addMeshToMaterial(mesh, material, name) {
+    var expressions = mesh.value.expressions;
+    var previous = expressions[name];
+    var shouldRemove = true;
+    var len = material.inputs;
+
+    while(len--) 
+        addMeshToMaterial(mesh, material.inputs[len], name);
+
+    len = INPUTS.length;
+    
+    while (len--) 
+        shouldRemove |= (name !== INPUTS[len] && previous !== expressions[INPUTS[len]]);
+
+    if (shouldRemove)
+        material.meshes.splice(material.meshes.indexOf(previous), 1);
+         
+    if (material.meshes.indexOf(mesh) === -1)
+        material.meshes.push(mesh);
+}
+
 module.exports = Mesh;
+

webgl-renderables/test/Mesh.js

@@ -52,2 +52,4 @@ /**
 var materialExpression = {
+    meshes: [],
+    inputs: [],
     __isAMaterial__: true
@@ -54,0 +56,0 @@ };

webgl-renderers/compileMaterial.js

@@ -38,3 +38,2 @@ /**
  * @method
- * @protected
  *
@@ -54,3 +53,3 @@ * @param {Object} material Material to be compiled.
 
-    _traverse(material, function (node, depth) {
+    material.traverse(function (node, depth) {
         if (! node.chunk) return;
@@ -71,2 +70,3 @@
 
+    console.log(uniforms);
     return {
@@ -83,16 +83,2 @@ _id: material._id,
 
-// Recursively iterates over a material's inputs, invoking a given callback
-// with the current material
-function _traverse(material, callback) {
-	var inputs = material.inputs;
-    var len = inputs && inputs.length;
-    var idx = -1;
-
-    while (++idx < len) _traverse(inputs[idx], callback);
-
-    callback(material);
-
-    return material;
-}
-
 // Helper function used to infer length of the output
@@ -99,0 +85,0 @@ // from a given material node.

webgl-renderers/createCheckerboard.js

@@ -27,4 +27,11 @@ /**
 
-// Generates a checkerboard pattern to be used as a placeholder texture while an
-// image loads over the network.
+/**
+ * Generates a checkerboard pattern to be used as a placeholder texture while
+ * an image loads over the network.
+ *
+ * @method  createCheckerBoard
+ *
+ * @return {HTMLCanvasElement} The `canvas` element that has been used in order
+ *                             to generate the pattern.
+ */
 function createCheckerBoard() {
@@ -31,0 +38,0 @@ var context = document.createElement('canvas').getContext('2d');

webgl-renderers/Debug.js

@@ -36,3 +36,3 @@ 'use strict';
  */
-module.exports = function Debug() {
+function Debug() {
     return _augmentFunction(
@@ -48,3 +48,3 @@ this.gl.compileShader,
     );
-};
+}
 
@@ -96,1 +96,3 @@ // Takes a function, keeps the reference and replaces it by a closure that
 }
+
+module.exports = Debug;

webgl-renderers/index.js

@@ -30,6 +30,10 @@ /**
     BufferRegistry: require('./BufferRegistry'),
+    compileMaterial: require('./compileMaterial'),
     createCheckerboard: require('./createCheckerboard'),
+    Debug: require('./Debug'),
     Program: require('./Program'),
-    WebGLRenderer: require('./WebGLRenderer'),
-    Texture: require('./Texture')
+    radixSort: require('./radixSort'),
+    Texture: require('./Texture'),
+    TextureManager: require('./TextureManager'),
+    WebGLRenderer: require('./WebGLRenderer')
 };

webgl-renderers/Program.js

@@ -121,7 +121,5 @@ /**
     this.gl = gl;
-    this.textureSlots = 1;
     this.options = options || {};
 
     this.registeredMaterials = {};
-    this.flaggedUniforms = [];
     this.cachedUniforms  = {};
@@ -139,2 +137,6 @@ this.uniformTypes = [];
 
+    if (this.options.debug) {
+        this.gl.compileShader = Debug.call(this);
+    }
+
     this.resetProgram();
@@ -249,3 +251,2 @@ }
 
-    this.flaggedUniforms = [];
     this.cachedUniforms = {};
@@ -473,6 +474,2 @@
 
-    if (this.options.debug) {
-        this.gl.compileShader = Debug.call(this);
-    }
-
     this.gl.shaderSource(shader, source);
@@ -479,0 +476,0 @@ this.gl.compileShader(shader);

webgl-renderers/radixSort.js

@@ -72,3 +72,9 @@ /**
 
-//sorts a list of mesh IDs according to their z-depth
+/**
+ * Sorts an array of mesh IDs according to their z-depth.
+ *
+ * @param  {Array} list         An array of meshes.
+ * @param  {Object} registry    A registry mapping the path names to meshes.
+ * @return {Array}              An array of the meshes sorted by z-depth.
+ */
 function radixSort(list, registry) {
@@ -75,0 +81,0 @@ var pass = 0;

webgl-renderers/WebGLRenderer.js

@@ -96,3 +96,2 @@ /**
     this.textureManager = new TextureManager(gl);
-    this.texCache = {};
     this.bufferRegistry = new BufferRegistry(gl);
@@ -176,2 +175,3 @@ this.program = new Program(gl, { debug: true });
     }
+
 };
@@ -831,9 +831,12 @@
 
-    if (options.side === 'double') {
-        this.gl.cullFace(this.gl.FRONT);
-        this.drawBuffers(this.bufferRegistry.registry[mesh.geometry], mesh.drawType, mesh.geometry);
-        this.gl.cullFace(this.gl.BACK);
+    switch (options.side) {
+        case 'double':
+            this.gl.cullFace(this.gl.FRONT);
+            this.drawBuffers(this.bufferRegistry.registry[mesh.geometry], mesh.drawType, mesh.geometry);
+            this.gl.cullFace(this.gl.BACK);
+            break;
+        case 'back':
+            gl.cullFace(gl.FRONT);
+            break;
     }
-
-    if (options.side === 'back') gl.cullFace(gl.FRONT);
 };
@@ -840,0 +843,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1376229

increased by1.52%

Number of package files

266

increased by1.53%

Lines of code

36366

increased by1.04%

No dependency changes