Xeolabs SceneJS → V0.7.7

When pick events are handled within multiply-instanced Symbols, where the event originates within the subnodes of the Instances, the Symbol can get confused about which Instance the event originated from.

On the render pass directly following the pick pass, the observer within the Symbol's subgraph has the picked event, which it actions on immediately. Trouble is, the event may be from another subsequently-rendered instance, not the one being currently rendered. For example, if the second teapot in the example below is clicked, the "teapot-controller" will queue a pick event, which it will process the first time it is instanced for the for the first teapot.

SceneJS.symbol({

    sid: "teapot-controller" },

        SceneJS.withConfigs({
            listeners: {
                "picked":{
                    fn : function(params) {

                        /*
                         * When "teapot" is picked, we'll push a new baseColor down
                         * into its "teapot-color" Material node
                         */
                        // alert(this.getSID() + " handling 'picked' event from " + params.uri);
                        if (params.uri.match("^teapot") == "teapot") {

                            this.setConfigs({
                                "#teapot" : {
                                    "#teapot-color": {
                                        baseColor: {r: Math.random(), g:Math.random(), b: Math.random() }
                                    }
                                }
                            });
                            this.setOnce(true);
                        }
                    }
                }
            }

        }
                )),

        SceneJS.instance({ uri: "teapot-controller" },
                SceneJS.node({ sid: "teapot" },
                        SceneJS.translate({ x: -7 },
                                SceneJS.material({
                                    sid: "teapot-color",
                                    baseColor:      { r: 0.3, g: 0.3, b: 0.9 },
                                    specularColor:  { r: 0.9, g: 0.9, b: 0.9 },
                                    specular:       0.9,
                                    shine:          6.0
                                },
                                        SceneJS.objects.teapot())))),

        SceneJS.instance({ uri: "teapot-controller" },
                SceneJS.node({ sid: "teapot" },
                        SceneJS.translate({ x: 0 },
                                SceneJS.material({
                                    sid: "teapot-color",
                                    baseColor:      { r: 0.3, g: 0.3, b: 0.9 },
                                    specularColor:  { r: 0.9, g: 0.9, b: 0.9 },
                                    specular:       0.9,
                                    shine:          6.0
                                },
                                        SceneJS.objects.teapot())))),

        SceneJS.instance({ uri: "teapot-controller" },
                SceneJS.node({ sid: "teapot" },
                        SceneJS.translate({ x: 7 },
                                SceneJS.material({
                                    sid: "teapot-color",
                                    baseColor:      { r: 0.3, g: 0.3, b: 0.9 },
                                    specularColor:  { r: 0.9, g: 0.9, b: 0.9 },
                                    specular:       0.9,
                                    shine:          6.0
                                },
                                        SceneJS.objects.teapot()))))