work on editor, fix examples

public/aframe2/index.vwf.yaml

@@ -51,15 +51,34 @@ children:
       height: 1
       width: 1
       clickable: true
+    children:
+      raycaster-listener:
+        extends: http://vwf.example.com/aframe/app-raycaster-listener-component.vwf
+        type: "component"
+      cursor-listener:
+        extends: http://vwf.example.com/aframe/app-cursor-listener-component.vwf
+        type: "component"
     events:
       clickEvent:
+      intersectEvent:
+      clearIntersectEvent:
     methods:
       clickEventMethod:
         body: |
           if (this.clickable) {
           let genColor = this.generateColor();
           this.color = genColor 
-          }
+            }
+      intersectEventMethod:
+        body: |
+          if (this.clickable) {
+          this.rotation = "0 -90 0"
+            }
+      clearIntersectEventMethod:
+        body: |
+          if (this.clickable) {
+          this.rotation = "0 -30 0"
+            }
       generateColor:
         body: |
           var letters = '0123456789ABCDEF';
@@ -72,6 +91,12 @@ children:
         this.clickEvent = function(){
           this.clickEventMethod();
          }
+         this.intersectEvent = function(){
+          this.intersectEventMethod();
+         }
+         this.clearIntersectEvent = function(){
+          this.clearIntersectEventMethod();
+         }
   sphere:
     extends: http://vwf.example.com/aframe/asphere.vwf
     properties:

public/ohmlang-calc/index.vwf.config.yaml

@@ -5,4 +5,4 @@ model:
   vwf/model/aframe:
 view:
   vwf/view/aframe:
-  vwf/view/editor-live:
+  vwf/view/editor-new:

public/ohmlang-calc/index.vwf.yaml

@@ -27,12 +27,15 @@ children:
       color: "#1d7027"
       position: [1, 2.5, -2]
       scale: [3, 3, 3]
+      side: "double"
     methods:
       calcMe:
         body: |
           let match = this.parent.calcText.calcLang.grammar.match(this.parent.calcText.value);
           if (match.succeeded()){
+            if (typeof this.parent.calcText.calcLang.semantics === 'function'){
           this.value = this.parent.calcText.calcLang.semantics(match).interpret()}
+          }
           this.future( 0.1 ).calcMe();
   calcText:
     extends: http://vwf.example.com/aframe/atext.vwf
@@ -41,6 +44,7 @@ children:
       color: "#b74217"
       position: [-1, 2.5, -2]
       scale: [2, 2, 2]
+      side: "double"
     children:
       calcLang:
         extends: http://vwf.example.com/ohm/node.vwf

public/ohmlang-lsys/index.vwf.config.yaml

@@ -5,4 +5,4 @@ model:
   vwf/model/aframe:
 view:
   vwf/view/aframe:
-  vwf/view/editor-live:
+  vwf/view/editor-new:

public/ohmlang-lsys/index.vwf.yaml

@@ -32,27 +32,19 @@ methods:
   makeMe:
       parameters:
             - childName
-            - position
+            - startPosition
+            - endPosition
       body: |
-              var pos = position;
-              if (typeof position === 'string' ){
-                pos = JSON.parse(position);}
               let nodeId = this.turtleDraw.id;
               var childComponent = {
-                "id": childName,
-                "uri": childName,
-                "extends": "http://vwf.example.com/aframe/abox.vwf",
-                "properties": {
-                    "height": "0.2",
-                    "width": "0.2",
-                    "depth": "0.2",
-                    "color": "green",
-                    "position": [pos[0], pos[1], pos[2]]
-                },
-                "methods": {
-                },
-                "scripts": []
-                };
+                                "extends": "http://vwf.example.com/aframe/lineComponent.vwf",
+                                "type": "component",
+                                "properties": {
+                                    "start": startPosition,
+                                    "end": endPosition,
+                                    "color": "green"
+                                }
+                            }
                 vwf_view.kernel.createChild(nodeId, childName, childComponent);
   parseLSys: |
     var str = this.rule;
@@ -173,6 +165,7 @@ children:
       radius: 1
       wireframe: true
       angleInRadians: 0
+      counter: 1
     methods:
       turn:
          parameters:
@@ -185,12 +178,15 @@ children:
         parameters:
           - step
         body: |
-          var x0 = this.position[0];
-          var y0 = this.position[1];
+          let pos = AFRAME.utils.coordinates.parse(this.position);
+          var x0 = pos.x;
+          var y0 = pos.y;
           var xx = Math.sin(this.angleInRadians);
           var yy = Math.cos(this.angleInRadians);
-          this.position = [x0 + step * xx, y0 + step * yy, this.position[2]];
-          this.parent.makeMe('draw-' + this.random(), this.position);
+          let endPosition = AFRAME.utils.coordinates.stringify({x: x0 + step * xx, y: y0 + step * yy, z: pos.z});
+          this.counter = this.counter + 1;
+          this.parent.makeMe('line__' + this.counter, this.position, endPosition);
+          this.position = endPosition;
   sky:
     extends: http://vwf.example.com/aframe/asky.vwf
     properties:

support/client/lib/vwf/model/aframe/addon/monument-app.js

@@ -1,6 +1,75 @@
 if (typeof AFRAME === 'undefined') {
     throw new Error('Component attempted to register before AFRAME was available.');
 }
+
+AFRAME.registerComponent('cursor-listener', {
+    init: function () {
+        this.el.addEventListener('click', function (evt) {
+            console.log('I was clicked at: ', evt.detail.intersection.point);
+            let cursorID = 'cursor-avatar-'+ vwf_view.kernel.moniker();
+            if (evt.detail.cursorEl.id.includes(vwf_view.kernel.moniker())) {
+                 vwf_view.kernel.fireEvent(evt.detail.target.id, "clickEvent")
+            }
+            
+            //vwf_view.kernel.fireEvent(evt.detail.target.id, "clickEvent")
+      });
+    }
+  });
+
+AFRAME.registerComponent('raycaster-listener', {
+    init: function () {
+
+        let self = this;
+        this.intersected = false;
+        this.casters = {}
+
+      this.el.addEventListener('raycaster-intersected', function (evt) {
+
+        if (evt.detail.el.nodeName == 'A-CURSOR') {
+            //console.log('CURSOR was intersected at: ', evt.detail.intersection.point);
+
+        } else {
+            if (self.intersected) { 
+                
+
+            } else {
+                console.log('I was intersected at: ', evt.detail.intersection.point);
+                vwf_view.kernel.fireEvent(evt.detail.target.id, "intersectEvent")
+            }
+          
+            self.casters[evt.detail.el.id] = evt.detail.el;
+            self.intersected = true;
+        }
+        
+      });
+
+      this.el.addEventListener('raycaster-intersected-cleared', function (evt) {
+
+
+        if (evt.detail.el.nodeName == 'A-CURSOR') {
+            //console.log('CURSOR was intersected at: ', evt.detail.intersection.point);
+
+        } else {
+            if (self.intersected) { 
+                console.log('Clear intersection');
+                if (Object.entries(self.casters).length == 1 && (self.casters[evt.detail.el.id] !== undefined))
+                {
+                    vwf_view.kernel.fireEvent(evt.detail.target.id, "clearIntersectEvent")
+            }
+                delete self.casters[evt.detail.el.id]
+            } else {}
+        
+            self.intersected = false;
+        }
+
+        
+
+      });
+
+
+    }
+  });
+
 AFRAME.registerComponent('envmap', {
 
     /**

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

@@ -147,20 +147,20 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
         // -- 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];
-                        }
-            
-                    },
+        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 -----------------------------------------------------------------
 
@@ -224,80 +224,96 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                     }
                 }
 
+
+                if (value === undefined && isARayCasterDefinition(node.prototypes)) {
+                    if (aframeObject.el.getAttribute(aframeObject.compName)) {
+
+                        value = propertyValue;
+                        let parentNodeAF = aframeObject.el;
+                        let defs = ['direction', 'far', 'interval', 'near', 'objects', 'origin', 'recursive', 'showLine', 'useWorldCoordinates'];
+
+                        defs.forEach(element => {
+                            element == propertyName ? parentNodeAF.setAttribute('raycaster', element, propertyValue) :
+                                value = undefined;
+                        })
+                    }
+                }
+
+
                 //isALineDefinition(node.prototypes)
                 //if (value === undefined && node.componentName == 'line') { //isALineDefinition( node.prototypes )
+                if (node.extendsID == "http://vwf.example.com/aframe/lineComponent.vwf") {
+                    if (value === undefined && aframeObject.el.getAttribute(aframeObject.compName)) {
 
-                if (value === undefined && aframeObject.el.getAttribute(aframeObject.compName)) {
+                        value = propertyValue;
 
-                    value = propertyValue;
+                        //let parentNodeAF = self.state.kernel.find(node.parentID);
 
-                    //let parentNodeAF = self.state.kernel.find(node.parentID);
+                        // aframeObject.el.setAttribute('line', 'color')
+                        let parentNodeAF = aframeObject.el;
 
-                    // aframeObject.el.setAttribute('line', 'color')
-                    let parentNodeAF = aframeObject.el;
+                        switch (propertyName) {
 
-                    switch (propertyName) {
+                            case "start":
 
-                        case "start":
+                                parentNodeAF.setAttribute(aframeObject.compName, { start: propertyValue });
+                                break;
 
-                            parentNodeAF.setAttribute(aframeObject.compName, { start: propertyValue });
-                            break;
+                            case "end":
 
-                        case "end":
+                                parentNodeAF.setAttribute(aframeObject.compName, { end: propertyValue });
+                                break;
 
-                            parentNodeAF.setAttribute(aframeObject.compName, { end: propertyValue });
-                            break;
+                            case "color":
 
-                        case "color":
+                                parentNodeAF.setAttribute(aframeObject.compName, 'color', propertyValue);
+                                break;
 
-                            parentNodeAF.setAttribute(aframeObject.compName, 'color', propertyValue);
-                            break;
+                            case "opacity":
+                                parentNodeAF.setAttribute(aframeObject.compName, 'opacity', propertyValue);
+                                break;
 
-                        case "opacity":
-                            parentNodeAF.setAttribute(aframeObject.compName, 'opacity', propertyValue);
-                            break;
+                            case "visible":
 
-                        case "visible":
+                                parentNodeAF.setAttribute(aframeObject.compName, 'visible', propertyValue);
+                                break;
 
-                            parentNodeAF.setAttribute(aframeObject.compName, 'visible', propertyValue);
-                            break;
+                            default:
+                                value = undefined;
+                                break;
+                        }
 
-                        default:
-                            value = undefined;
-                            break;
                     }
-
                 }
 
-
                 if (value === undefined && aframeObject.el.getAttribute(aframeObject.compName)) {
-                    
-                                        value = propertyValue;
-                    
 
-                                        let parentNodeAF = aframeObject.el;
+                    value = propertyValue;
+
+
+                    let parentNodeAF = aframeObject.el;
 
                     switch (propertyName) {
 
                         case "clip":
-                        parentNodeAF.setAttribute(aframeObject.compName, 'clip', propertyValue);
+                            parentNodeAF.setAttribute(aframeObject.compName, 'clip', propertyValue);
                             break;
 
                         case "duration":
-                        parentNodeAF.setAttribute(aframeObject.compName, 'duration', propertyValue);
+                            parentNodeAF.setAttribute(aframeObject.compName, 'duration', propertyValue);
                             break;
 
                         case "crossFadeDuration":
-                        parentNodeAF.setAttribute(aframeObject.compName, 'crossFadeDuration', propertyValue);
+                            parentNodeAF.setAttribute(aframeObject.compName, 'crossFadeDuration', propertyValue);
                             break;
 
                         case "loop":
-                        parentNodeAF.setAttribute(aframeObject.compName, 'loop', propertyValue);
+                            parentNodeAF.setAttribute(aframeObject.compName, 'loop', propertyValue);
                             break;
 
-                            case "repetitions":
+                        case "repetitions":
                             parentNodeAF.setAttribute(aframeObject.compName, 'repetitions', propertyValue);
-                                break;
+                            break;
 
                         default:
                             value = undefined;
@@ -310,28 +326,28 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
 
                 if (value === undefined && aframeObject.el.getAttribute(aframeObject.compName)) {
-                    
-                                        value = propertyValue;
-                    
 
-                                        let parentNodeAF = aframeObject.el;
+                    value = propertyValue;
+
+
+                    let parentNodeAF = aframeObject.el;
 
                     switch (propertyName) {
 
                         case "enabled":
-                        parentNodeAF.setAttribute(aframeObject.compName, 'enabled', propertyValue);
+                            parentNodeAF.setAttribute(aframeObject.compName, 'enabled', propertyValue);
                             break;
 
                         case "duration":
-                        parentNodeAF.setAttribute(aframeObject.compName, 'duration', propertyValue);
+                            parentNodeAF.setAttribute(aframeObject.compName, 'duration', propertyValue);
                             break;
 
                         case "deltaPos":
-                        parentNodeAF.setAttribute(aframeObject.compName, 'deltaPos', propertyValue);
+                            parentNodeAF.setAttribute(aframeObject.compName, 'deltaPos', propertyValue);
                             break;
 
                         case "deltaRot":
-                        parentNodeAF.setAttribute(aframeObject.compName, 'deltaRot', propertyValue);
+                            parentNodeAF.setAttribute(aframeObject.compName, 'deltaRot', propertyValue);
                             break;
 
                         default:
@@ -345,56 +361,56 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
 
                 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 "armModel":
-                    
-                                                parentNodeAF.setAttribute(aframeObject.compName, { armModel: propertyValue });
-                                                break;
-                    
-                                            case "buttonColor":
-                    
-                                                parentNodeAF.setAttribute(aframeObject.compName, { buttonColor: propertyValue });
-                                                break;
-                    
-                                            case "buttonTouchedColor":
-                    
-                                                parentNodeAF.setAttribute(aframeObject.compName, 'buttonTouchedColor', propertyValue);
-                                                break;
-                    
-                                            case "buttonHighlightColor":
-                                                parentNodeAF.setAttribute(aframeObject.compName, 'buttonHighlightColor', propertyValue);
-                                                break;
-                    
-                                            case "hand":
-                    
-                                                parentNodeAF.setAttribute(aframeObject.compName, 'hand', propertyValue);
-                                                break;
-                    
-                                            case "model":
-
-                                                parentNodeAF.setAttribute(aframeObject.compName, 'model', propertyValue);
-                                                break;
-
-                                            case "rotationOffset":
-
-                                                parentNodeAF.setAttribute(aframeObject.compName, 'rotationOffset', propertyValue);
-                                                break;
-
-                                            default:
-                                                value = undefined;
-                                                break;
-                                        }
-                    
-                                    }
+
+                    value = propertyValue;
+
+                    //let parentNodeAF = self.state.kernel.find(node.parentID);
+
+                    // aframeObject.el.setAttribute('line', 'color')
+                    let parentNodeAF = aframeObject.el;
+
+                    switch (propertyName) {
+
+                        case "armModel":
+
+                            parentNodeAF.setAttribute(aframeObject.compName, { armModel: propertyValue });
+                            break;
+
+                        case "buttonColor":
+
+                            parentNodeAF.setAttribute(aframeObject.compName, { buttonColor: propertyValue });
+                            break;
+
+                        case "buttonTouchedColor":
+
+                            parentNodeAF.setAttribute(aframeObject.compName, 'buttonTouchedColor', propertyValue);
+                            break;
+
+                        case "buttonHighlightColor":
+                            parentNodeAF.setAttribute(aframeObject.compName, 'buttonHighlightColor', propertyValue);
+                            break;
+
+                        case "hand":
+
+                            parentNodeAF.setAttribute(aframeObject.compName, 'hand', propertyValue);
+                            break;
+
+                        case "model":
+
+                            parentNodeAF.setAttribute(aframeObject.compName, 'model', propertyValue);
+                            break;
+
+                        case "rotationOffset":
+
+                            parentNodeAF.setAttribute(aframeObject.compName, 'rotationOffset', propertyValue);
+                            break;
+
+                        default:
+                            value = undefined;
+                            break;
+                    }
+
+                }
 
 
 
@@ -432,6 +448,23 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
                 // isALineDefinition( node.prototypes ) aframeObject.compName == compName
 
+
+
+                if (value === undefined && isARayCasterDefinition(node.prototypes)) {
+                    value = propertyValue;
+
+                    let parentNodeAF = aframeObject.el;
+                    let defs = ['direction', 'far', 'interval', 'near', 'objects', 'origin', 'recursive', 'showLine', 'useWorldCoordinates'];
+
+                    defs.forEach(element => {
+                        if (element == propertyName) {
+                            let val = parentNodeAF.getAttribute('raycaster').element;
+                            value = AFRAME.utils.coordinates.isCoordinates(val) ? AFRAME.utils.coordinates.stringify(val) : val
+                        }
+                    })
+                }
+
+
                 if (value === undefined && isALineDefinition(node.prototypes)) {
                     value = propertyValue;
 
@@ -489,7 +522,7 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                             value = parentNodeAF.getAttribute(aframeObject.compName).loop;
                             break;
 
-                            case "repetitions":
+                        case "repetitions":
                             value = parentNodeAF.getAttribute(aframeObject.compName).repetitions;
                             break;
 
@@ -556,11 +589,11 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                             value = parentNodeAF.getAttribute(aframeObject.compName).hand;
                             break;
 
-                            case "model":
+                        case "model":
                             value = parentNodeAF.getAttribute(aframeObject.compName).model;
                             break;
-                    
-                            case "rotationOffset":
+
+                        case "rotationOffset":
                             value = parentNodeAF.getAttribute(aframeObject.compName).rotationOffset;
                             break;
 
@@ -616,6 +649,18 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
         return found;
     }
 
+
+
+    function isARayCasterDefinition(prototypes) {
+        var found = false;
+        if (prototypes) {
+            for (var i = 0; i < prototypes.length && !found; i++) {
+                found = (prototypes[i] == "http://vwf.example.com/aframe/raycasterComponent.vwf");
+            }
+        }
+        return found;
+    }
+
     function isALineDefinition(prototypes) {
         var found = false;
         if (prototypes) {
@@ -664,7 +709,7 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
         aframeObj.id = node.parentID;
         aframeObj.el = sceneEl.children[node.parentID];
-        aframeObj.el = Array.from(sceneEl.querySelectorAll('*')).filter(item => {return item.id == aframeObj.id})[0];
+        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")) {
@@ -681,70 +726,98 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
         }
 
+        if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/raycasterComponent.vwf")) {
+
+
+            // aframeObj.el.setAttribute(node.type, {});
+            aframeObj.compName = "raycaster";
+            aframeObj.el.setAttribute(aframeObj.compName, {});
+
+        }
+
+
         if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/interpolation-component.vwf")) {
-           
 
-               // aframeObj.el.setAttribute(node.type, {});
+
+            // aframeObj.el.setAttribute(node.type, {});
             aframeObj.compName = "interpolation";
             aframeObj.el.setAttribute(aframeObj.compName, {});
 
         }
 
         if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/anim-mixer-component.vwf")) {
-            
- 
-                // aframeObj.el.setAttribute(node.type, {});
-             aframeObj.compName = "animation-mixer";
-             aframeObj.el.setAttribute(aframeObj.compName, {});
- 
-         }
+
+
+            // aframeObj.el.setAttribute(node.type, {});
+            aframeObj.compName = "animation-mixer";
+            aframeObj.el.setAttribute(aframeObj.compName, {});
+
+        }
 
         if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/app-envmap-component.vwf")) {
-            
- 
-                // aframeObj.el.setAttribute(node.type, {});
-             aframeObj.compName = "envmap";
-             aframeObj.el.setAttribute(aframeObj.compName, {});
- 
-         }
-
-         if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/app-sun-component.vwf")) {
-            
- 
-                // aframeObj.el.setAttribute(node.type, {});
-             aframeObj.compName = "sun";
-             aframeObj.el.setAttribute('id', "sun");
-             aframeObj.el.setAttribute(aframeObj.compName, {});
- 
-         }
-
-         if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/app-skyshader-component.vwf")) {
-            
- 
-                // aframeObj.el.setAttribute(node.type, {});
-             aframeObj.compName = "skyshader";
-             aframeObj.el.setAttribute(aframeObj.compName, {});
- 
-         }
-
-         if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/app-avatarbvh-component.vwf")) {
-            
- 
-                // aframeObj.el.setAttribute(node.type, {});
-             aframeObj.compName = "avatarbvh";
-             aframeObj.el.setAttribute(aframeObj.compName, {});
- 
-         }
-         
+
+
+            // aframeObj.el.setAttribute(node.type, {});
+            aframeObj.compName = "envmap";
+            aframeObj.el.setAttribute(aframeObj.compName, {});
+
+        }
+
+        if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/app-sun-component.vwf")) {
+
+
+            // aframeObj.el.setAttribute(node.type, {});
+            aframeObj.compName = "sun";
+            aframeObj.el.setAttribute('id', "sun");
+            aframeObj.el.setAttribute(aframeObj.compName, {});
+
+        }
+
+        if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/app-skyshader-component.vwf")) {
+
+
+            // aframeObj.el.setAttribute(node.type, {});
+            aframeObj.compName = "skyshader";
+            aframeObj.el.setAttribute(aframeObj.compName, {});
+
+        }
+
+        if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/app-avatarbvh-component.vwf")) {
+
+
+            // aframeObj.el.setAttribute(node.type, {});
+            aframeObj.compName = "avatarbvh";
+            aframeObj.el.setAttribute(aframeObj.compName, {});
+
+        }
+
 
         if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/gearvr-controlsComponent.vwf")) {
-            
- 
-                // aframeObj.el.setAttribute(node.type, {});
-             aframeObj.compName = "gearvr-controls";
-             aframeObj.el.setAttribute(aframeObj.compName, {});
- 
-         }
+
+
+            // aframeObj.el.setAttribute(node.type, {});
+            aframeObj.compName = "gearvr-controls";
+            aframeObj.el.setAttribute(aframeObj.compName, {});
+
+        }
+
+        if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/app-raycaster-listener-component.vwf")) {
+
+
+            // aframeObj.el.setAttribute(node.type, {});
+            aframeObj.compName = "raycaster-listener";
+            aframeObj.el.setAttribute(aframeObj.compName, {});
+
+        }
+
+        if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/app-cursor-listener-component.vwf")) {
+
+
+            // aframeObj.el.setAttribute(node.type, {});
+            aframeObj.compName = "cursor-listener";
+            aframeObj.el.setAttribute(aframeObj.compName, {});
+
+        }
 
 
         return aframeObj;
@@ -784,7 +857,9 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                     parent.children.push(node.ID);
                     //console.info( "Adding child: " + childID + " to " + nodeID );
                     //node.aframeObj.setAttribute(node.componentName, {});
-                    console.info("Adding child: " + node.ID);
+
+                  //  console.info("Adding child: " + node.ID);
+                  
                     //parent.aframeObj.appendChild(node.aframeObj);
                 }
             }

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

@@ -108,19 +108,19 @@ define(["module", "vwf/view"], function (module, view) {
                 return;
             }
 
-            var aframeObject = node.aframeObj;
-            switch (propertyName) {
-                case "clickable":
-                    if (propertyValue) {
-                        aframeObject.addEventListener('click', function (evt) {
-                            let cursorID = 'cursor-avatar-'+selfs.kernel.moniker();
-                           if (evt.detail.cursorEl.id == cursorID) {
-                                vwf_view.kernel.fireEvent(nodeId, "clickEvent")
-                           }
-                        });
-                    }
-                    break;
-            }
+            // var aframeObject = node.aframeObj;
+            // switch (propertyName) {
+            //     case "clickable":
+            //         if (propertyValue) {
+            //             aframeObject.addEventListener('click', function (evt) {
+            //                 let cursorID = 'cursor-avatar-'+selfs.kernel.moniker();
+            //                if (evt.detail.cursorEl.id == cursorID) {
+            //                     vwf_view.kernel.fireEvent(nodeId, "clickEvent")
+            //                }
+            //             });
+            //         }
+            //         break;
+            // }
         },
 
         firedEvent: function (nodeID, eventName, eventParameters) {
@@ -138,7 +138,8 @@ define(["module", "vwf/view"], function (module, view) {
                     "id": avatarName,
                     "uri": avatarName,
                     "extends": "http://vwf.example.com/aframe/avatar.vwf",
-                    "properties":{}
+                    "properties":{
+                    }
                 }
                 
                

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

@@ -100,7 +100,7 @@ define(["module", "vwf/view"], function (module, view) {
                 case "color":
                     if (propertyValue) {
                        // self.kernel.callMethod (nodeId, 'initLang');
-                       console.log("sat color "+ propertyValue)
+                      // console.log("sat color "+ propertyValue)
                     }
                     break;
             }

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

@@ -153,7 +153,7 @@ define([
 
 
 
-            ["drawer", "toolbar", "sideBar", "propWindow", "clientsWindow", "codeEditorWindow", "viewSceneProps"].forEach(item => {
+            ["drawer", "toolbar", "sideBar", "propWindow", "clientsWindow", "codeEditorWindow", "propEditorWindow","viewSceneProps"].forEach(item => {
                 let el = document.createElement("div");
                 el.setAttribute("id", item);
                 document.body.appendChild(el);
@@ -744,56 +744,144 @@ define([
             }
 
             let propertiesCell = function (m) {
-                return {
-                    $type: "div",
-                    class: "mdc-layout-grid__inner",
-                    $components: [
-                        {
-                            $type: "div",
-                            class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-3",
-                            $components: [
-                                { $text: m.name }
-                            ]
-                        },
-                        {
-                            $type: "div",
-                            class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
-                        },
+
+                var editComponents = [{},{}]
+
+                if (m.name.indexOf("semantics") > -1) { }
+                else if (m.name.indexOf("grammar") > -1) { }
+                else if (m.name.indexOf("ohm") > -1) {
+
+                    editComponents = [
+
                         {
-                            $type: "div",
-                            class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-7",
-                            $components: [
-                                {
-                                    class: "mdc-textfield",
-                                    $cell: true,
-                                    $type: "span",
-                                    $components: [
-                                        {
-                                            class: "mdc-textfield__input",
-                                            id: "prop-" + m.name,
-                                            $cell: true,
-                                            $type: "input",
-                                            type: "text",
-                                            value: m.getValue(),
-                                            onchange: function (e) {
-                                                let propValue = this.value;
-                                                try {
-                                                    propValue = JSON.parse(propValue);
-                                                    self.kernel.setProperty(this._currentNode, m.name, propValue);
+                        $type: "div",
+                        $cell: true,
+                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-6",
+                        $components: [
+                            {
+                                $cell: true,
+                                $type: "button",
+                                class: "mdc-button",
+                                $text: "Edit", //edit grammar
+                                onclick: function (e) {
+                                    var currentNode = document.querySelector('#currentNode')._currentNode;
+                                    if (currentNode == '') {
+                                        currentNode = vwf_view.kernel.find("", "/")[0];
+                                    }
+                                    let editor = document.querySelector('#livePropEditor');
+                                    editor._setNode(currentNode);
+                                    editor._propName = m.name;
+                                    editor._prop = {body: m.rawValue, type: 'complex' }
+                                 
+                                    document.querySelector('#propEditorWindow').style.visibility = 'visible';
+                                }
+                               
 
-                                                } catch (e) {
-                                                    // restore the original value on error
-                                                    this.value = propValue;
+                            }
+                        ]
+                    },
+                    {
+                        $type: "div",
+                        $cell: true,
+                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-1",
+                        $components: []
+                    }
+
+                    ]
+
+                } else {
+
+                    editComponents =  [
+                        {
+                                $type: "div",
+                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-6",
+                                $components: [
+                                    {
+                                        class: "mdc-textfield",
+                                        $cell: true,
+                                        $type: "span",
+                                        $components: [
+                                            {
+                                                class: "mdc-textfield__input",
+                                                id: "prop-" + m.name,
+                                                $cell: true,
+                                                $type: "input",
+                                                type: "text",
+                                                value: m.getValue(),
+                                                onchange: function (e) {
+                                                    let propValue = this.value;
+                                                    try {
+                                                        propValue = JSON.parse(propValue);
+                                                        self.kernel.setProperty(this._currentNode, m.name, propValue);
+                    
+                                                    } catch (e) {
+                                                        // restore the original value on error
+                                                        this.value = propValue;
+                                                    }
                                                 }
                                             }
-                                        }]
+                                        ]
 
-                                }
-                            ]
-                        }
+                                    }
+                                ]
+                            },
+                            {
+                                $type: "div",
+                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-1",
+                                $components: [
+                                    {
+                                        $cell: true,
+                                        $type: "button",
+                                        class: "mdc-button",
+                                        $text: "^", //edit grammar
+                                        onclick: function (e) {
+                                            var currentNode = document.querySelector('#currentNode')._currentNode;
+                                            if (currentNode == '') {
+                                                currentNode = vwf_view.kernel.find("", "/")[0];
+                                            }
+                                            let editor = document.querySelector('#livePropEditor');
+                                            editor._setNode(currentNode);
+                                            editor._propName = m.name;
+                                            editor._prop = {body: m.getValue(), type: 'simple' }
+                                         
+                                            document.querySelector('#propEditorWindow').style.visibility = 'visible';
+                                        }
+                                       
+        
+                                    }
+                                ]
+                            }
+                        
+                        
 
-                    ]
-                }
+                        
+                    
+                    ];
+                    }
+
+                    return {
+                        $type: "div",
+                        class: "mdc-layout-grid__inner",
+                        $components: [
+                            {
+                                $type: "div",
+                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-3",
+                                $components: [
+                                    { $text: m.name }
+                                ]
+                            },
+                            {
+                                $type: "div",
+                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
+                            }, 
+                            editComponents[0],
+                            editComponents[1]
+                            
+
+                        ]
+                    }
+
+                
 
             }
 
@@ -870,6 +958,16 @@ define([
                     //let nodeIDAlpha = he.encode(this._currentNode);
 
                 },
+                // _getNodeComplexProperties: function () {
+                //     let node = self.nodes[this._currentNode];
+                //     let props = this._getNodeProperties();
+                //     let filterFunction = function (prop) {
+                //         return (prop.name == 'ohmLang') 
+                //     };
+                //     let complexProps = props.filter(filterFunction.bind(this));
+
+                //     return complexProps
+                // },
                 _getNodeProperties: function () {
                     let node = self.nodes[this._currentNode];
                     this._displayedProperties = {};
@@ -1100,6 +1198,116 @@ define([
             }
 
 
+            let propEditorWindow = {
+                $cell: true,
+                $type: "div",
+                _editorNode: '',
+                _prop: { body: '', type: 'simple'},
+                _propName: '',
+                id: "livePropEditor",
+                _setNode: function (node) {
+                    this._editorNode = node;
+                    this._prop.body = ''
+                },
+                class: "propEditorGrid mdc-layout-grid max-width mdc-layout-grid--align-left",
+                $update: function () {
+                    this.$components = [
+                        {
+                            $cell: true,
+                            $type: "div",
+                            class: "mdc-layout-grid__inner",
+                            $components: [
+                               
+                                {
+                                    $cell: true,
+                                    $type: "div",
+                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
+                                    $components: [
+                                        {
+                                            $cell: true,
+                                            $type: "button",
+                                            class: "mdc-button mdc-button--raised",
+                                            $text: "Update",
+                                            onclick: function (e) {
+                                                let editor = document.querySelector("#propAceEditor").env.editor;
+                                                let value = editor.getValue();
+
+                                                try {
+                                                   let propValue = (this._prop.type == 'simple') ? (JSON.parse(value)): (value)
+                                                    //propValue = JSON.parse(value);
+                                                    self.kernel.setProperty(this._editorNode, this._propName, propValue);
+                
+                                                } catch (e) {
+                                                    // restore the original value on error
+                                                    this.value = propValue;
+                                                }
+
+                                            }
+
+                                        }]
+                                },
+                                {
+                                    $cell: true,
+                                    $type: "div",
+                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-5",
+                                    $components: [
+                                        {
+                                            $type: "h3",
+                                            class: "mdc-list-group__subheader mdc-list-item__text mdc-typography--subheading1",
+                                            $text: this._editorNode
+                                        }
+
+                                    ]
+                                },
+                                {
+                                    $cell: true,
+                                    $type: "div",
+                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-5",
+                                    $components: [
+                                        {
+                                            $type: "h3",
+                                            class: "mdc-list-group__subheader mdc-list-item__text mdc-typography--subheading1",
+                                            $text: this._propName
+                                        }
+
+                                    ]
+                                }
+
+
+
+                            ]
+                        },
+                        {
+                            $cell: true,
+                            $type: "div",
+                            class: "mdc-layout-grid__inner",
+                            $components: [
+                                {
+                                    $cell: true,
+                                    $type: "div",
+                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
+                                    $components: [
+                                        {
+                                            $cell: true,
+                                            class: "aceEditor",
+                                            id: "propAceEditor",
+                                            $type: "div",
+                                            $text: this._prop.body,
+                                            $init: function () {
+                                                createAceEditor(self, this._editorNode, "propAceEditor");
+                                            }
+                                        }
+
+                                    ]
+                                }
+                            ]
+                        }
+
+                    ]
+                    //$components: 
+                }
+            }
+
             let codeEditorWindow = {
                 $cell: true,
                 $type: "div",
@@ -1121,6 +1329,37 @@ define([
                     this._method.body = ''
                 },
                 class: "codeEditorGrid mdc-layout-grid max-width mdc-layout-grid--align-left",
+                // _getComplexProps: function(){
+                //     let node = self.nodes[this._editorNode];
+                //     let currentNode = document.querySelector('#currentNode');
+                //     var props = {}
+                //     if (currentNode !== null) {
+                //         props = currentNode._getNodeComplexProperties();
+                //     }
+                //     return props
+                // },
+                // _listPropertyElement: function (m) {
+
+                //     return {
+                //         $type: "li",
+                //         class: "mdc-list-item",
+                //         $components: [{
+                //             $type: "a",
+                //             class: "mdc-list-item",
+                //             $href: "#",
+                //             $text: m[1].name,
+
+                //             onclick: function (e) {
+
+                //                 this._method = {};
+                //                 this._methodName = m[1].name;
+                //                 this._method.body = m[1].rawValue
+                //                 this._method.type = "complexProperty"
+
+                //             }
+                //         }]
+                //     }
+                // },
                 _listElement: function (m) {
                     return {
                         $type: "li",
@@ -1177,6 +1416,21 @@ define([
                                             onclick: function (e) {
                                                 let editor = document.querySelector("#aceEditor").env.editor;
                                                 let evalText = editor.getValue();
+
+                                            //    if (this._method.type == 'complexProperty') {
+                                               
+                                            //         let propValue = evalText;
+                                            //         try {
+                                            //             //propValue = JSON.parse(propValue);
+                                            //             self.kernel.setProperty(this._editorNode, this._methodName, propValue);
+                    
+                                            //         } catch (e) {
+                                            //             // restore the original value on error
+                                            //             this.value = propValue;
+                                            //         }
+                                            //     } else {
+                                               
+                                            //     }
                                                 self.kernel.setMethod(this._editorNode, this._methodName,
                                                     { body: evalText, type: "application/javascript", parameters: this._method.parameters });
                                             }
@@ -1252,7 +1506,7 @@ define([
                                     $cell: true,
                                     $type: "div",
                                     class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-3",
-                                    style: "overflow-y: scroll; max-height: 800px;",
+                                    style: "overflow-y: scroll; max-height: 400px;",
                                     $components: [
                                         {
                                             $cell: true,
@@ -1282,7 +1536,18 @@ define([
                                                     $type: "ul",
                                                     class: "mdc-list",
                                                     $components: Object.entries(this._getProtoNodeMethods()).map(this._listElement)
+                                                },listDivider,
+                                                {
+                                                    $type: "h3",
+                                                    class: "mdc-list-group__subheader mdc-list-item__text mdc-typography--button",
+                                                    $text: "Events"
                                                 }
+                                                // {
+                                                //     $cell: true,
+                                                //     $type: "ul",
+                                                //     class: "mdc-list",
+                                                //     $components: Object.entries(this._getComplexProps()).map(this._listPropertyElement)
+                                                // }
 
                                             ]
 
@@ -1303,7 +1568,7 @@ define([
                                             $type: "div",
                                             $text: this._method.body,
                                             $init: function () {
-                                                createAceEditor(self, this._editorNode);
+                                                createAceEditor(self, this._editorNode, "aceEditor");
                                             }
                                         }
 
@@ -1393,6 +1658,7 @@ define([
             //createCellWindow("clientsWindow", clientListCell, "Clients");
             //createCellWindow("propWindow", propWindow, "Scene");
             createCellWindow("codeEditorWindow", codeEditorWindow, "Code editor");
+            createCellWindow("propEditorWindow", propEditorWindow, "Prop editor");
 
 
 
@@ -1713,7 +1979,7 @@ define([
                             class: "mdc-toolbar__title catalog-title",
                             $text: "LiveCoding.space"
                         }
-                        
+
                     ]
                 }]
 
@@ -3171,8 +3437,8 @@ define([
 
     // -- viewScript ------------------------------------------------------------------------
 
-    function createAceEditor(view, nodeID) {
-        var editor = view.ace.edit("aceEditor");
+    function createAceEditor(view, nodeID, elID) {
+        var editor = view.ace.edit(elID);
         editor.setTheme("ace/theme/monokai");
         editor.setFontSize(16);
         editor.getSession().setMode("ace/mode/javascript");

support/client/lib/vwf/view/lib/editorLive.css

@@ -93,6 +93,10 @@
     max-width: 1200px;
   }
 
+  .propEditorGrid.max-width {
+    max-width: 700px;
+  }
+
   .aceEditor {
     width:inherit; height: 400px
   }

support/proxy/vwf.example.com/aframe/app-cursor-listener-component.vwf.yaml

@@ -0,0 +1,5 @@
+# cursor listener
+---
+extends: http://vwf.example.com/aframe/aentityComponent.vwf
+type: "component"
+properties:

support/proxy/vwf.example.com/aframe/app-raycaster-listener-component.vwf.yaml

@@ -0,0 +1,5 @@
+# raycaster listener
+---
+extends: http://vwf.example.com/aframe/aentityComponent.vwf
+type: "component"
+properties:

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

@@ -44,7 +44,7 @@ this.createAvatarBody = function (modelSrc) {
     var newNode = {
         "extends": "http://vwf.example.com/aframe/aentity.vwf",
         "properties": {
-            position: [0, -userHeight, 0]
+            position: [0, -userHeight, 0]   
         },
         children: {
            
@@ -102,7 +102,46 @@ this.createAvatarBody = function (modelSrc) {
                                     "end": "0 0 -3",
                                     "color": myColor
                                 }
+                            },
+                            // "realCursor":{
+                            //     "extends": "http://vwf.example.com/aframe/acursor.vwf",
+                            //     "properties": {
+                            //         visible: false
+                            //     },
+                            //     "children": {
+                            //         "raycaster": {
+                            //             "extends": "http://vwf.example.com/aframe/raycasterComponent.vwf",
+                            //             "type": "component",
+                            //             "properties": {
+                            //                 //recursive: false,
+                            //                 //interval: 1000,
+                            //                 far: 100,
+                            //                 //objects: ".intersectable"
+                            //             }
+                            //         }
+                            //     }
+                            // },
+                           "myRayCaster": {
+                            "extends": "http://vwf.example.com/aframe/aentity.vwf",
+                            "properties": {},
+                            "children": {
+                                "raycaster": {
+                                    "extends": "http://vwf.example.com/aframe/raycasterComponent.vwf",
+                                    "type": "component",
+                                    "properties": {
+                                        recursive: false,
+                                        interval: 1000,
+                                        far: 3,
+                                        objects: ".intersectable"
+                                    }
+                                }
                             }
+                        },
+                        //     "raycaster-listener": {
+                        //         "extends": "http://vwf.example.com/aframe/app-raycaster-listener-component.vwf",
+                        //         "type": "component"
+                        //     }
+                           
                         }
                     }
                 }
@@ -161,7 +200,7 @@ this.createAvatarBody = function (modelSrc) {
 
     this.children.create("avatarNode", newNode);
 
-
+   // this.children.create("avatarNode", newNode);
 
     // this.children.create( "avatarBodyModel", newNodeModel );
 

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

@@ -0,0 +1,14 @@
+#https://aframe.io/docs/0.7.0/components/raycaster.html
+---
+extends: http://vwf.example.com/aframe/aentityComponent.vwf
+type: "component"
+properties:
+  direction:
+  far:
+  interval:
+  near:
+  objects:
+  origin:
+  recursive:
+  showLine:
+  useWorldCoordinates: