add simple gui

public/empty/appui.js

@@ -0,0 +1,5 @@
+//-----App ui-----
+
+// function createApp() {
+//     return {}
+// }

public/empty/index.vwf.config.yaml

@@ -0,0 +1,8 @@
+---
+info:
+  title: "VWF & AFrame Example App"
+model:
+  vwf/model/aframe:
+view:
+  vwf/view/aframe:
+  vwf/view/editor-new:

public/empty/index.vwf.yaml

@@ -0,0 +1,5 @@
+# A-Frame & VWF simple scene
+# Copyright 2017 Krestianstvo.org project
+---
+extends: http://vwf.example.com/aframe/ascene.vwf
+properties:

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

@@ -278,18 +278,30 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
         deletingNode: function (nodeID) {
 
-            if (this.state.nodes[nodeID] !== undefined) {
+            if (nodeID) {
+                var childNode = this.state.nodes[nodeID];
+                if (!childNode) return;
 
-                var node = this.state.nodes[nodeID];
-                if (node.aframeObj !== undefined) {
+
+            if (childNode !== undefined) {
+
+                if (childNode.children) {
+
+                    for (var i = 0; i < childNode.children.length; i++) {
+                        this.deletingNode(childNode.children[i]);
+                    }
+                }
+
+                if (childNode.aframeObj !== undefined) {
                     // removes and destroys object
-                    node.aframeObj.parentNode.removeChild(node.aframeObj);
-                    node.aframeObj = undefined;
+                    childNode.aframeObj.parentNode.removeChild(childNode.aframeObj);
+                    childNode.aframeObj = undefined;
                 }
 
                 delete this.state.nodes[nodeID];
             }
 
+        }
         },
 
 

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

@@ -247,6 +247,11 @@ define(["module", "vwf/view"], function (module, view) {
             // }
         },
 
+        deletedNode: function(childID)
+        {
+            delete this.nodes[childID];
+        },
+
         firedEvent: function (nodeID, eventName, eventParameters) {
             //var avatarID = vwf_view.kernel.find("", avatarName)
 

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

@@ -190,128 +190,121 @@ define([
                 $components: [
                     {
                         $cell: true,
-                        $type: "div",
-                        class: "mdc-layout-grid__inner",
+                        $type: "section",
                         $components: [
-                            {
-                                
-                                    $cell: true,
-                                    $type: "div",
-                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
-                                    $components: [
-                                        {
-                                            $cell: true,
-                                            $type: "h3",
-                                            class: "mdc-typography--headline",
-                                            $text: "Primitives"
-                                        }
-                                    ]
-                                
-                            },
                             {
                                 $cell: true,
-                                $type: "div",
-                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-4",
-                                $components: [
-                                widgets.simpleCard(
-                                    {
-                                        "imgSrc": "vwf/view/lib/images/ui/cube_normal.png",
-                                        "imgHeight": "100px",
-                                        "addonClass": "create-card",
-                                        "text": "Cube",
-                                        "onclickfunc": function(){
-                                            let avatarID = 'avatar-' + vwf.moniker_;
-                                            //let cubeName = self.GUID();
-                                            vwf_view.kernel.callMethod(vwf.application(), "createPrimitive", ["cube", avatarID])
-                                        }
-                                    }
-                                )
-                            ]
-                        },
-                            {
-                                $cell: true,
-                                $type: "div",
-                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-4",
-                                $components: [
-
-                                    widgets.simpleCard(
-                                        {
-                                            "imgSrc": "vwf/view/lib/images/ui/sphere_normal.png",
-                                            "imgHeight": "100px",
-                                            "addonClass": "create-card",
-                                            "text": "Sphere",
-                                            "onclickfunc": function(){
-                                                let avatarID = 'avatar-' + vwf.moniker_;
-                                                //let cubeName = self.GUID();
-                                                vwf_view.kernel.callMethod(vwf.application(), "createPrimitive", ["sphere", avatarID])
-                                            }
-                                        }
-                                    )
-                                ]
+                                $type: "h3",
+                                $text:"Create"
                             },
-                            // {
-                            //     $cell: true,
-                            //     $type: "div",
-                            //     class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-4",
-                            //     $components: [
-                            
-                            //         widgets.simpleCard(
-                            //             {
-                            //                 "imgSrc": "vwf/view/lib/images/ui/cylinder_normal.png",
-                            //                 "imgHeight": "100px",
-                            //                 "text": "Cylinder"
-                            //             }
-                            //         )
-                                    
-                            //     ]
-                            // }
-                          
-                        ]
-                    },
-                    {
-                        $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",
+                                class: "mdc-list-group",
                                 $components: [
                                     {
                                         $cell: true,
                                         $type: "h3",
-                                        class: "mdc-typography--headline",
-                                        $text: "Assets"
+                                        class: "mdc-list-group__subheader",
+                                        $text:"3D Primitives" 
+                                     
+                                    },
+                                    {
+                                        $cell: true,
+                                        $type: "ul",
+                                        class: "mdc-list mdc-list--two-line",
+                                        $components: make3DPrimitiveList()  
+                                    },
+                                    self.widgets.listDivider(),
+                                    {
+                                        $cell: true,
+                                        $type: "h3",
+                                        class: "mdc-list-group__subheader",
+                                        $text:"Light" 
+                                     
+                                    },
+                                    {
+                                        $cell: true,
+                                        $type: "ul",
+                                        class: "mdc-list mdc-list--two-line",
+                                        $components: makeLightsList()
+                                    },
+                                    self.widgets.listDivider(),
+                                    {
+                                        $cell: true,
+                                        $type: "h3",
+                                        class: "mdc-list-group__subheader",
+                                        $text:"Assets" 
+                                     
+                                    },
+                                    {
+                                        $cell: true,
+                                        $type: "ul",
+                                        class: "mdc-list mdc-list--two-line",
+                                        $components: [
+                                            self.widgets.createListItem({
+                                                imgSrc: "vwf/view/lib/images/ui/icons/3ditem.png",
+                                                title: '3D Model'
+                                            }),
+                                            self.widgets.createListItem({
+                                                imgSrc: "vwf/view/lib/images/ui/icons/image.png",
+                                                title: 'Image',
+                                                onclickfunc: function(){
+                                                    //let cubeName = self.GUID();
+                                                    vwf_view.kernel.callMethod(vwf.application(), "createAssetItemImg")
+                                                }
+                                            }),
+                                            self.widgets.createListItem({
+                                                imgSrc: "vwf/view/lib/images/ui/icons/video.png",
+                                                title: 'Video'
+                                            }),
+                                            self.widgets.createListItem({
+                                                imgSrc: "vwf/view/lib/images/ui/icons/sound.png",
+                                                title: 'Sound'
+                                            })
+                                        
+                                        ]
                                     }
-                                ]
-                            },
-                            {
-                                $cell: true,
-                                $type: "div",
-                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-4",
-                                $components: [
 
-                                    widgets.simpleCard(
-                                        {
-                                            "imgSrc": "vwf/view/lib/images/ui/standard.png",
-                                            "imgHeight": "100px",
-                                            "addonClass": "create-card",
-                                            "text": "2D Image",
-                                            "onclickfunc": function(){
-                                                //let cubeName = self.GUID();
-                                                vwf_view.kernel.callMethod(vwf.application(), "createAssetItemImg")
-                                            }
-                                        }
-                                    )
                                 ]
                             }
+   
+                            
                         ]
                     }
 
                 ]
             }
 
+            function make3DPrimitiveList() {
+                let nodeNames = ['Plane', 'Cube', 'Sphere', 'Cylinder', 'Cone'];
+                return nodeNames.map(el => {
+                   return  self.widgets.createListItem({
+                        imgSrc: "vwf/view/lib/images/ui/icons/" + el.toLowerCase()+".png",
+                        title: el,
+                        onclickfunc: function(){
+                            let avatarID = 'avatar-' + vwf.moniker_;
+                            //let cubeName = self.GUID();
+                            vwf_view.kernel.callMethod(vwf.application(), "createPrimitive", [el.toLowerCase(), avatarID])
+                        }
+                })
+                })
+            }
+
+            function makeLightsList() {
+                let nodeNames = ['Ambient', 'Directional', 'Hemisphere', 'Point', 'Spot'];
+                return nodeNames.map(el => {
+                   return self.widgets.createListItem({
+                        imgSrc: "vwf/view/lib/images/ui/icons/light_"+el.toLowerCase()+".png",
+                        title: el,
+                        onclickfunc: function(){
+                            let avatarID = 'avatar-' + vwf.moniker_;
+                            //let cubeName = self.GUID();
+                            vwf_view.kernel.callMethod(vwf.application(), "createPrimitive", ["light", avatarID, el.toLowerCase()])
+                        }
+                    })
+                })
+            }
 
             let avatarSettings =
                 {
@@ -994,21 +987,26 @@ define([
                     $update: function () {
                         this.$components = [
 
+                            // {
+                            //     $type: "div",
+                            //     class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-10",
+                            //     $components: [
+                            //         { $text: this._prop.name }
+                            //     ]
+                            // },
+                            // {
+                            //     $type: "div",
+                            //     class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
+                            // },
                             {
                                 $type: "div",
-                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-3",
-                                $components: [
-                                    { $text: this._prop.name }
-                                ]
-                            },
-                            {
-                                $type: "div",
-                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
-                            },
-                            {
-                                $type: "div",
-                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-7",
+                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                 $components: [
+                                    {   
+                                        $type: "span",
+                                        class: "mdc-typography--body2 mdc-typography--adjust-margin protoPropLabel",
+                                        $text: this._prop.name + ': '
+                                     },
                                     {
                                         class: "mdc-text-field",
                                         $cell: true,
@@ -1511,7 +1509,7 @@ define([
                             },
                             {
                                 $type: "div",
-                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-7",
+                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-3",
                                 $components: [
                                     widgets.switch({
                                     'id': 'editnode', 
@@ -1537,52 +1535,74 @@ define([
                             },
                             {
                                 $type: "div",
-                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-1",
+                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
                                 $components: [
-                                    {
 
-                                        $cell: true,
-                                        $type: "a",
-                                        class: "gizmomode",
-                                        $text: "T",
-                                        onclick: function (e) {
-                                            vwf_view.kernel.callMethod(this._currentNode, "setGizmoMode", ['translate'])
-                                        }
-                                    }
+                                    self.widgets.imageButton({
+                                        imgSrc: "vwf/view/lib/images/ui/icons/translate.png",
+                                        styleClass: "editButton",
+                                        onclickfunc: function (e) {
+                                                            vwf_view.kernel.callMethod(this._currentNode, "setGizmoMode", ['translate'])
+                                                        }
+                                    })
                                 ]
                             },
                             {
                                 $type: "div",
-                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-1",
+                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
                                 $components: [
-                                    {
 
-                                        $cell: true,
-                                        $type: "a",
-                                        class: "gizmomode",
-                                        $text: "R",
-                                        onclick: function (e) {
-                                            vwf_view.kernel.callMethod(this._currentNode, "setGizmoMode", ['rotate'])
-                                        }
-                                    }
+                                    self.widgets.imageButton({
+                                        imgSrc: "vwf/view/lib/images/ui/icons/rotate.png",
+                                        styleClass: "editButton",
+                                        onclickfunc: function (e) {
+                                                            vwf_view.kernel.callMethod(this._currentNode, "setGizmoMode", ['rotate'])
+                                                        }
+                                    })
                                 ]
                             },
                             {
                                 $type: "div",
-                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-1",
+                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
                                 $components: [
-                                    {
 
-                                        $cell: true,
-                                        $type: "a",
-                                        class: "gizmomode",
-                                        $text: "S",
-                                        onclick: function (e) {
-                                            vwf_view.kernel.callMethod(this._currentNode, "setGizmoMode", ['scale'])
+                                    self.widgets.imageButton({
+                                        imgSrc: "vwf/view/lib/images/ui/icons/scale.png",
+                                        styleClass: "editButton",
+                                        onclickfunc: function (e) {
+                                                            vwf_view.kernel.callMethod(this._currentNode, "setGizmoMode", ['scale'])
+                                                        }
+                                    })
+                                ]
+                            },
+                            {
+                                $type: "div",
+                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
+                                $components: [
+                                    // self.widgets.floatActionButton({
+                                    //     label: "content_copy",
+                                    //     styleClass: "mdc-fab--mini"
+
+                                    // }),
+                                    // {
+                                    //     $type: "span",
+                                    //     $text: " "
+
+                                    // },
+                                    self.widgets.floatActionButton({
+                                        label: "delete_forever",
+                                        styleClass: "mdc-fab--mini",
+                                        onclickfunc: function(){
+                                        var nodeID = document.querySelector('#currentNode')._currentNode;
+                                        let node = self.nodes[nodeID]; 
+                                        //vwf_view.kernel.deleteChild(node.parentID, node.name);
+                                        vwf_view.kernel.deleteNode(nodeID);
+                                        //vwf_view.kernel.callMethod(node.parentID, "deleteNode", [node.name])
                                         }
-                                    }
+                                    })
+                                    
                                 ]
-                            }
+                            },
                         ]
                     }
 

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

@@ -182,4 +182,35 @@
          /*
         height: 56px;
         */
+      }
+
+
+      .mdc-list-item__graphic {
+        margin-left: 0;
+        margin-right: 32px;
+        display: -webkit-inline-box;
+        display: -ms-inline-flexbox;
+        display: inline-flex;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        -webkit-box-pack: center;
+        -ms-flex-pack: center;
+        justify-content: center;
+      }
+      .createItems{
+        height: 40px;
+        width: 40px;
+        cursor:pointer;
+      }
+
+      .protoPropLabel {
+
+        font-weight: bold
+
+      }
+
+      .editButton{
+        height: 30px;
+        width: 30px;
       }

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

@@ -65,6 +65,54 @@ define(function () {
             }
         }
 
+        listDivider() {
+            return {
+                $cell: true,
+                $type: "hr",
+                class: "mdc-list-divider mdc-list-divider--inset"
+            }
+        }
+        createListItem(obj) {
+            return {
+                $cell: true,
+                $type: "li",
+                class: "mdc-list-item",
+                $components: [
+                    {
+                        $cell: true,
+                        $type: "span",
+                        class: "mdc-list-item__graphic",
+                        $components: [
+                            {
+                            $cell: true,
+                            class: "createItems",
+                            $type: "img",
+                            src: obj.imgSrc,
+                            onclick: obj.onclickfunc
+                            }
+                        ]
+                    },
+                    {
+                        $cell: true,
+                        $type: "span",
+                        class: "mdc-list-item__text",
+                        $text: obj.title
+                        // $components: [
+                        //     {
+                        //         $text: obj.title
+                        //     },
+                        //     {
+                        //     $cell: true,
+                        // $type: "span",
+                        // class: "mdc-list-item__secondary-text",
+                        // $text: obj.subTitle
+                        //     }
+                        // ]
+                    }
+                ]
+            }
+        }
+
         createCard(obj){
             return {
                 $cell: true,
@@ -283,6 +331,58 @@ define(function () {
             }
         }
 
+        floatActionButton(obj) {
+            return {
+                    $cell: true,
+                    $type: "button",
+                    class: "mdc-fab material-icons " + obj.styleClass,
+                    onclick: obj.onclickfunc,
+                    $components:[
+                        {
+                            $cell: true,
+                            $type: "span",
+                            class: "mdc-fab__icon",
+                            $text: obj.label
+                        }
+                    ]
+                }
+        }
+
+        iconButton(obj) {
+            return {
+                    $cell: true,
+                    $type: "button",
+                    class: "mdc-button",
+                    onclick: obj.onclickfunc,
+                    $components:[
+                        {
+                            $cell: true,
+                            $type: "i",
+                            class: "material-icons mdc-button__icon"+ obj.styleClass,
+                            $text: obj.label
+                        }
+                    ]
+                }
+        }
+
+        imageButton(obj){
+            return {
+                $cell: true,
+                $type: "button",
+                class: "mdc-button mdc-button--compact",
+                onclick: obj.onclickfunc,
+                $components:[
+                    {
+                        $cell: true,
+                        class: obj.styleClass,
+                        $type: "img",
+                        src: obj.imgSrc
+                     }
+                ]
+            }
+            
+        }
+
         switch(obj) {
 
             return   {

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

@@ -121,7 +121,81 @@ this.cubeProto = function () {
     return node
 }
 
-this.createPrimitive = function (type, avatar, name, node) {
+this.lightProto = function (lightType) {
+
+    var newLightType = lightType
+
+    if (!newLightType){
+        newLightType = "directional"
+    }
+
+    let node = {
+        "extends": "http://vwf.example.com/aframe/alight.vwf",
+        "properties": {
+            "displayName": newLightType,
+            "type": newLightType,
+            "clickable": true
+        },
+        children: {
+            "interpolation":
+                {
+                    "extends": "http://vwf.example.com/aframe/interpolation-component.vwf",
+                    "type": "component",
+                    "properties": {
+                        "enabled": true
+                    }
+                },
+            "cursor-listener": {
+                "extends": "http://vwf.example.com/aframe/app-cursor-listener-component.vwf",
+                "type": "component"
+            }
+        },
+        events: {
+            "clickEvent": {
+                "body": ""
+            }
+        }
+    }
+
+    return node
+}
+
+this.planeProto = function () {
+
+    let node = {
+        "extends": "http://vwf.example.com/aframe/aplane.vwf",
+        "properties": {
+            "displayName": "plane",
+            "color": "white",
+            "height": 1,
+            "width": 1,
+            "clickable": true
+        },
+        children: {
+            "interpolation":
+                {
+                    "extends": "http://vwf.example.com/aframe/interpolation-component.vwf",
+                    "type": "component",
+                    "properties": {
+                        "enabled": true
+                    }
+                },
+            "cursor-listener": {
+                "extends": "http://vwf.example.com/aframe/app-cursor-listener-component.vwf",
+                "type": "component"
+            }
+        },
+        events: {
+            "clickEvent": {
+                "body": ""
+            }
+        }
+    }
+
+    return node
+}
+
+this.createPrimitive = function (type, avatar, params, name, node) {
 
     var position = "0 0 0";
     var nodeName = name;
@@ -151,6 +225,14 @@ this.createPrimitive = function (type, avatar, name, node) {
             newNode = this.sphereProto();
             break;
 
+        case "plane":
+            newNode = this.planeProto();
+            break;
+
+        case "light":
+            newNode = this.lightProto(params);
+            break;
+            
         default:
             newNode = undefined;
             break;
@@ -212,4 +294,11 @@ this.createAssetItemImg = function(){
 
     this.children.create(nodeName, newNode);
 
+}
+
+this.deleteNode = function(nodeName){
+
+      let node = this.children[nodeName];
+    if (node) this.children.delete(node);
+
 }

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

@@ -16,5 +16,14 @@ methods:
       - name
       - node
   createAssetItemImg:
+  planeProto:
+  cubeProto:
+  sphereProto:
+  lightProto:
+     parameters:
+      - lightType
+  deleteNode:
+    parameters:
+      - nodeName
 scripts:
 - source: "http://vwf.example.com/aframe/ascene.js"