Xeolabs SceneJS → V0.7.7

Support the firing of events up the scene graph at render time, as shown below.

Basic Case

SceneJS has a two-pass event handling model: on the first traversal, "alpha/bravo/charlie" will fire "hello". Then on the second traversal, "alpha" will discover the event and report it. This gives "alpha" the opportunity to react to the previous traversal's events within its subgraph before the subgraph is re-rendered.

SceneJS.node({
        sid: "alpha",
        listeners: {
            "hello" : function(event) {
                alert("Node " + this.getSID() + " received event 'hello' from " + event.uri + " with param favColour: '" + event.params.favColour + "'"):
           }
        }
    },
    SceneJS.node({ sid: "bravo" },
        SceneJS.node({ 
                sid: "charlie",
                listeners: {
                     "rendering": function() {
                         this.fireEvent("hello", { favColour: "green" }); // no params
                     }
                }
            })));

Events across Instance-Symbol Links

Event management tracks the dynamic trail of node visits during traversal and guarantees that events bubble up that trail, no matter how many dynamic and recursive instancing links it traverses through. For example:

/* First symbol
*/
SceneJS.symbol({ sid: "bravo" },
    SceneJS.node({ 
            sid: "charlie",
            listeners: {
                 "rendering": function() {
                     this.fireEvent("hello", { favColour: "green" }); // no params
                 }
            }
        })),

/* Second symbol, instances the first symbol
 */
SceneJS.symbol({
        sid: "bravo2"        
    }, 
    SceneJS.instance({
            uri: "bravo"
        }));
   
/*  Event handler, instances the second symbol
 */     
SceneJS.node({
        sid: "alpha",
        listeners: {
            "hello" : function(event) {
                alert("Node " + this.getSID() + " received event 'hello' from " + event.uri + " with param favColour: '" + event.params.favColour + "'"):
           }
        }
    },
    SceneJS.instance({
        uri: "bravo2"
    }
);