work on lsys example

public/ohmlang-lsys/appui.js

@@ -22,7 +22,18 @@ return {
                             $text: "Draw L-System",
                             onclick: function (e) {
                                 let sceneID = vwf.find("","/")[0];
-                                vwf_view.kernel.callMethod(sceneID, "testDrawLsys");
+                                vwf_view.kernel.callMethod(sceneID, "drawLSys1");
+                            }
+
+                        },
+                        {
+                            $cell: true,
+                            $type: "button",
+                            class: "mdc-button mdc-button--raised",
+                            $text: "Create new turtle",
+                            onclick: function (e) {
+                                let sceneID = vwf.find("","/")[0];
+                                vwf_view.kernel.callMethod(sceneID, "createNewTurtle");
                             }
 
                         }

public/ohmlang-lsys/index.vwf.yaml

@@ -4,23 +4,241 @@
 extends: http://vwf.example.com/aframe/ascene.vwf
 properties:
     assets: "assets.json"
-    iteration: 3
-    angle: 60
-    stepLength: 0.5
-    rule: 'F++F++F'
-    axiomF: 'F-F++F-F'
-    axiomG: ''
+children:
+    sky:
+        extends: http://vwf.example.com/aframe/asky.vwf
+        properties:
+            color: "#ECECEC"
+    groundPlane:
+        extends: http://vwf.example.com/aframe/aplane.vwf
+        properties:
+            height: 50
+            width: 50
+            repeat: "10 10"
+            rotation: [-90, 0, 0]
+            wireframe: false
+            src: "#bg2"
+    turtle:
+        extends: http://vwf.example.com/aframe/asphere.vwf
+        properties:
+            position: [1, 1.25, -4]
+            color: "#e0e014"
+            radius: 0.3
+            wireframe: true
+            angleInRadians: 0
+            counter: 1
+            iteration:
+                set: |
+                    this.iteration = value;
+                    this.makeLSys();
+                value: 3
+            angle:
+                set: |
+                    this.angle = value;
+                    this.makeLSys();
+                value: 60  
+            stepLength: 
+                set: |
+                    this.stepLength = value;
+                    this.makeLSys();
+                value: 0.5  
+            rule: 
+                set: |
+                    this.rule = value;
+                    this.makeLSys();
+                value: 'F++F++F'
+            axiomF: 
+                set: |
+                    this.axiomF = value;
+                    this.makeLSys();
+                value: 'F-F++F-F'
+            axiomG:
+                set: |
+                    this.axiomG = value;
+                    this.makeLSys();
+                value: ''
+            lsys: ''
+            ready: false
+        children:
+            drawNode:
+                extends: http://vwf.example.com/aframe/aentity.vwf
+            lsysLang:
+                extends: http://vwf.example.com/ohm/node.vwf
+                properties:
+                    grammar:
+                    semantics:
+                    ohmLang: |
+                        LSys { Gen<x> 
+                                = ReadRule+ 
+                                ReadRule 
+                                = letters | symbols
+                                letters  = "F" | "G" 
+                                symbols  = "-" | "+" }
+                methods:
+                    initLang:
+                        body: |
+                            console.log("add operations to semantics")
+                            this.addOperationLang();
+                    addOperationLang:
+                        body: |
+                            this.semantics.addOperation('gen(x)', {
+                                Gen: function(e)
+                                {
+                                    return e.gen(this.args.x);
+                                },
+                                ReadRule: function(e)
+                                {
+                                    return e.gen(this.args.x);
+                                },
+                                letters: function(_)
+                                {
+                                    for (var propName in this.args.x)
+                                    {
+                                        if (propName == this.sourceString)
+                                            return this.args.x[propName]
+                                    }
+                                    return this.sourceString
+                                },
+                                symbols: function(_)
+                                {
+                                    return this.sourceString;
+                                }
+                            });
+            turtleLang:
+                extends: http://vwf.example.com/ohm/node.vwf
+                properties:
+                    grammar:
+                    semantics:
+                    ohmLang: |
+                        Turtle {
+                        Draw<x, y> 
+                            = (drawLetter | turn)+ 
+                        drawLetter 
+                            = letter
+                        turn 
+                            = "+" | "-" }
+                methods:
+                    initLang:
+                        body: |
+                            console.log("add operations to semantics")
+                            this.addOperationLang();
+                    addOperationLang:
+                        body: |
+                            var turtleID = this.parent.id;
+                            var self = this;
+                            this.semantics.addOperation('draw(x,y)', {
+                                Draw: function(e)
+                                {
+                                    e.draw(this.args.x, this.args.y);
+                                },
+                                drawLetter: function(e)
+                                {
+                                    //vwf_view.kernel.callMethod(turtleID, 'goForward', [this.args.x]);
+                                    self.parent.goForward(this.args.x);
+                                },
+                                turn: function(e)
+                                {
+                                    if (this.sourceString == "+")
+                                        //vwf_view.kernel.callMethod(turtleID, 'turn', [this.args.y]);
+                                        self.parent.turn(this.args.y);
+                                    if (this.sourceString == "-")
+                                        // vwf_view.kernel.callMethod(turtleID, 'turn', [-1 * this.args.y]);
+                                        self.parent.turn(-1*this.args.y);
+                                    }
+                            });  
+        methods:
+            clearDraw: |
+                let self = this
+                let drawDef = {
+                    "extends": "http://vwf.example.com/aframe/aentity.vwf",
+                }
+                this.children.delete(this.drawNode);
+                this.children.create("drawNode", drawDef);
+                this.angleInRadians = 0
+                //this.drawNode.children.forEach(el => {
+                //   self.drawNode.children.delete(el)
+                //})
+            parseLSys: |
+                var str = this.rule;
+                var axioms = {"F": this.axiomF, "G": this.axiomG};
+                for (var i = 1; i < this.iteration; i++)
+                {
+                    var match = this.lsysLang.grammar.match(str, 'Gen<"y">');
+                    if (match.succeeded()){
+                    var res = this.lsysLang.semantics(match).gen(axioms);
+                    str = res.join("");
+                    }
+                }
+                console.log(str);
+                this.lsys = str;
+            makeLSys: |
+                if (this.ready) 
+                {
+                this.clearDraw();
+                this.parseLSys();
+                this.future(0.1).drawLSys();
+                }
+            drawLSys: |
+                var match = this.turtleLang.grammar.match(this.lsys, 'Draw<"1","1">');
+                if (match.succeeded()){
+                    var res = this.turtleLang.semantics(match).draw(this.stepLength, this.angle);
+                }
+            makeMe:
+                parameters:
+                        - childName
+                        - startPosition
+                        - endPosition
+                body: |
+                        //let nodeId = this.drawNode.id;
+                        var childComponent = {
+                                            "extends": "http://vwf.example.com/aframe/lineComponent.vwf",
+                                            "type": "component",
+                                            "properties": {
+                                                "start": startPosition,
+                                                "end": endPosition,
+                                                "color": "green"
+                                            }
+                                        }
+                            //vwf_view.kernel.createChild(this.id, childName, childComponent);
+                            this.drawNode.children.create(childName, childComponent);
+            turn:
+                parameters:
+                    - angle
+                body: |
+                    var angle0 = this.angleInRadians;
+                    var targetAngle = angle * Math.PI / 180.0;
+                    this.angleInRadians = angle0 + targetAngle;
+            goForward:
+                parameters:
+                    - step
+                body: |
+                    let pos = AFRAME.utils.coordinates.parse(this.drawNode.position);
+                    var x0 = pos.x;
+                    var y0 = pos.y;
+                    var xx = Math.sin(this.angleInRadians);
+                    var yy = Math.cos(this.angleInRadians);
+                    let endPosition = AFRAME.utils.coordinates.stringify({x: x0 + step * xx, y: y0 + step * yy, z: pos.z});
+                    this.counter = this.counter + 1;
+                    this.makeMe('line__' + this.counter, this.drawNode.position, endPosition);
+                    this.drawNode.position = endPosition;
+            initialize:
+                body: |
+                    this.ready = true;
+                    console.log("initialising turtle");
+                    //vwf_view.kernel.callMethod(this.id, "testDrawLsys");
 methods:
   initialize:
     body: |
-      console.log("initialize");
-      //vwf_view.kernel.callMethod(this.id, "testDrawLsys");
-  testDrawLsys: |
-    let lsys = this.parseLSys();
-    var match = this.turtleLang.grammar.match(lsys, 'Draw<"1","1">');
-    if (match.succeeded()){
-          var res = this.turtleLang.semantics(match).draw(this.stepLength, this.angle);
-    }
+        //this.turtle.ready = true;
+        console.log("initialising scene");
+        //vwf_view.kernel.callMethod(this.id, "testDrawLsys");
+  drawLSys1: |
+    this.turtle.makeLSys()
+  createNewTurtle: |
+        console.log("create new turtle");
+        let newTurtle = this.turtle;
+        let randomName = "turtle-" + this.random();
+        this.children.create(randomName, newTurtle);
   testTurtle: |
     this.turtle.goForward(1);
     this.turtle.goForward(1);
@@ -28,166 +246,4 @@ methods:
     this.turtle.goForward(1);
     this.turtle.goForward(1);
     this.turtle.turn(45);
-    this.turtle.goForward(1);
-  makeMe:
-      parameters:
-            - childName
-            - startPosition
-            - endPosition
-      body: |
-              let nodeId = this.turtleDraw.id;
-              var childComponent = {
-                                "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;
-    var axioms = {"F": this.axiomF, "G": this.axiomG};
-    for (var i = 1; i < this.iteration; i++)
-    {
-        var match = this.lsysLang.grammar.match(str, 'Gen<"y">');
-          if (match.succeeded()){
-          var res = this.lsysLang.semantics(match).gen(axioms);
-          str = res.join("");
-          }
-    }
-    console.log(str);
-    return str;
-children:
-  lsysLang:
-        extends: http://vwf.example.com/ohm/node.vwf
-        properties:
-          grammar:
-          semantics:
-          ohmLang: |
-            LSys { Gen<x> 
-                    = ReadRule+ 
-                    ReadRule 
-                    = letters | symbols
-                    letters  = "F" | "G" 
-                    symbols  = "-" | "+" }
-        methods:
-            initLang:
-              body: |
-                console.log("add operations to semantics")
-                this.addOperationLang();
-            addOperationLang:
-              body: |
-                this.semantics.addOperation('gen(x)', {
-                    Gen: function(e)
-                    {
-                        return e.gen(this.args.x);
-                    },
-                    ReadRule: function(e)
-                    {
-                        return e.gen(this.args.x);
-                    },
-                    letters: function(_)
-                    {
-                        for (var propName in this.args.x)
-                        {
-                            if (propName == this.sourceString)
-                                return this.args.x[propName]
-                        }
-                        return this.sourceString
-                    },
-                    symbols: function(_)
-                    {
-                        return this.sourceString;
-                    }
-                  });
-  turtleLang:
-        extends: http://vwf.example.com/ohm/node.vwf
-        properties:
-          grammar:
-          semantics:
-          ohmLang: |
-            Turtle {
-              Draw<x, y> 
-                  = (drawLetter | turn)+ 
-              drawLetter 
-                  = letter
-              turn 
-                  = "+" | "-" }
-        methods:
-            initLang:
-              body: |
-                console.log("add operations to semantics")
-                this.addOperationLang();
-            addOperationLang:
-              body: |
-                var turtleID = this.parent.turtle.id;
-                var self = this;
-                this.semantics.addOperation('draw(x,y)', {
-                    Draw: function(e)
-                      {
-                          e.draw(this.args.x, this.args.y);
-                      },
-                      drawLetter: function(e)
-                      {
-                          //vwf_view.kernel.callMethod(turtleID, 'goForward', [this.args.x]);
-                          self.parent.turtle.goForward(this.args.x);
-                      },
-                      turn: function(e)
-                      {
-                          if (this.sourceString == "+")
-                              //vwf_view.kernel.callMethod(turtleID, 'turn', [this.args.y]);
-                              self.parent.turtle.turn(this.args.y);
-                          if (this.sourceString == "-")
-                             // vwf_view.kernel.callMethod(turtleID, 'turn', [-1 * this.args.y]);
-                             self.parent.turtle.turn(-1*this.args.y);
-                        }
-                  });  
-  groundPlane:
-    extends: http://vwf.example.com/aframe/aplane.vwf
-    properties:
-      height: 50
-      width: 50
-      repeat: "10 10"
-      rotation: [-90, 0, 0]
-      wireframe: false
-      src: "#bg2"
-  turtleDraw:
-    extends: http://vwf.example.com/aframe/aentity.vwf
-    properties:
-      position: [1, 1.25, -4]
-  turtle:
-    extends: http://vwf.example.com/aframe/asphere.vwf
-    properties:
-      position: [1, 1.25, -4]
-      color: "#e0e014"
-      radius: 1
-      wireframe: true
-      angleInRadians: 0
-      counter: 1
-    methods:
-      turn:
-         parameters:
-            - angle
-         body: |
-          var angle0 = this.angleInRadians;
-          var targetAngle = angle * Math.PI / 180.0;
-          this.angleInRadians = angle0 + targetAngle;
-      goForward:
-        parameters:
-          - step
-        body: |
-          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);
-          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:
-      color: "#ECECEC"
+    this.turtle.goForward(1);

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

@@ -1230,7 +1230,7 @@ define([
                                             $type: "span",
                                             $init: function () {
                                                 let node = self.nodes[this._currentNode];
-                                                this.$text = node.name
+                                                if (node) this.$text = node.name
                                             },
                                             class: "mdc-list-item__text mdc-typography--headline"
                                             //<h1 class="mdc-typography--display4">Big header</h1>

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

@@ -0,0 +1,210 @@
+# Turtle for L-System
+--- 
+extends: http://vwf.example.com/aframe/asphere.vwf
+type: "turtle"
+properties:
+    position: [1, 1.25, -4]
+    color: "#e0e014"
+    radius: 0.3
+    wireframe: true
+    angleInRadians: 0
+    counter: 1
+    iteration:
+        set: |
+            this.iteration = value;
+            this.makeLSys();
+        value: 3
+    angle:
+        set: |
+            this.angle = value;
+            this.makeLSys();
+        value: 60  
+    stepLength: 
+        set: |
+            this.stepLength = value;
+            this.makeLSys();
+        value: 0.5  
+    rule: 
+        set: |
+            this.rule = value;
+            this.makeLSys();
+        value: 'F++F++F'
+    axiomF: 
+        set: |
+            this.axiomF = value;
+            this.makeLSys();
+        value: 'F-F++F-F'
+    axiomG:
+        set: |
+            this.axiomG = value;
+            this.makeLSys();
+        value: ''
+    lsys: ''
+    ready: false
+children:
+    drawNode:
+        extends: http://vwf.example.com/aframe/aentity.vwf
+    lsysLang:
+        extends: http://vwf.example.com/ohm/node.vwf
+        properties:
+            grammar:
+            semantics:
+            ohmLang: |
+                LSys { Gen<x> 
+                        = ReadRule+ 
+                        ReadRule 
+                        = letters | symbols
+                        letters  = "F" | "G" 
+                        symbols  = "-" | "+" }
+        methods:
+            initLang:
+                body: |
+                    console.log("add operations to semantics")
+                    this.addOperationLang();
+            addOperationLang:
+                body: |
+                    this.semantics.addOperation('gen(x)', {
+                        Gen: function(e)
+                        {
+                            return e.gen(this.args.x);
+                        },
+                        ReadRule: function(e)
+                        {
+                            return e.gen(this.args.x);
+                        },
+                        letters: function(_)
+                        {
+                            for (var propName in this.args.x)
+                            {
+                                if (propName == this.sourceString)
+                                    return this.args.x[propName]
+                            }
+                            return this.sourceString
+                        },
+                        symbols: function(_)
+                        {
+                            return this.sourceString;
+                        }
+                    });
+    turtleLang:
+        extends: http://vwf.example.com/ohm/node.vwf
+        properties:
+            grammar:
+            semantics:
+            ohmLang: |
+                Turtle {
+                Draw<x, y> 
+                    = (drawLetter | turn)+ 
+                drawLetter 
+                    = letter
+                turn 
+                    = "+" | "-" }
+        methods:
+            initLang:
+                body: |
+                    console.log("add operations to semantics")
+                    this.addOperationLang();
+            addOperationLang:
+                body: |
+                    var turtleID = this.parent.id;
+                    var self = this;
+                    this.semantics.addOperation('draw(x,y)', {
+                        Draw: function(e)
+                        {
+                            e.draw(this.args.x, this.args.y);
+                        },
+                        drawLetter: function(e)
+                        {
+                            //vwf_view.kernel.callMethod(turtleID, 'goForward', [this.args.x]);
+                            self.parent.goForward(this.args.x);
+                        },
+                        turn: function(e)
+                        {
+                            if (this.sourceString == "+")
+                                //vwf_view.kernel.callMethod(turtleID, 'turn', [this.args.y]);
+                                self.parent.turn(this.args.y);
+                            if (this.sourceString == "-")
+                                // vwf_view.kernel.callMethod(turtleID, 'turn', [-1 * this.args.y]);
+                                self.parent.turn(-1*this.args.y);
+                            }
+                    });  
+methods:
+    clearDraw: |
+        let self = this
+        let drawDef = {
+            "extends": "http://vwf.example.com/aframe/aentity.vwf",
+        }
+        this.children.delete(this.drawNode);
+        this.children.create("drawNode", drawDef);
+        this.angleInRadians = 0
+        //this.drawNode.children.forEach(el => {
+        //   self.drawNode.children.delete(el)
+        //})
+    parseLSys: |
+        var str = this.rule;
+        var axioms = {"F": this.axiomF, "G": this.axiomG};
+        for (var i = 1; i < this.iteration; i++)
+        {
+            var match = this.lsysLang.grammar.match(str, 'Gen<"y">');
+            if (match.succeeded()){
+            var res = this.lsysLang.semantics(match).gen(axioms);
+            str = res.join("");
+            }
+        }
+        console.log(str);
+        this.lsys = str;
+    makeLSys: |
+        if (this.ready) 
+        {
+        this.clearDraw();
+        this.parseLSys();
+        this.future(0.1).drawLSys();
+        }
+    drawLSys: |
+        var match = this.turtleLang.grammar.match(this.lsys, 'Draw<"1","1">');
+        if (match.succeeded()){
+            var res = this.turtleLang.semantics(match).draw(this.stepLength, this.angle);
+        }
+    makeMe:
+        parameters:
+                - childName
+                - startPosition
+                - endPosition
+        body: |
+                //let nodeId = this.drawNode.id;
+                var childComponent = {
+                                    "extends": "http://vwf.example.com/aframe/lineComponent.vwf",
+                                    "type": "component",
+                                    "properties": {
+                                        "start": startPosition,
+                                        "end": endPosition,
+                                        "color": "green"
+                                    }
+                                }
+                    //vwf_view.kernel.createChild(this.id, childName, childComponent);
+                    this.drawNode.children.create(childName, childComponent);
+    turn:
+        parameters:
+            - angle
+        body: |
+            var angle0 = this.angleInRadians;
+            var targetAngle = angle * Math.PI / 180.0;
+            this.angleInRadians = angle0 + targetAngle;
+    goForward:
+        parameters:
+            - step
+        body: |
+            let pos = AFRAME.utils.coordinates.parse(this.drawNode.position);
+            var x0 = pos.x;
+            var y0 = pos.y;
+            var xx = Math.sin(this.angleInRadians);
+            var yy = Math.cos(this.angleInRadians);
+            let endPosition = AFRAME.utils.coordinates.stringify({x: x0 + step * xx, y: y0 + step * yy, z: pos.z});
+            this.counter = this.counter + 1;
+            this.makeMe('line__' + this.counter, this.drawNode.position, endPosition);
+            this.drawNode.position = endPosition;
+    initialize:
+        body: |
+            this.ready = true;
+            console.log("initialising turtle");
+            //vwf_view.kernel.callMethod(this.id, "testDrawLsys");