add aframe component driver

public/aframe2/index.vwf.yaml

@@ -90,7 +90,6 @@ children:
         children:
           interpolation:
             extends: http://vwf.example.com/aframe/interpolation-component.vwf
-            type: "component"
             properties:
               enabled: true
               duration: 50

support/client/lib/vwf.js

@@ -371,12 +371,13 @@
                 { library: "vwf/model/stage/log", active: true },
 
                 { library: "vwf/model/ohm", active: true },
-
+              
                   { library: "vwf/model/aframe", 
                     linkedLibraries: [ "vwf/model/aframe/aframe-master",
                     "vwf/model/aframe/addon/aframe-interpolation" ], 
                     active: false 
                 },
+                { library: "vwf/model/aframeComponent", active: true },
 
 
                 { library: "vwf/model/kineticjs", 
@@ -422,9 +423,11 @@
 
                 { library: "vwf/view/ohm", active: true },
 
+                
                  { library: "vwf/view/aframe", active: false },
                 { library: "vwf/model/aframe/aframe-master", active: false },
                 { library: "vwf/model/aframe/addon/aframe-interpolation", active: false },
+                { library: "vwf/view/aframeComponent", active: true },
 
                 { library: "vwf/view/kineticjs", active: false },
                 { library: "vwf/view/mil-sym", active: false },
@@ -467,7 +470,9 @@
                     { library: "vwf/model/sound", active: false },
 
                      { library: "vwf/model/ohm", active: true },
+                  
                      { library: "vwf/model/aframe", active: false },
+                     { library: "vwf/model/aframeComponent", active: true },
 
                     { library: "vwf/model/kineticjs", active: false },
                     { library: "vwf/model/mil-sym", active: false },
@@ -494,7 +499,9 @@
                     { library: "vwf/view/touch", active: false },
 
                      { library: "vwf/view/ohm", active: true },
+                     
                       { library: "vwf/view/aframe", active: false },
+                      { library: "vwf/view/aframeComponent", active: true },
 
                     { library: "vwf/view/kineticjs", active: false },
                     { library: "vwf/view/mil-sym", active: false },
@@ -1200,6 +1207,21 @@
             if ( memberName ) args.push( memberName );
             if ( parameters ) args = args.concat( parameters ); // flatten
 
+            if(actionName == 'createChild')
+                {
+                    console.log("create child!");
+                    // args.push(function(childID)
+                    // {
+                    //     //when creating over the reflector, call ready on heirarchy after create.
+                    //     //nodes from setState are readied in createNode
+                    //     // vwf.decendants(childID).forEach(function(i){
+                    //     //     vwf.callMethod(i,'ready',[]);
+                    //     // });
+                    //     // vwf.callMethod(childID,'ready',[]);
+                    //     console.log("create child!");
+                    // });
+                }
+
             // Invoke the action.
 
             if ( environment( actionName, parameters ) ) {

support/client/lib/vwf/model/aframeComponent.js

@@ -0,0 +1,556 @@
+"use strict";
+
+// Copyright 2012 United States Government, as represented by the Secretary of Defense, Under
+// Secretary of Defense (Personnel & Readiness).
+// 
+// Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+// in compliance with the License. You may obtain a copy of the License at
+// 
+//   http://www.apache.org/licenses/LICENSE-2.0
+// 
+// Unless required by applicable law or agreed to in writing, software distributed under the License
+// is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+// or implied. See the License for the specific language governing permissions and limitations under
+// the License.
+
+/// vwf/model/scenejs.js is a placeholder for a 3-D scene manager.
+/// 
+/// @module vwf/model/scenejs
+/// @requires vwf/model
+
+define(["module", "vwf/model", "vwf/utility"], function (module, model, utility) {
+
+    var self;
+
+    // vwf/model/example/scene.js is a demonstration of a scene manager.
+
+    return model.load(module, {
+
+        // == Module Definition ====================================================================
+
+        // -- pipeline -----------------------------------------------------------------------------
+
+        // pipeline: [ log ], // vwf <=> log <=> scene
+
+        // -- initialize ---------------------------------------------------------------------------
+
+        initialize: function () {
+
+            self = this;
+
+            this.state = {
+                nodes: {},
+                scenes: {},
+                prototypes: {},
+                createLocalNode: function (nodeID, childID, childExtendsID, childImplementsIDs,
+                    childSource, childType, childIndex, childName, callback) {
+                    return {
+                        "parentID": nodeID,
+                        "ID": childID,
+                        "extendsID": childExtendsID,
+                        "implementsIDs": childImplementsIDs,
+                        "source": childSource,
+                        "type": childType,
+                        "name": childName,
+                        "prototypes": undefined,
+                        "aframeObj": undefined,
+                        "componentName": undefined
+
+                    };
+                },
+
+                isComponentClass: function (prototypes, classID) {
+                    if (prototypes) {
+                        for (var i = 0; i < prototypes.length; i++) {
+                            if (prototypes[i] === classID) {
+                                //console.info( "prototypes[ i ]: " + prototypes[ i ] );
+                                return true;
+                            }
+                        }
+                    }
+                    return false;
+                },
+                isComponentNode: function (prototypes) {
+                    var found = false;
+                    if (prototypes) {
+                        for (var i = 0; i < prototypes.length && !found; i++) {
+                            found = (prototypes[i] === "http://vwf.example.com/aframe/componentNode.vwf");
+                        }
+                    }
+                    return found;
+                }
+            };
+
+            this.state.kernel = this.kernel.kernel.kernel;
+
+            //this.state.kernel = this.kernel.kernel.kernel;
+
+        },
+        // == Model API ============================================================================
+
+        // -- creatingNode -------------------------------------------------------------------------
+
+        creatingNode: function (nodeID, childID, childExtendsID, childImplementsIDs,
+            childSource, childType, childIndex, childName, callback /* ( ready ) */) {
+
+            // If the parent nodeID is 0, this node is attached directly to the root and is therefore either 
+            // the scene or a prototype.  In either of those cases, save the uri of the new node
+            var childURI = (nodeID === 0 ? childIndex : undefined);
+            var appID = this.kernel.application();
+
+            // If the node being created is a prototype, construct it and add it to the array of prototypes,
+            // and then return
+            var prototypeID = utility.ifPrototypeGetId(appID, this.state.prototypes, nodeID, childID);
+            if (prototypeID !== undefined) {
+
+                this.state.prototypes[prototypeID] = {
+                    parentID: nodeID,
+                    ID: childID,
+                    extendsID: childExtendsID,
+                    implementsID: childImplementsIDs,
+                    source: childSource,
+                    type: childType,
+                    name: childName
+                };
+                return;
+            }
+
+            var protos = getPrototypes(this.kernel, childExtendsID);
+            //var kernel = this.kernel.kernel.kernel;
+            var node;
+
+            if (this.state.isComponentNode(protos)) {
+
+                // Create the local copy of the node properties
+                if (this.state.nodes[childID] === undefined) {
+                    this.state.nodes[childID] = this.state.createLocalNode(nodeID, childID, childExtendsID, childImplementsIDs,
+                        childSource, childType, childIndex, childName, callback);
+                }
+
+                node = this.state.nodes[childID];
+                node.prototypes = protos;
+
+                //node.aframeObj = createAFrameObject(node);
+                node.aframeObj = setAFrameObject(node);
+                // addNodeToHierarchy(node);
+
+                //notifyDriverOfPrototypeAndBehaviorProps();
+            }
+        },
+
+        // -- initializingNode -------------------------------------------------------------------------
+
+        //   initializingNode: function( nodeID, childID, childExtendsID, childImplementsIDs,
+        //     childSource, childType, childIndex, childName ) {
+
+        // },
+
+        // -- deletingNode -------------------------------------------------------------------------
+
+          deletingNode: function (nodeID) {
+            
+                        if (this.state.nodes[nodeID] !== undefined) {
+            
+                            var node = this.state.nodes[nodeID];
+                            if (node.aframeObj !== undefined) {
+                                // removes and destroys object
+                                node.aframeObj = undefined;
+                            }
+            
+                            delete this.state.nodes[nodeID];
+                        }
+            
+                    },
+
+        // -- initializingProperty -----------------------------------------------------------------
+
+        initializingProperty: function (nodeID, propertyName, propertyValue) {
+
+            var value = undefined;
+            var node = this.state.nodes[nodeID];
+            if (node !== undefined) {
+                value = this.settingProperty(nodeID, propertyName, propertyValue);
+            }
+            return value;
+
+        },
+
+        // -- creatingProperty ---------------------------------------------------------------------
+
+        creatingProperty: function (nodeID, propertyName, propertyValue) {
+            return this.initializingProperty(nodeID, propertyName, propertyValue);
+        },
+
+
+        // -- settingProperty ----------------------------------------------------------------------
+
+        settingProperty: function (nodeID, propertyName, propertyValue) {
+
+            var node = this.state.nodes[nodeID];
+            var value = undefined;
+
+            if (node && node.aframeObj && utility.validObject(propertyValue)) {
+
+                var aframeObject = node.aframeObj;
+
+                if (isComponentNodeDefinition(node.prototypes)) {
+
+
+                    value = propertyValue;
+                    switch (propertyName) {
+
+                        default:
+                            value = undefined;
+                            break;
+                    }
+
+                }
+
+
+                if (value === undefined && isComponentDefinition(node.prototypes)) {
+
+                    value = propertyValue;
+
+                    switch (propertyName) {
+
+
+                        case "compName":
+
+                            break;
+
+                        default:
+                            value = undefined;
+                            break;
+                    }
+                }
+
+                //isALineDefinition(node.prototypes)
+                //if (value === undefined && node.componentName == 'line') { //isALineDefinition( node.prototypes )
+
+                if (value === undefined && aframeObject.el.getAttribute(aframeObject.compName)) {
+
+                    value = propertyValue;
+
+                    //let parentNodeAF = self.state.kernel.find(node.parentID);
+
+                    // aframeObject.el.setAttribute('line', 'color')
+                    let parentNodeAF = aframeObject.el;
+
+                    switch (propertyName) {
+
+                        case "start":
+
+                            parentNodeAF.setAttribute(aframeObject.compName, { start: propertyValue });
+                            break;
+
+                        case "end":
+
+                            parentNodeAF.setAttribute(aframeObject.compName, { end: propertyValue });
+                            break;
+
+                        case "color":
+
+                            parentNodeAF.setAttribute(aframeObject.compName, 'color', propertyValue);
+                            break;
+
+                        case "opacity":
+                            parentNodeAF.setAttribute(aframeObject.compName, 'opacity', propertyValue);
+                            break;
+
+                        case "visible":
+
+                            parentNodeAF.setAttribute(aframeObject.compName, 'visible', propertyValue);
+                            break;
+
+                        default:
+                            value = undefined;
+                            break;
+                    }
+
+                }
+
+
+                if (value === undefined && aframeObject.el.getAttribute(aframeObject.compName)) {
+                    
+                                        value = propertyValue;
+                    
+
+                                        let parentNodeAF = aframeObject.el;
+
+                    switch (propertyName) {
+
+                        case "enabled":
+                        parentNodeAF.setAttribute(aframeObject.compName, 'enabled', propertyValue);
+                            break;
+
+                        case "duration":
+                        parentNodeAF.setAttribute(aframeObject.compName, 'duration', propertyValue);
+                            break;
+
+                        case "deltaPos":
+                        parentNodeAF.setAttribute(aframeObject.compName, 'deltaPos', propertyValue);
+                            break;
+
+                        case "deltaRot":
+                        parentNodeAF.setAttribute(aframeObject.compName, 'deltaRot', propertyValue);
+                            break;
+
+                        default:
+                            value = undefined;
+                            break;
+
+
+                    }
+
+                }
+
+
+
+            }
+
+            return value;
+
+        },
+
+        // -- gettingProperty ----------------------------------------------------------------------
+
+        gettingProperty: function (nodeID, propertyName, propertyValue) {
+
+            var node = this.state.nodes[nodeID];
+            var value = undefined;
+            if (node && node.aframeObj) {
+
+                var aframeObject = node.aframeObj;
+
+                if (isComponentNodeDefinition(node.prototypes)) {
+                    switch (propertyName) {
+                    }
+                }
+
+                if (value === undefined && isComponentDefinition(node.prototypes)) {
+
+                    switch (propertyName) {
+
+                        case "compName":
+
+                            break;
+                    }
+                }
+
+                // isALineDefinition( node.prototypes ) aframeObject.compName == compName
+
+                if (value === undefined && isALineDefinition(node.prototypes)) {
+                    value = propertyValue;
+
+                    // let parentNodeAF = self.state.nodes[node.parentID].aframeObj;
+                    let parentNodeAF = aframeObject.el;
+
+                    switch (propertyName) {
+
+                        case "start":
+
+                            value = AFRAME.utils.coordinates.stringify(parentNodeAF.getAttribute(aframeObject.compName).start);
+                            break;
+
+                        case "end":
+                            value = AFRAME.utils.coordinates.stringify(parentNodeAF.getAttribute(aframeObject.compName).end);
+                            break;
+
+                        case "color":
+                            value = parentNodeAF.getAttribute(aframeObject.compName).color;
+                            break;
+
+                        case "opacity":
+                            value = parentNodeAF.getAttribute(aframeObject.compName).opacity;
+                            break;
+
+                        case "visible":
+                            value = parentNodeAF.getAttribute(aframeObject.compName).visible;
+                            break;
+
+                    }
+                }
+
+
+
+                if (value === undefined && isAInterpolationDefinition(node.prototypes)) {
+                    value = propertyValue;
+
+                    // let parentNodeAF = self.state.nodes[node.parentID].aframeObj;
+                    let parentNodeAF = aframeObject.el;
+
+                    switch (propertyName) {
+
+                        case "enabled":
+                            value = parentNodeAF.getAttribute(aframeObject.compName).enabled;
+                            break;
+
+                        case "duration":
+                            value = parentNodeAF.getAttribute(aframeObject.compName).duration;
+                            break;
+
+                        case "deltaPos":
+                            value = parentNodeAF.getAttribute(aframeObject.compName).deltaPos;
+                            break;
+
+                        case "deltaRot":
+                            value = parentNodeAF.getAttribute(aframeObject.compName).deltaRot;
+                            break;
+
+                    }
+
+                }
+
+
+
+            }
+
+            if (value !== undefined) {
+                propertyValue = value;
+            }
+
+            return value;
+
+
+        }
+
+    });
+
+
+    function getPrototypes(kernel, extendsID) {
+        var prototypes = [];
+        var id = extendsID;
+
+        while (id !== undefined) {
+            prototypes.push(id);
+            id = kernel.prototype(id);
+        }
+        return prototypes;
+    }
+
+
+
+
+    function isAInterpolationDefinition(prototypes) {
+        var found = false;
+        if (prototypes) {
+            for (var i = 0; i < prototypes.length && !found; i++) {
+                found = (prototypes[i] == "http://vwf.example.com/aframe/interpolation-component.vwf");
+            }
+        }
+        return found;
+    }
+
+    function isALineDefinition(prototypes) {
+        var found = false;
+        if (prototypes) {
+            for (var i = 0; i < prototypes.length && !found; i++) {
+                found = (prototypes[i] == "http://vwf.example.com/aframe/lineComponent.vwf");
+            }
+        }
+        return found;
+    }
+
+    function isComponentNodeDefinition(prototypes) {
+        var found = false;
+        if (prototypes) {
+            for (var i = 0; i < prototypes.length && !found; i++) {
+                found = (prototypes[i] == "http://vwf.example.com/aframe/componentNode.vwf");
+            }
+        }
+        return found;
+    }
+
+    function isComponentDefinition(prototypes) {
+        var found = false;
+        if (prototypes) {
+            for (var i = 0; i < prototypes.length && !found; i++) {
+                found = (prototypes[i] == "http://vwf.example.com/aframe/aentityComponent.vwf");
+            }
+        }
+        return found;
+    }
+
+
+    function setAFrameObject(node, config) {
+        var protos = node.prototypes;
+        var aframeObj = {};
+        var sceneEl = document.querySelector('a-scene');
+
+        aframeObj.id = node.parentID;
+        aframeObj.el = sceneEl.children[node.parentID];
+        aframeObj.el = Array.from(sceneEl.querySelectorAll('*')).filter(item => {return item.id == aframeObj.id})[0];
+
+
+        if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/lineComponent.vwf")) {
+            // aframeObj.id = node.parentID;
+            // aframeObj.el = sceneEl.children[node.parentID];
+
+            if (node.name !== 'line') {
+                aframeObj.compName = node.name;
+            } else {
+                aframeObj.compName = "line";
+            }
+            //aframeObj.el.setAttribute(node.type, {});
+            aframeObj.el.setAttribute(aframeObj.compName, {});
+
+        }
+
+        if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/interpolation-component.vwf")) {
+           
+
+               // aframeObj.el.setAttribute(node.type, {});
+            aframeObj.compName = "interpolation";
+            aframeObj.el.setAttribute(aframeObj.compName, {});
+
+        }
+
+
+        return aframeObj;
+    }
+
+
+    // function addNodeToHierarchy(node) {
+
+
+    //                 if (self.state.nodes[node.parentID] !== undefined) {
+    //                     var parent = self.state.nodes[node.parentID];
+
+
+    //                         if (parent.children === undefined) {
+    //                             parent.children = [];
+    //                         }
+    //                         parent.children.push(node.ID);
+    //                         console.info( "Adding child: " + node.ID );
+
+
+    //                 }
+
+
+    //         }
+
+
+    function addNodeToHierarchy(node) {
+
+        if (node.aframeObj) {
+            if (self.state.nodes[node.parentID] !== undefined) {
+                var parent = self.state.nodes[node.parentID];
+                if (parent.aframeObj) {
+
+                    if (parent.children === undefined) {
+                        parent.children = [];
+                    }
+                    parent.children.push(node.ID);
+                    //console.info( "Adding child: " + childID + " to " + nodeID );
+                    //node.aframeObj.setAttribute(node.componentName, {});
+                    console.info("Adding child: " + node.ID);
+                    //parent.aframeObj.appendChild(node.aframeObj);
+                }
+            }
+
+
+        }
+
+    }
+
+});

support/client/lib/vwf/view/aframe.js

@@ -21,7 +21,7 @@
 /// @module vwf/view/aframe
 /// @requires vwf/view
 
-define(["module", "vwf/view", "jquery", "jquery-ui"], function (module, view, $) {
+define(["module", "vwf/view"], function (module, view) {
     var self;
 
     return view.load(module, {
@@ -61,13 +61,20 @@ define(["module", "vwf/view", "jquery", "jquery-ui"], function (module, view, $)
 
                 document.body.append(scene);
                 createAvatarControl(scene);
-                createAvatar(childID);
+                createAvatar.call(this, childID);
                // this.state.appInitialized  = true;
             }
 
-            if(this.state.nodes[childID] && this.state.nodes[childID].aframeObj.object3D instanceof THREE.Object3D) {
-                this.nodes[childID] = {id:childID,extends:childExtendsID};
-            }
+            if (this.state.nodes[childID] && this.state.nodes[childID].aframeObj) {
+                    this.nodes[childID] = {id:childID,extends:childExtendsID};
+                }
+
+            // if(this.state.nodes[childID]) {
+            //     this.nodes[childID] = {id:childID,extends:childExtendsID};
+            // } 
+            // else if (this.state.nodes[childID] && this.state.nodes[childID].aframeObj.object3D instanceof THREE.Object3D) {
+            //     this.nodes[childID] = {id:childID,extends:childExtendsID};
+            // }
 
         },
 
@@ -79,6 +86,9 @@ define(["module", "vwf/view", "jquery", "jquery-ui"], function (module, view, $)
                 return;
             }
 
+
+          
+
         },
 
         createdProperty: function (nodeId, propertyName, propertyValue) {
@@ -118,6 +128,29 @@ define(["module", "vwf/view", "jquery", "jquery-ui"], function (module, view, $)
 
             var avatarName = 'avatar-' + self.kernel.moniker();
 
+            if (eventName == "createAvatar") {
+                console.log("!!!!");
+
+                let avatarID = self.kernel.moniker();
+                var nodeName = 'avatar-' + avatarID;
+        
+                var newNode = {
+                    "id": avatarName,
+                    "uri": avatarName,
+                    "extends": "http://vwf.example.com/aframe/avatar.vwf",
+                    "properties":{}
+                }
+                
+               
+                if (!self.state.nodes[avatarName]) {
+
+                this.kernel.createChild(nodeID, avatarName, newNode, undefined, undefined);
+                this.kernel.addChild(nodeID, avatarName, avatarName);
+                this.kernel.callMethod(avatarName, "createAvatarBody");
+                }
+
+            }
+
             if (eventName == "setAvatarRotation") {
                 vwf_view.kernel.setProperty(avatarName, "rotation", [eventParameters.x, eventParameters.y, eventParameters.z]);
             }
@@ -167,7 +200,12 @@ define(["module", "vwf/view", "jquery", "jquery-ui"], function (module, view, $)
 
         let cursorEl = document.createElement('a-cursor');
         cursorEl.setAttribute('id', 'cursor-'+avatarName);
-        cursorEl.setAttribute('raycaster', {objects: '.intersectable'});
+        cursorEl.setAttribute('raycaster', {});
+        cursorEl.setAttribute('raycaster', 'objects', '.intersectable');
+        cursorEl.setAttribute('raycaster', 'showLine', false);
+
+       // cursorEl.setAttribute('raycaster', {objects: '.intersectable', showLine: true, far: 100});
+       // cursorEl.setAttribute('raycaster', 'showLine', true);
         controlEl.appendChild(cursorEl);
 
         
@@ -190,17 +228,20 @@ define(["module", "vwf/view", "jquery", "jquery-ui"], function (module, view, $)
 
     function createAvatar(nodeID) {
 
-        let avatarID = self.kernel.moniker();
-        var nodeName = 'avatar-' + avatarID;
+        vwf_view.kernel.fireEvent(nodeID, "createAvatar")
 
-        var newNode = {
-            "id": nodeName,
-            "uri": nodeName,
-            "extends": "http://vwf.example.com/aframe/avatar.vwf"
-        }
+        // let avatarID = self.kernel.moniker();
+        // var nodeName = 'avatar-' + avatarID;
+
+        // var newNode = {
+        //     "id": nodeName,
+        //     "uri": nodeName,
+        //     "extends": "http://vwf.example.com/aframe/avatar.vwf"
+        // }
         
-        vwf_view.kernel.createChild(nodeID, nodeName, newNode);
-        vwf_view.kernel.callMethod(nodeName, "createAvatarBody");
+       
+        // vwf_view.kernel.createChild(nodeID, nodeName, newNode);
+        // vwf_view.kernel.callMethod(nodeName, "createAvatarBody");
     }
 
     

support/client/lib/vwf/view/aframeComponent.js

@@ -0,0 +1,124 @@
+"use strict";
+
+// VWF & A-Frame view driver
+// Copyright 2017 Krestianstvo.org project
+// 
+// Copyright 2012 United States Government, as represented by the Secretary of Defense, Under
+// Secretary of Defense (Personnel & Readiness).
+// 
+// Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+// in compliance with the License. You may obtain a copy of the License at
+// 
+//   http://www.apache.org/licenses/LICENSE-2.0
+// 
+// Unless required by applicable law or agreed to in writing, software distributed under the License
+// is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+// or implied. See the License for the specific language governing permissions and limitations under
+// the License.
+
+/// vwf/view/lesson creates a view interface for instruction text. 
+/// 
+/// @module vwf/view/aframe
+/// @requires vwf/view
+
+define(["module", "vwf/view"], function (module, view) {
+
+    return view.load(module, {
+
+        // == Module Definition ====================================================================
+
+        initialize: function (options) {
+            var self = this;
+            this.nodes = {};
+
+            this.state.appInitialized = false;
+            
+                        if (typeof options == "object") {
+            
+                            this.rootSelector = options["application-root"];
+                        }
+                        else {
+                            this.rootSelector = options;
+                        }
+         
+        },
+
+        // initializedNode: function( nodeID, childID ) {
+        // },
+
+        createdNode: function (nodeID, childID, childExtendsID, childImplementsIDs,
+            childSource, childType, childIndex, childName, callback /* ( ready ) */) {
+
+            var node = this.state.nodes[childID];
+
+            // If the "nodes" object does not have this object in it, it must not be one that
+            // this driver cares about
+            if (!node) {
+                return;
+            }
+
+
+            if(this.state.nodes[childID]) {
+                this.nodes[childID] = {id:childID,extends:childExtendsID};
+            } 
+            else if (this.state.nodes[childID] && this.state.nodes[childID].aframeObj) {
+                this.nodes[childID] = {id:childID,extends:childExtendsID};
+            }
+          
+        },
+
+        initializedNode: function( nodeID, childID ) {
+            
+                        var node = this.state.nodes[childID];
+
+                        if (!node) {
+                            return;
+                        }
+                    },
+
+        createdProperty: function (nodeId, propertyName, propertyValue) {
+            return this.satProperty(nodeId, propertyName, propertyValue);
+        },
+
+        initializedProperty: function (nodeId, propertyName, propertyValue) {
+            return this.satProperty(nodeId, propertyName, propertyValue);
+        },
+
+
+
+        satProperty: function (nodeId, propertyName, propertyValue) {
+           
+            var node = this.state.nodes[ nodeId ];
+            
+                        if ( !( node && node.aframeObj ) ) {
+                            return;
+                        }
+
+
+
+            switch (propertyName) {
+                case "color":
+                    if (propertyValue) {
+                       // self.kernel.callMethod (nodeId, 'initLang');
+                       console.log("sat color "+ propertyValue)
+                    }
+                    break;
+            }
+
+        },
+
+        // firedEvent: function (nodeID, eventName, eventParameters) {
+        // },
+
+
+        ticked: function (vwfTime) {
+
+            
+
+        }
+
+    });
+
+   
+
+});

support/client/lib/vwf/view/editor-new.js

@@ -156,7 +156,22 @@ define([
                                               controlEl.setAttribute('camera', 'active', true);
                                           }
   
-                                      }
+                                      },
+                                      {
+                                        $cell: true,
+                                        $type: "button",
+                                        class: "mdc-button mdc-button--raised",
+                                        $text: "Hide cursor",
+                                        onclick: function (e) {
+                                            //document.querySelector('#' + 'viewSettings').style.visibility = 'hidden';
+                                            let cursorID = 'myCursor-avatar-' + self.kernel.moniker();
+                                            let controlEl = document.querySelector("[id='"+cursorID+"']");
+                                            let vis = controlEl.getAttribute('visible');
+                                            this.$text = vis ? 'Show cursor': 'Hide cursor';
+                                            controlEl.setAttribute('visible', !vis);
+                                        }
+
+                                    }
   
                                   ]
                               }
@@ -191,7 +206,7 @@ define([
                                         }
 
                                     }
-
+                                    
                                 ]
                             }
                         ]

support/proxy/vwf.example.com/aframe/aentity.vwf.yaml

@@ -15,4 +15,5 @@ properties:
   src:
   repeat:
   fog:
-  displayName:
+  displayName:
+  visible:

support/proxy/vwf.example.com/aframe/aentityComponent.vwf.yaml

@@ -1,3 +1,4 @@
 --- 
-extends: http://vwf.example.com/node.vwf
+extends: http://vwf.example.com/aframe/componentNode.vwf
+type: "component"
 properties:

support/proxy/vwf.example.com/aframe/avatar.vwf.yaml

@@ -13,7 +13,8 @@ methods:
                 "extends": "http://vwf.example.com/aframe/abox.vwf",
                 "properties": {
                     "color": myColor,
-                    "position": [0,0,0.5]
+                    "position": [0,0,0.5],
+                    "height": 2
                 },
               "children": {
                 "avatarNameNode": {
@@ -36,19 +37,21 @@ methods:
               //}
 
               let cursorVis = 
-              {
-                     "extends": "http://vwf.example.com/aframe/abox.vwf",
-                     "properties": {
-                        "color": myColor,
-                        "opacity": 0.3,
-                        "transparent": true,
-                        "depth": 3,
-                        "width": 0.02,
-                        "height": 0.02,
-                        "rotation": [0, 180, 0],
-                        "position": [0, 0, -2]
-                     }
-
+              {            
+                   "id": 'myCursor-' + this.id, 
+                   "extends": "http://vwf.example.com/aframe/aentity.vwf",
+                    "properties": {},
+                    "children": {
+                        "line": {
+                            "extends": "http://vwf.example.com/aframe/lineComponent.vwf",
+                            "type": "component",
+                            "properties": {
+                                "start": "0 0 -1",
+                                "end": "0 0 -3",
+                                "color": myColor
+                            }
+                    }
+                }
               }
 
               let camera = 
@@ -64,7 +67,6 @@ methods:
 
             let interpolation =
              {
-                "id": 'interpolation-' + this.id,
                  "extends": "http://vwf.example.com/aframe/interpolation-component.vwf",
                  "type": "component",
                  "properties": {
@@ -75,11 +77,17 @@ methods:
                     }
              }
 
-              //this.interpolation = "50ms";
+             
             this.children.create( "interpolation", interpolation );
-              this.children.create( "avatarBody", newNode );
-              this.children.create( "avatarCursor", cursorVis );
-              this.children.create( "avatarCamera", camera );
+            this.children.create( "avatarBody", newNode );
+            this.children.create( "avatarCursor", cursorVis );
+            this.children.create( "avatarCamera", camera );
+             
+            //this.interpolation = "50ms";
+              //vwf_view.kernel.createChild(this.id, "avatarCursor", cursorVis);
+
+              
+              
     getRandomColor:
         body: |
           var letters = '0123456789ABCDEF';

support/proxy/vwf.example.com/aframe/componentNode.vwf.yaml

@@ -0,0 +1,3 @@
+--- 
+extends: http://vwf.example.com/node.vwf
+properties:

support/proxy/vwf.example.com/aframe/lineComponent.vwf.yaml

@@ -0,0 +1,10 @@
+#https://aframe.io/docs/0.6.0/components/line.html#properties_visible
+---
+extends: http://vwf.example.com/aframe/aentityComponent.vwf
+type: "component"
+properties:
+  start:
+  end:
+  color:
+  opacity:
+  visible: