Merge remote-tracking branch 'upstream/update2017'

public/aframe/index.vwf.yaml

@@ -3,9 +3,16 @@
 ---
 extends: http://vwf.example.com/aframe/ascene.vwf
 properties:
-  fog: "type: linear; color: #ECECEC; far: 9; near: 0"
   transparent: true
 children:
+  fog:
+    extends: http://vwf.example.com/aframe/aSceneFogComponent.vwf
+    type: "component"
+    properties:
+      fogType: "linear"
+      fogColor: "#ECECEC"
+      far: 9
+      near: 0
   sky:
     extends: http://vwf.example.com/aframe/asky.vwf
     properties:

public/aframe2/assets.json

@@ -1,22 +1,3 @@
 {
-    "bg":{
-        "tag": "img",
-        "src": "/../assets/bg.jpg"
-    },
-    "sky":{
-        "tag": "img",
-        "src": "/../assets/skyes/sky3.jpg"
-    },
-    "plane-obj":{
-        "tag": "a-asset-item",
-        "src": "/../assets/models/plane/PUSHILIN_Plane.obj"
-    },
-    "plane-mtl":{
-        "tag": "a-asset-item",
-        "src": "/../assets/models/plane/PUSHILIN_Plane.mtl"
-    },
-     "bg2":{
-        "tag": "img",
-        "src": "/../assets/checker.jpg"
-    }
+    
 }

public/aframe2/index.vwf.yaml

@@ -3,17 +3,46 @@
 ---
 extends: http://vwf.example.com/aframe/ascene.vwf
 properties:
-  fog: "type: linear; color: #ECECEC; far: 30; near: 0"
   transparent: true
   assets: "assets.json"
 children:
+  assetBG:
+    extends: http://vwf.example.com/aframe/a-asset-image-item.vwf
+    properties:
+      itemID: "bg"
+      itemSrc: "/assets/bg.jpg"
+  assetSky:
+    extends: http://vwf.example.com/aframe/a-asset-image-item.vwf
+    properties:
+      itemID: "sky"
+      itemSrc: "/assets/skyes/sky3.jpg"
+  assetBG2:
+    extends: http://vwf.example.com/aframe/a-asset-image-item.vwf
+    properties:
+      itemID: "bg2"
+      itemSrc: "/assets/checker.jpg"
+  assetPlaneObj:
+    extends: http://vwf.example.com/aframe/a-asset-item.vwf
+    properties:
+      itemID: "plane-obj"
+      itemSrc: "/assets/models/plane/PUSHILIN_Plane.obj"
+  assetPlaneMtl:
+    extends: http://vwf.example.com/aframe/a-asset-item.vwf
+    properties:
+      itemID: "plane-mtl"
+      itemSrc: "/assets/models/plane/PUSHILIN_Plane.mtl"
   myLight:
     extends: http://vwf.example.com/aframe/alight.vwf
     properties:
-      type: "point"
-      color: "white"
-      position: "0 10 5"
-      rotation: "0 0 0"
+      type: "directional"
+      intensity: 0.5
+      position: "0.5 2.0 1.0"
+      castShadow: true
+  myLight2:
+    extends: http://vwf.example.com/aframe/alight.vwf
+    properties:
+      type: "ambient"
+      intensity: 0.5
   model:
     extends: http://vwf.example.com/aframe/aobjmodel.vwf
     properties:
@@ -22,6 +51,11 @@ children:
       position: "-1.2 1.7 -2.5"
       rotation: "0 -45 0"
       scale: "0.5 0.5 0.5"
+    children:
+      shadow:
+        extends: http://vwf.example.com/aframe/shadowComponent.vwf
+        properties:
+          cast: true
   spaceText:
     extends: http://vwf.example.com/aframe/atext.vwf
     properties:
@@ -60,6 +94,11 @@ children:
       cursor-listener:
         extends: http://vwf.example.com/aframe/app-cursor-listener-component.vwf
         type: "component"
+      shadow:
+        extends: http://vwf.example.com/aframe/shadowComponent.vwf
+        properties:
+          cast: true
+          receive: true
     events:
       clickEvent:
       intersectEvent:
@@ -108,18 +147,25 @@ children:
       wireframe: true
     children:
       box2:
-        extends: http://vwf.example.com/aframe/abox.vwf
+        extends: http://vwf.example.com/aframe/aentity.vwf
         properties:
-          src: "#bg"
           position: "2 -0.75 0"
-          color: "#2167a5"
-          depth: 1
         children:
+          cube:
+            extends: http://vwf.example.com/aframe/abox.vwf
+            properties:
+              src: "#bg"
+              color: "#2167a5"
+              depth: 1
+            children:
+              shadow:
+                extends: http://vwf.example.com/aframe/shadowComponent.vwf
+                properties:
+                  cast: true
           interpolation:
             extends: http://vwf.example.com/aframe/interpolation-component.vwf
             properties:
               enabled: true
-              duration: 50
               deltaPos: 0.001
               deltaRot: 0.1
         methods:
@@ -143,8 +189,12 @@ children:
       repeat: "10 10"
       rotation: "-90 0 0"
       color: "white"
-      wireframe: false
       src: "#bg2"
+    children:
+      shadow:
+        extends: http://vwf.example.com/aframe/shadowComponent.vwf
+        properties:
+          receive: true
 methods:
   initialize:
     body: |

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

@@ -92,6 +92,86 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
             };
 
             this.state.kernel = this.kernel.kernel.kernel;
+
+            this.aframeDef = {
+                'A-BOX':    [
+                    'ambient-occlusion-map', 'ambient-occlusion-map-intensity',
+                    'ambient-occlusion-texture-offset', 'ambient-occlusion-texture-repeat',
+                    'color',  'depth', 'displacement-bias', 'displacement-map',
+                    'displacement-scale', 'displacement-texture-offset',
+                    'displacement-texture-repeat', 'env-map',
+                    'fog', 'height', 'metalness',
+                    'normal-map', 'normal-scale',
+                    'normal-texture-offset', 'normal-texture-repeat',
+                    'repeat', 'roughness', 'segments-depth',
+                    'segments-height', 'segments-width',
+                    'spherical-env-map', 'src', 'width',
+                    'wireframe', 'wireframe-linewidth'],
+
+                'A-SPHERE': [
+                    'ambient-occlusion-map', 'ambient-occlusion-map-intensity',
+                    'ambient-occlusion-texture-offset', 'ambient-occlusion-texture-repeat',
+                    'color', 'displacement-bias', 'displacement-map',
+                    'displacement-scale', 'displacement-texture-offset',
+                    'displacement-texture-repeat', 'env-map',
+                    'fog', 'height', 'metalness',
+                    'normal-map', 'normal-scale',
+                    'normal-texture-offset', 'normal-texture-repeat',
+                    'phi-length', 'phi-start', 'radius', 
+                    'repeat', 'roughness', 'segments-depth',
+                    'segments-height', 'segments-width',
+                    'spherical-env-map', 'src', 
+                    'theta-length', 'theta-start',
+                    'width',  'wireframe', 'wireframe-linewidth'
+                ],
+
+                'A-PLANE': [
+                    'ambient-occlusion-map', 'ambient-occlusion-map-intensity',
+                    'ambient-occlusion-texture-offset', 'ambient-occlusion-texture-repeat',
+                    'color', 'displacement-bias', 'displacement-map',
+                    'displacement-scale', 'displacement-texture-offset',
+                    'displacement-texture-repeat', 'env-map',
+                    'fog', 'height', 'metalness',
+                    'normal-map', 'normal-scale',
+                    'normal-texture-offset', 'normal-texture-repeat',
+                    'repeat', 'roughness',
+                    'segments-height', 'segments-width',
+                    'spherical-env-map', 'src', 'width',
+                    'wireframe', 'wireframe-linewidth'
+                ],
+
+                'A-TEXT': [
+                        'align', 'alpha-test', 'anchor',
+                        'baseline', 'color', 'font',
+                        'font-image', 'height',
+                        'letter-spacing', 'line-height',
+                        'opacity', 'shader',
+                        'side', 'tab-size',
+                        'transparent', 'value',
+                        'white-space', 'width',
+                        'wrap-count', 'wrap-pixels',
+                        'z-offset'
+                    ],
+
+                'A-SKY': [
+                    'color', 'metalness', 'opacity',
+                    'phi-length', 'phi-start', 'radius',
+                    'repeat', 'roughness', 'segments-height',
+                    'segments-width', 'shader',
+                    'side', 'src',
+                    'theta-length', 'theta-start',
+                    'transparent'
+                    ],
+
+                'A-LIGHT': [
+                    'angle', 'color', 'decay', 'distance',
+                    'ground-color', 'intensity', 'penumbra',
+                    'type', 'target'
+                    ]
+            }
+           
+            
+
         },
 
         // == Model API ============================================================================
@@ -198,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;
+
+
+            if (childNode !== undefined) {
+
+                if (childNode.children) {
+
+                    for (var i = 0; i < childNode.children.length; i++) {
+                        this.deletingNode(childNode.children[i]);
+                    }
+                }
 
-                var node = this.state.nodes[nodeID];
-                if (node.aframeObj !== undefined) {
+                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];
             }
 
+        }
         },
 
 
@@ -249,65 +341,19 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
                     switch (propertyName) {
 
-                        // case "interpolation":
-                        //     aframeObject.setAttribute('interpolation', { duration: propertyValue});
-                        //         break;
-
                         case "worldPosition":
-                       
-                        break;
+                            break;
 
                         case "position":
-
-                        this.state.setAFrameProperty('position', propertyValue, aframeObject);
-                            // if (propertyValue.hasOwnProperty('x')) {
-                            //     aframeObject.setAttribute('position', propertyValue)
-                            // } else
-                            //     if (Array.isArray(propertyValue)) {
-                            //         aframeObject.setAttribute('position', { x: propertyValue[0], y: propertyValue[1], z: propertyValue[2] })
-                            //     } else if (typeof propertyValue === 'string') {
-                            //         aframeObject.setAttribute('position', AFRAME.utils.coordinates.parse(propertyValue))
-                            //     }
-
+                            this.state.setAFrameProperty('position', propertyValue, aframeObject);
                             break;
+
                         case "rotation":
-                        this.state.setAFrameProperty('rotation', propertyValue, aframeObject);
-                            // if (Array.isArray(propertyValue)) {
-                            //     aframeObject.setAttribute('rotation', { x: propertyValue[0], y: propertyValue[1], z: propertyValue[2] });
-                            // } else {
-                            //     aframeObject.setAttribute('rotation', AFRAME.utils.coordinates.parse(propertyValue));
-                            // }
+                            this.state.setAFrameProperty('rotation', propertyValue, aframeObject);
                             break;
+
                         case "scale":
                         this.state.setAFrameProperty('scale', propertyValue, aframeObject);
-                            // if (Array.isArray(propertyValue)) {
-                            //     aframeObject.setAttribute('scale', { x: propertyValue[0], y: propertyValue[1], z: propertyValue[2] });
-                            // } else {
-                            //     aframeObject.setAttribute('scale', AFRAME.utils.coordinates.parse(propertyValue));
-                            // }
-                            break;
-
-                        case "color":
-                            aframeObject.setAttribute('color', propertyValue);
-                            break;
-
-                        case "transparent":
-                            aframeObject.setAttribute('material', 'transparent', propertyValue);
-                            break;
-
-                        case "opacity":
-                            aframeObject.setAttribute('material', 'opacity', propertyValue);
-                            break;
-
-                        case "fog":
-                            aframeObject.setAttribute('material', 'fog', propertyValue);
-                            break;
-
-                        case "wireframe":
-                            aframeObject.setAttribute('wireframe', propertyValue);
-                            break;
-                        case "wireframe-linewidth":
-                            aframeObject.setAttribute('wireframeLinewidth', propertyValue);
                             break;
 
                         case "clickable":
@@ -338,17 +384,6 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                         //     break;
 
 
-                        case "src":
-                            aframeObject.setAttribute('src', propertyValue);
-                            break;
-                        case "repeat":
-                            aframeObject.setAttribute('repeat', propertyValue);
-                            break;
-
-                        case "side":
-                            aframeObject.setAttribute('material', {'side': propertyValue});
-                            break;
-
                         // case "look-controls-enabled":
                         //     aframeObject.setAttribute('look-controls', 'enabled', propertyValue);
                         //     break;
@@ -363,22 +398,18 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
                 }
 
-                if (value === undefined && aframeObject.nodeName == "A-SKY") {
+                if (value === undefined && aframeObject.nodeName == "A-ASSET-ITEM") {
                     value = propertyValue;
 
                     switch (propertyName) {
 
-                        case "color":
-                            aframeObject.setAttribute('color',propertyValue);
-                            break;
-
-                        case "side":
-                            aframeObject.setAttribute('side',propertyValue);
-                            break;
+                        case "itemID":
+                            aframeObject.setAttribute('id', propertyValue);
+                        break;
 
-                        case "src":
-                            aframeObject.setAttribute('src',propertyValue);
-                            break;
+                        case "itemSrc":
+                            aframeObject.setAttribute('src', propertyValue);
+                        break;
 
                         default:
                             value = undefined;
@@ -386,22 +417,37 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                     }
                 }
 
-                if (value === undefined && aframeObject.nodeName == "A-TEXT") {
+                if (value === undefined && aframeObject.nodeName == "IMG") {
                     value = propertyValue;
 
                     switch (propertyName) {
 
-                        case "value":
-                            aframeObject.setAttribute('value', propertyValue);
-                            break;
+                        case "itemID":
+                            aframeObject.setAttribute('id', propertyValue);
+                        break;
 
-                        case "color":
-                            aframeObject.setAttribute('color', propertyValue);
-                            break;
-                        case "side":
-                            aframeObject.setAttribute('side', propertyValue);
+                        case "itemSrc":
+                            aframeObject.setAttribute('src', propertyValue);
+                        break;
+
+                        default:
+                            value = undefined;
                             break;
+                    }
+                }
+
+                if (value === undefined && aframeObject.nodeName == "AUDIO") {
+                    value = propertyValue;
 
+                    switch (propertyName) {
+
+                        case "itemID":
+                            aframeObject.setAttribute('id', propertyValue);
+                        break;
+
+                        case "itemSrc":
+                            aframeObject.setAttribute('src', propertyValue);
+                        break;
 
                         default:
                             value = undefined;
@@ -409,6 +455,25 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                     }
                 }
 
+                if (value === undefined && aframeObject.nodeName == "A-SKY") {
+                    value = propertyValue;
+
+                    self.aframeDef['A-SKY'].forEach(element => {
+                        element == propertyName ? aframeObject.setAttribute(element, propertyValue) :
+                            value = undefined;
+                    })
+                }
+
+                if (value === undefined && aframeObject.nodeName == "A-TEXT") {
+                    value = propertyValue;
+
+                    self.aframeDef['A-TEXT'].forEach(element => {
+                        element == propertyName ? aframeObject.setAttribute(element, propertyValue) :
+                            value = undefined;
+                    })
+                   
+                }
+
                 if (value === undefined && aframeObject.nodeName == "A-SCENE") {
                     value = propertyValue;
 
@@ -422,12 +487,16 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                         aframeObject.setAttribute('background', {'transparent': propertyValue} );
                         break;
 
-                        case "fog":
-                            aframeObject.setAttribute('fog', propertyValue);
-                            break;
+                        // case "fog":
+                        //     aframeObject.setAttribute('fog', propertyValue);
+                        //     break;
                         case "assets":
-                            var assetsElement = document.createElement('a-assets');
-                            aframeObject.appendChild(assetsElement);
+                            let assetsEl = document.querySelector('a-assets');
+                            if (!assetsEl) {
+                                let newAssetsEl = document.createElement('a-assets');
+                                aframeObject.appendChild(newAssetsEl);
+                            }
+                            var assetsElement = document.querySelector('a-assets');
                             if (propertyValue) {
 
                                 httpGetJson(propertyValue).then(function (response) {
@@ -455,52 +524,43 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                     }
                 }
 
-                if (value === undefined && aframeObject.nodeName == "A-BOX") {
-                    value = propertyValue;
-
-                    switch (propertyName) {
+   
+   
+                
 
-                        case "depth":
-                            aframeObject.setAttribute('depth', propertyValue);
-                            break;
-                        case "height":
-                            aframeObject.setAttribute('height', propertyValue);
-                            break;
-                        case "width":
-                            aframeObject.setAttribute('width', propertyValue);
-                            break;
 
+                if (value === undefined && aframeObject.nodeName == "A-BOX") {
+                    value = propertyValue;
 
-                        default:
+                    self.aframeDef['A-BOX'].forEach(element => {
+                        element == propertyName ? aframeObject.setAttribute(element, propertyValue) :
                             value = undefined;
-                            break;
-                    }
+                    })
                 }
 
                 if (value === undefined && aframeObject.nodeName == "A-LIGHT") {
                     value = propertyValue;
 
-                    switch (propertyName) {
+                    self.aframeDef['A-LIGHT'].forEach(element => {
+                        element == propertyName ? aframeObject.setAttribute(element, propertyValue) :
+                            value = undefined;
+                    })
 
-                        //"angle", "color", "decay", "distance", "ground-color", "intensity", "penumbra", "type", "target"
-                        case "color":
-                            aframeObject.setAttribute('color', propertyValue);
-                            break;
-                        case "type":
-                            aframeObject.setAttribute('type', propertyValue);
-                            break;
-                        case "intensity":
-                            aframeObject.setAttribute('intensity', propertyValue);
-                            break;
-                        case "distance":
-                            aframeObject.setAttribute('distance', propertyValue);
+                    switch (propertyName) {
+                        case "castShadow":
+                            aframeObject.setAttribute('light', 'castShadow', propertyValue);
                             break;
 
+                        case "shadowCameraVisible":
+                            aframeObject.setAttribute('light', 'shadowCameraVisible', propertyValue);
+                            break;
 
                         default:
                             value = undefined;
-                            break;
+                            break; 
+
                     }
+
                 }
 
                 if (value === undefined && aframeObject.nodeName == "A-GLTF-MODEL") {
@@ -580,34 +640,20 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                 if (value === undefined && aframeObject.nodeName == "A-PLANE") {
                     value = propertyValue;
 
-                    switch (propertyName) {
-
-                        case "height":
-                            aframeObject.setAttribute('height', propertyValue);
-                            break;
-                        case "width":
-                            aframeObject.setAttribute('width', propertyValue);
-                            break;
-
-
-                        default:
+                    self.aframeDef['A-PLANE'].forEach(element => {
+                        element == propertyName ? aframeObject.setAttribute(element, propertyValue) :
                             value = undefined;
-                            break;
-                    }
+                    })
+
                 }
 
                 if (value === undefined && aframeObject.nodeName == "A-SPHERE") {
                     value = propertyValue;
 
-                    switch (propertyName) {
-                        case "radius":
-                            aframeObject.setAttribute('radius', propertyValue);
-                            break;
-
-                        default:
+                    self.aframeDef['A-SPHERE'].forEach(element => {
+                        element == propertyName ? aframeObject.setAttribute(element, propertyValue) :
                             value = undefined;
-                            break;
-                    }
+                    })
                 }
 
 
@@ -720,13 +766,6 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
                     switch (propertyName) {
 
-                        // case "interpolation":
-                        //     var interpolation = aframeObject.getAttribute('interpolation');
-                        //     if (interpolation !== null && interpolation !== undefined) {
-                        //         value = interpolation.duration;
-                        //     }
-                        //     break;
-
                         case "worldPosition":
                         var pos = aframeObject.object3D.getWorldPosition();
                         if (pos !== undefined) {
@@ -754,52 +793,10 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                             }
                             break;
 
-                        case "color":
-                            value = aframeObject.getAttribute('color');
-                            break;
-
-                        case "side":
-                        if (aframeObject.getAttribute('material')) {
-                            value = aframeObject.getAttribute('material').side;
-                        }
-                            break;
-
-                        case "fog":
-                            if (aframeObject.getAttribute('material')) {
-                                value = aframeObject.getAttribute('material').fog;
-                            }
-                            break;
-
-                        case "opacity":
-                            if (aframeObject.getAttribute('material')) {
-                                value = aframeObject.getAttribute('material').opacity;
-                            }
-                            break;
-
-                        case "transparent":
-                            if (aframeObject.getAttribute('material')) {
-                                value = aframeObject.getAttribute('material').transparent;
-                            }
-                            break;
-
-                        case "wireframe":
-                            value = aframeObject.getAttribute('wireframe');
-                            break;
-
-                        case "wireframe-linewidth":
-                            value = aframeObject.getAttribute('wireframeLinewidth');
-                            break;
-
                         case "clickable":
                             value = node.events.clickable;
                             break;
 
-                        case "src":
-                            value = aframeObject.getAttribute('src');
-                            break;
-                        case "repeat":
-                            value = aframeObject.getAttribute('repeat');
-
                         // case "look-controls-enabled":
                         //     var look = aframeObject.getAttribute('look-controls-enabled');
                         //     if (look !== null && look !== undefined) {
@@ -820,12 +817,62 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                     }
                 }
 
+               
+
+                if (value === undefined && aframeObject.nodeName == "A-ASSET-ITEM") {
+
+                    switch (propertyName) {
+                        
+                        case "itemID":
+                            value = aframeObject.getAttribute('id');
+                        break;
+                    
+                        case "itemSrc":
+                            value = aframeObject.getAttribute('src');
+                        break;
+
+                      
+                    }
+                }
+
+                if (value === undefined && aframeObject.nodeName == "IMG") {
+
+                    switch (propertyName) {
+                        
+                        case "itemID":
+                            value = aframeObject.getAttribute('id');
+                        break;
+                    
+                        case "itemSrc":
+                            value = aframeObject.getAttribute('src');
+                        break;
+
+                      
+                    }
+                }
+
+                if (value === undefined && aframeObject.nodeName == "AUDIO") {
+
+                    switch (propertyName) {
+                        
+                        case "itemID":
+                            value = aframeObject.getAttribute('id');
+                        break;
+                    
+                        case "itemSrc":
+                            value = aframeObject.getAttribute('src');
+                        break;
+
+                      
+                    }
+                }
+
                 if (value === undefined && aframeObject.nodeName == "A-SCENE") {
 
                     switch (propertyName) {
-                        case "fog":
-                            value = aframeObject.getAttribute('fog');
-                            break;
+                        // case "fog":
+                        //     value = aframeObject.getAttribute('fog');
+                        //     break;
                         
                         case "color":
                         if (aframeObject.getAttribute('background')) {
@@ -843,88 +890,71 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
                 if (value === undefined && aframeObject.nodeName == "A-SKY") {
                     
-                                        switch (propertyName) {
-                                            case "color":
-                                                value = aframeObject.getAttribute('color');
-                                                break;
-                                            case "side":
-                                                value = aframeObject.getAttribute('side');
-                                                break;
-                                            case "src":
-                                                value = aframeObject.getAttribute('src');
-                                                break;
-                                        }
-                                    }
-
-                if (value === undefined && aframeObject.nodeName == "A-BOX") {
+                    self.aframeDef['A-SKY'].forEach(element => {
+                        if (element == propertyName) {
+                            value = aframeObject.getAttribute(element);
+                        }
+                    })
 
-                    switch (propertyName) {
-                        case "depth":
-                            value = aframeObject.getAttribute('depth');
-                            break;
-                        case "height":
-                            value = aframeObject.getAttribute('height');
-                            break;
-                        case "width":
-                            value = aframeObject.getAttribute('width');
-                            break;
-                    }
                 }
 
+               
+
                 if (value === undefined && aframeObject.nodeName == "A-LIGHT") {
 
-                    //"angle", "color", "decay", "distance", "ground-color", "intensity", "penumbra", "type", "target"
+                    self.aframeDef['A-LIGHT'].forEach(element => {
+                        if (element == propertyName) {
+                            value = aframeObject.getAttribute(element);
+                        }
+                    })
+
                     switch (propertyName) {
-                        case "color":
-                            value = aframeObject.getAttribute('color');
-                            break;
-                        case "type":
-                            value = aframeObject.getAttribute('type');
+                        case "castShadow":
+                        value = aframeObject.getAttribute('light').castShadow;
                             break;
-                        case "distance":
-                            value = aframeObject.getAttribute('distance');
-                            break;
-                        case "intensity":
-                            value = aframeObject.getAttribute('intensity');
+
+                        case "shadowCameraVisible":
+                        value = aframeObject.getAttribute('light').shadowCameraVisible;
                             break;
+
                     }
+
                 }
 
+                if (value === undefined && aframeObject.nodeName == "A-BOX") {
+    
+                    self.aframeDef['A-BOX'].forEach(element => {
+                        if (element == propertyName) {
+                            value = aframeObject.getAttribute(element);
+                        }
+                    })
+            }
+
                 if (value === undefined && aframeObject.nodeName == "A-PLANE") {
 
-                    switch (propertyName) {
-                        case "height":
-                            value = aframeObject.getAttribute('height');
-                            break;
-                        case "width":
-                            value = aframeObject.getAttribute('width');
-                            break;
-                    }
+                   self.aframeDef['A-PLANE'].forEach(element => {
+                        if (element == propertyName) {
+                            value = aframeObject.getAttribute(element);
+                        }
+                    })
                 }
 
                 if (value === undefined && aframeObject.nodeName == "A-SPHERE") {
 
-                    switch (propertyName) {
-                        case "radius":
-                            value = aframeObject.getAttribute('radius');
-                            break;
-                    }
+                    self.aframeDef['A-SPHERE'].forEach(element => {
+                        if (element == propertyName) {
+                            value = aframeObject.getAttribute(element);
+                        }
+                    })
                 }
 
                 if (value === undefined && aframeObject.nodeName == "A-TEXT") {
 
-                    switch (propertyName) {
-                        case "value":
-                            value = aframeObject.getAttribute('value');
-                            break;
-
-                        case "color":
-                            value = aframeObject.getAttribute('color');
-                            break;
-                        case "side":
-                            value = aframeObject.getAttribute('side');
-                            break;
-                    }
+                    self.aframeDef['A-TEXT'].forEach(element => {
+                        if (element == propertyName) {
+                            value = aframeObject.getAttribute(element);
+                        }
+                    })
                 }
 
 
@@ -1074,8 +1104,43 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
             aframeObj = document.createElement('a-scene');
             let assetsElement = document.createElement('a-assets');
             aframeObj.appendChild(assetsElement);
-
             self.state.scenes[node.ID] = aframeObj;
+        } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/a-asset-item.vwf")) {
+
+            let assets = document.querySelector('a-assets');
+            if (assets){
+
+                aframeObj = document.createElement('a-asset-item');
+                aframeObj.setAttribute('id', "item-"+GUID());
+                aframeObj.setAttribute('src', "");
+                aframeObj.setAttribute('crossorigin', "anonymous");
+                assets.appendChild(aframeObj);
+            }
+        
+        } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/a-asset-image-item.vwf")) {
+
+            let assets = document.querySelector('a-assets');
+            if (assets){
+
+                aframeObj = document.createElement('img');
+                aframeObj.setAttribute('id', "item-"+GUID());
+                aframeObj.setAttribute('src', "");
+                aframeObj.setAttribute('crossorigin', "anonymous");
+                assets.appendChild(aframeObj);
+            }
+
+        } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/a-asset-audio-item.vwf")) {
+
+            let assets = document.querySelector('a-assets');
+            if (assets){
+
+                aframeObj = document.createElement('audio');
+                aframeObj.setAttribute('id', "item-"+GUID());
+                aframeObj.setAttribute('src', "");
+                aframeObj.setAttribute('crossorigin', "anonymous");
+                assets.appendChild(aframeObj);
+            }
+
 
         } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/asky.vwf")) {
             aframeObj = document.createElement('a-sky');
@@ -1110,7 +1175,12 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
         } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/aentity.vwf")) {
             aframeObj = document.createElement('a-entity');
         }
-        aframeObj.setAttribute('id', node.ID);
+
+        if (aframeObj.nodeName !== "A-ASSET-ITEM" && aframeObj.nodeName !== "IMG" && aframeObj.nodeName !== "AUIDO"){
+            aframeObj.setAttribute('id', node.ID);
+        }
+
+       
         return aframeObj;
     }
 
@@ -1126,7 +1196,9 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                     }
                     parent.children.push(node.ID);
                     //console.info( "Adding child: " + childID + " to " + nodeID );
+                    if (node.aframeObj.nodeName !== "A-ASSET-ITEM" && node.aframeObj.nodeName !== "IMG" && node.aframeObj.nodeName !== "AUIDO"){
                     parent.aframeObj.appendChild(node.aframeObj);
+                    }
                 }
             }
             if (node.aframeObj.nodeName !== "A-SCENE") {
@@ -1245,7 +1317,21 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
         }
     }
 
- 
+    function GUID() {
+        var S4 = function () {
+            return Math.floor(
+                Math.random() * 0x10000 /* 65536 */
+            ).toString(16);
+        };
+
+        return (
+            S4() + S4() + "-" +
+            S4() + "-" +
+            S4() + "-" +
+            S4() + "-" +
+            S4() + S4() + S4()
+        );
+    }
 
 
 });

support/client/lib/vwf/model/aframe/addon/aframe-components.js

@@ -131,7 +131,7 @@ AFRAME.registerComponent('cursor-listener', {
             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.intersection.object.el.id, "clickEvent")
+                vwf_view.kernel.fireEvent(evt.detail.intersection.object.el.id, "clickEvent", [vwf_view.kernel.moniker()])
             }
 
             //vwf_view.kernel.fireEvent(evt.detail.target.id, "clickEvent")

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

@@ -274,6 +274,83 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                     }
                 }
 
+                if (value === undefined && isAShadowDefinition(node.prototypes)) {
+                    if (aframeObject.el.getAttribute(aframeObject.compName)) {
+
+                        value = propertyValue;
+                        let parentNodeAF = aframeObject.el;
+
+
+                        switch (propertyName) {
+
+                            case "cast":
+                                parentNodeAF.setAttribute('shadow', 'cast', propertyValue);
+                                break;
+    
+                            case "receive":
+                                parentNodeAF.setAttribute('shadow', 'receive', propertyValue);
+                                break;
+
+                            default:
+                                value = undefined;
+                                break;
+                        }
+
+
+                    }
+                }
+
+
+                if (value === undefined && isAMaterialDefinition(node.prototypes)) {
+                    if (aframeObject.el.getAttribute(aframeObject.compName)) {
+
+                        value = propertyValue;
+                        let parentNodeAF = aframeObject.el;
+                        let defs = ['color', 'transparent', 'opacity'];
+
+                        defs.forEach(element => {
+                            element == propertyName ? parentNodeAF.setAttribute('material', element, propertyValue) :
+                                value = undefined;
+                        })
+                    }
+                }
+
+                if (value === undefined && isAFogDefinition(node.prototypes)) {
+                    if (aframeObject.el.getAttribute(aframeObject.compName)) {
+                    
+                        value = propertyValue;
+                        let parentNodeAF = aframeObject.el;
+                        let defs = ['fogType', 'fogColor', 'density', 'near', 'far'];
+
+                        defs.forEach(element => {
+                            if (element == propertyName){
+
+                                switch (element) {
+                    
+                                    case 'fogType':
+                                    parentNodeAF.setAttribute('fog', 'type', propertyValue);
+                                        break;
+
+                                    case 'fogColor':
+                                        parentNodeAF.setAttribute('fog', 'color', propertyValue);
+                                            break;
+
+                                    default:
+                                            value = parentNodeAF.setAttribute('fog', element, propertyValue);
+                                            break;
+                                }
+
+
+                                
+                            } else {
+                                value = undefined
+                            }
+                            // element == propertyName ? parentNodeAF.setAttribute('fog', element, propertyValue) :
+                            //     value = undefined;
+                        })
+                    }
+                }
+
                 if (value === undefined && isARayCasterDefinition(node.prototypes)) {
                     if (aframeObject.el.getAttribute(aframeObject.compName)) {
 
@@ -560,6 +637,59 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                     })
                 }
 
+                
+                if (value === undefined && isAFogDefinition(node.prototypes)) {
+                    value = propertyValue;
+
+                    let parentNodeAF = aframeObject.el;
+                    let defs = ['fogType', 'color', 'density', 'near', 'far'];
+
+                    defs.forEach(element => {
+                        if (element == propertyName) {
+
+
+                            switch (element) {
+
+                                case 'fogType':
+        
+                                    value = parentNodeAF.getAttribute('fog').type;
+                                    break;
+                                
+                                case 'fogColor':
+        
+                                    value = parentNodeAF.getAttribute('fog').color;
+                                    break;
+                                
+                                default:
+                                    value = parentNodeAF.getAttribute('fog').element; 
+                                    break;
+
+                            }
+
+                        }
+                    })
+                }
+
+                if (value === undefined && isAShadowDefinition(node.prototypes)) {
+                    value = propertyValue;
+
+                    // let parentNodeAF = self.state.nodes[node.parentID].aframeObj;
+                    let parentNodeAF = aframeObject.el;
+
+                    switch (propertyName) {
+
+                        case "cast":
+                            value = parentNodeAF.getAttribute(aframeObject.compName).cast;
+                            break;
+
+                        case "receive":
+                            value = parentNodeAF.getAttribute(aframeObject.compName).receive;
+                            break;
+
+
+                    }
+                }
+
 
                 if (value === undefined && isALineDefinition(node.prototypes)) {
                     value = propertyValue;
@@ -626,6 +756,31 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
                 }
 
+                if (value === undefined && isAMaterialDefinition(node.prototypes)) {
+                    value = propertyValue;
+
+                    // let parentNodeAF = self.state.nodes[node.parentID].aframeObj;
+                    let parentNodeAF = aframeObject.el;
+
+                    switch (propertyName) {
+
+                        case "color":
+                            value = parentNodeAF.getAttribute('material').color;
+                            break;
+
+                        case "opacity":
+                            value = parentNodeAF.getAttribute('material').opacity;
+                            break;
+
+                            case "transparent":
+                            value = parentNodeAF.getAttribute('material').transparent;
+                            break;
+                        
+
+                    }
+
+                }
+
                 if (value === undefined && isALinePathDefinition(node.prototypes)) {
                     value = propertyValue;
 
@@ -787,6 +942,16 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
         return found;
     }
 
+    function isAMaterialDefinition(prototypes) {
+        var found = false;
+        if (prototypes) {
+            for (var i = 0; i < prototypes.length && !found; i++) {
+                found = (prototypes[i] == "http://vwf.example.com/aframe/aMaterialComponent.vwf");
+            }
+        }
+        return found;
+    }
+
     function isAViewOffsetCameraDefinition(prototypes) {
         var found = false;
         if (prototypes) {
@@ -808,6 +973,26 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
         return found;
     }
 
+    function isAFogDefinition(prototypes) {
+        var found = false;
+        if (prototypes) {
+            for (var i = 0; i < prototypes.length && !found; i++) {
+                found = (prototypes[i] == "http://vwf.example.com/aframe/aSceneFogComponent.vwf");
+            }
+        }
+        return found;
+    }
+
+    function isAShadowDefinition(prototypes) {
+        var found = false;
+        if (prototypes) {
+            for (var i = 0; i < prototypes.length && !found; i++) {
+                found = (prototypes[i] == "http://vwf.example.com/aframe/shadowComponent.vwf");
+            }
+        }
+        return found;
+    }
+
     function isARayCasterDefinition(prototypes) {
         var found = false;
         if (prototypes) {
@@ -865,7 +1050,7 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
         var sceneEl = document.querySelector('a-scene');
 
         aframeObj.id = node.parentID;
-        aframeObj.el = sceneEl.children[node.parentID];
+       // aframeObj.el = sceneEl.children[node.parentID];
         aframeObj.el = Array.from(sceneEl.querySelectorAll('*')).filter(item => { return item.id == aframeObj.id })[0];
 
 
@@ -892,6 +1077,21 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
             
                     }
 
+        if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/aSceneFogComponent.vwf")) {
+
+            // aframeObj.el.setAttribute(node.type, {});
+
+            aframeObj = {};
+            //var sceneEl = document.querySelector('a-scene');
+    
+            aframeObj.id = node.parentID;
+            aframeObj.el = document.querySelector('a-scene');
+
+            aframeObj.compName = "fog";
+            aframeObj.el.setAttribute('fog', {});
+
+        }
+
         if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/raycasterComponent.vwf")) {
 
 
@@ -901,6 +1101,16 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
         }
 
+        
+
+        if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/shadowComponent.vwf")) {
+            
+            // aframeObj.el.setAttribute(node.type, {});
+            aframeObj.compName = "shadow";
+            aframeObj.el.setAttribute(aframeObj.compName, {});
+
+        }
+
         if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/viewOffsetCamera-component.vwf")) {
             
             // aframeObj.el.setAttribute(node.type, {});
@@ -927,6 +1137,14 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
             
                     }
 
+        if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/aMaterialComponent.vwf")) {
+
+            // aframeObj.el.setAttribute(node.type, {});
+            aframeObj.compName = "material";
+            aframeObj.el.setAttribute(aframeObj.compName, {});
+
+        }
+
         if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/interpolation-component.vwf")) {
 
 

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

@@ -138,6 +138,20 @@ define(["module", "vwf/view"], function (module, view) {
 
         initializedProperty: function (nodeId, propertyName, propertyValue) {
             return this.satProperty(nodeId, propertyName, propertyValue);
+        },
+
+        gotProperty: function (nodeId, propertyName, propertyValue) {
+            var selfs = this;
+
+            var node = this.state.nodes[nodeId];
+
+            if (!(node && node.aframeObj)) {
+                return;
+            }
+
+            
+
+
         },
 
         satProperty: function (nodeId, propertyName, propertyValue) {
@@ -149,6 +163,70 @@ define(["module", "vwf/view"], function (module, view) {
                 return;
             }
 
+            if (node.aframeObj.nodeName == "AUDIO" && propertyName == 'itemSrc') {
+
+                //console.log("sat new item");
+                let elID = '#' + node.aframeObj.getAttribute('id');
+                Object.entries(this.state.nodes).forEach(el => {
+                    let src = el[1].aframeObj.getAttribute('src');
+                    if (src){
+                       // console.log("my: " + src);
+                        if (src == elID)
+                        self.kernel.callMethod(el[0], "updateSrc", [elID])
+                    }
+                })
+
+            }
+
+            if (node.aframeObj.nodeName == "IMG" && propertyName == 'itemSrc') {
+
+                //console.log("sat new item");
+                let elID = '#' + node.aframeObj.getAttribute('id');
+                Object.entries(this.state.nodes).forEach(el => {
+                    let src = el[1].aframeObj.getAttribute('src');
+                    if (src){
+                       // console.log("my: " + src);
+                        if (src == elID)
+                        self.kernel.callMethod(el[0], "updateSrc", [elID])
+                    }
+                })
+
+            }
+
+            if (node.aframeObj.nodeName == "A-ASSET-ITEM" && propertyName == 'itemSrc') {
+
+                //console.log("sat new item");
+                let elID = '#' + node.aframeObj.getAttribute('id');
+                Object.entries(this.state.nodes).forEach(el => {
+                    let src = el[1].aframeObj.getAttribute('src');
+                    let mtl = el[1].aframeObj.getAttribute('mtl');
+                    if (src){
+                       // console.log("my: " + src);
+                        if (src == elID)
+                        self.kernel.callMethod(el[0], "updateModel", [elID])
+                    }
+                    if (mtl){
+                       // console.log("my: " + mtl);
+                        if (mtl == elID)
+                        self.kernel.callMethod(el[0], "updateModelMtl", [elID])
+                    }
+                })
+
+            }
+            
+            //  if (node.aframeObj.nodeName == "A-BOX" && propertyName == 'color') {
+                
+            //     console.log("sat color");
+            //     let materialName = '/' + node.name + '/material';
+            //     let materialID = vwf.find('', materialName)[0];
+            //     if (materialID) {
+
+            //         vwf.setProperty(materialID, propertyName, propertyValue);
+                    
+            //     }  
+
+            // }
+
             // if (propertyName == 'position') {
             //     this.nodes[nodeId].lastTransformStep = vwf.time();
             // }
@@ -169,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)
 
@@ -187,8 +270,9 @@ define(["module", "vwf/view"], function (module, view) {
                     "properties": {
                         "localUrl": '',
                         "remoteUrl": '',
-                        "displayName": randId(),
-                        "sharing": { audio: true, video: true }
+                        "displayName": 'Avatar '+ randId(),
+                        "sharing": { audio: true, video: true },
+                        "selectMode": false
                     }
                 }
 
@@ -209,6 +293,34 @@ define(["module", "vwf/view"], function (module, view) {
             //  if (eventName == "setAvatarPosition") {
             //     vwf_view.kernel.setProperty(avatarName, "position", [eventParameters.x, eventParameters.y, eventParameters.z]);
             // }
+
+            if (eventName == "clickEvent") {
+
+               if (self.kernel.moniker() == eventParameters[0]){
+
+                    let avatar = self.nodes[avatarName];
+                    let mode = vwf.getProperty(avatarName, 'selectMode');
+
+                    if(mode) {
+                        console.log("allow to click!!!")
+                        vwf_view.kernel.setProperty(avatarName, 'selectMode', false);
+
+                        let editorDriver = vwf.views["vwf/view/editor-new"];
+                        if (editorDriver){
+                            let selectSwitch = document.querySelector('#selectNodeSwitch');
+                            const selectSwitchComp = new mdc.iconToggle.MDCIconToggle(selectSwitch); //new mdc.select.MDCIconToggle
+                            selectSwitchComp.on = false;
+
+                            let currentNodeDIV = document.querySelector('#currentNode');
+                            if (currentNodeDIV) currentNodeDIV._setNode(nodeID);
+                            
+
+                        }
+                    }
+               }
+                
+
+            }
         },
 
         ticked: function (vwfTime) {

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

@@ -103,15 +103,23 @@ define(["module", "vwf/view"], function (module, view) {
                             return;
                         }
 
-                        
-            switch (propertyName) {
-                case "color":
-                    if (propertyValue) {
-                       // self.kernel.callMethod (nodeId, 'initLang');
-                      // console.log("sat color "+ propertyValue)
-                    }
-                    break;
-            }
+                    
+            // if (node.name == "material" && propertyName == 'color') {
+    
+            //     console.log("sat color on material");
+            //     // let nodeColor = vwf.getProperty(node.parentID, propertyName);
+             
+
+            // }             
+
+            // switch (propertyName) {
+            //     case "color":
+            //         if (propertyValue) {
+            //            // self.kernel.callMethod (nodeId, 'initLang');
+            //           // console.log("sat color "+ propertyValue)
+            //         }
+            //         break;
+            // }
             
 
         },

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

@@ -182,6 +182,130 @@ define([
                 }
             }
 
+            let createSettings =
+            {
+                $cell: true,
+                $type: "div",
+                class: "propGrid max-width mdc-layout-grid mdc-layout-grid--align-left",
+                $components: [
+                    {
+                        $cell: true,
+                        $type: "section",
+                        $components: [
+                            {
+                                $cell: true,
+                                $type: "h3",
+                                $text:"Create"
+                            },
+                            {
+                                $cell: true,
+                                $type: "div",
+                                class: "mdc-list-group",
+                                $components: [
+                                    {
+                                        $cell: true,
+                                        $type: "h3",
+                                        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'
+                                            })
+                                        
+                                        ]
+                                    }
+
+                                ]
+                            }
+   
+                            
+                        ]
+                    }
+
+                ]
+            }
+
+            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 =
                 {
                     $cell: true,
@@ -326,10 +450,10 @@ define([
                                                             $type: "div",
                                                             class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                                             $components: [
-                                                                self.avatarCardDef("/../assets/avatars/ico/female.jpg", { title: "Human", subtitle: "Female" },
+                                                                self.avatarCardDef("/assets/avatars/ico/female.jpg", { title: "Human", subtitle: "Female" },
                                                                     function (e) {
                                                                         let avatarID = 'avatar-' + self.kernel.moniker();
-                                                                        vwf_view.kernel.callMethod(avatarID, "createAvatarFromGLTF", ["/../assets/avatars/female/avatar1.gltf"]);
+                                                                        vwf_view.kernel.callMethod(avatarID, "createAvatarFromGLTF", ["/assets/avatars/female/avatar1.gltf"]);
                                                                     }
                                                                 )]
                                                         },
@@ -338,10 +462,10 @@ define([
                                                             $type: "div",
                                                             class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                                             $components: [
-                                                                self.avatarCardDef("/../assets/avatars/ico/male.jpg", { title: "Human", subtitle: "Male" },
+                                                                self.avatarCardDef("/assets/avatars/ico/male.jpg", { title: "Human", subtitle: "Male" },
                                                                     function (e) {
                                                                         let avatarID = 'avatar-' + self.kernel.moniker();
-                                                                        vwf_view.kernel.callMethod(avatarID, "createAvatarFromGLTF", ["/../assets/avatars/male/avatar1.gltf"]);
+                                                                        vwf_view.kernel.callMethod(avatarID, "createAvatarFromGLTF", ["/assets/avatars/male/avatar1.gltf"]);
                                                                     }
                                                                 )]
                                                         }
@@ -863,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,
@@ -887,7 +1016,7 @@ define([
                                             $cell: true,
                                             $type: "input",
                                             type: "text",
-                                            value: this._prop.value,
+                                            value: this._prop.getValue(),
                                             onchange: function (e) {
                                                 let propValue = this.value;
                                                 try {
@@ -1156,6 +1285,15 @@ define([
                 let myAvatarName = 'avatar-' + self.kernel.moniker();
                 (myAvatarName == m.name) ? (myClass = "avatarName mdc-typography--subheading2") :
                     myClass = "nodeItem"
+                
+                var nodeName = m.name;
+
+                        let displayName = vwf.getProperty(m.ID, 'displayName');
+                        if (displayName) 
+                        {
+                            nodeName = displayName
+                        } 
+                    
 
                 return {
                     $type: "li",
@@ -1167,7 +1305,7 @@ define([
                         $components: [{
                             $type: 'span',
                             class: myClass,
-                            $text: m.name
+                            $text: nodeName
                         }
                         ],
 
@@ -1371,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', 
@@ -1397,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])
                                         }
-                                    }
+                                    })
+                                    
                                 ]
-                            }
+                            },
                         ]
                     }
 
@@ -1503,7 +1663,6 @@ define([
                         return (!this._displayedProperties[prop[1].prop.name]) ? (this._displayedProperties[prop[1].prop.name] = prop[1].prototype, true) : (false);
                     };
                     let props = Object.entries(getProperties.call(self, self.kernel, node.extendsID)).filter(filterFunction.bind(this));
-
                     return props
                 },
                 $update: function () {
@@ -1614,7 +1773,23 @@ define([
                                             $type: "span",
                                             $init: function () {
                                                 let node = self.nodes[this._currentNode];
-                                                if (node) this.$text = node.name
+                                               
+
+                                                if (node) {
+                                                    let displayName = vwf.getProperty(node.ID, 'displayName');
+                                                    if (displayName) 
+                                                    {
+                                                        this.$text = displayName
+                                                    } else {
+                                                        this.$text = node.name;
+                                                    }
+                                                }
+                                                
+                                                
+                                                
+
+                                               
+                                                //console.log(node.properties.displayName)
                                             },
                                             class: "mdc-list-item__text mdc-typography--headline"
                                             //<h1 class="mdc-typography--display4">Big header</h1>
@@ -1766,14 +1941,14 @@ define([
                                 document.getElementById('picker-indicator'),
                                 mouseSlide, mousePicker
                             );
-                            if (myEl._propName == 'color') {
-
+                            if (myEl._propName.toLowerCase().includes('color')) {
+                               
                                 // console.log(hex);    
                                 document.querySelector('#propAceEditor').env.editor.setValue(JSON.stringify(hex));
                                 self.kernel.setProperty(myEl._editorNode, myEl._propName, hex);
                             }
                         });
-                    if (myEl._propName == 'color') {
+                    if (myEl._propName.toLowerCase().includes('color')) {
                         cp.setHex(JSON.parse(myEl._prop.body));
                     }
                 },
@@ -1857,7 +2032,7 @@ define([
                     var livePropertyComponent = {}
 
                     if (this._prop.type == 'simple') {
-                        if (this._propName == 'color') {
+                        if (this._propName.toLowerCase().includes('color')) {
                             livePropertyComponent = colorPickerComponent
                         }
                         
@@ -2648,6 +2823,35 @@ define([
                                         ]
 
                                     },
+
+                                    {
+                                        $cell: true,
+                                        $type: "a",
+                                        class: "mdc-list-item",
+                                        $href: "#",
+                                        onclick: function (e) {
+                                            //self.currentNodeID = m.ID;
+
+                                            // document.querySelector('#clientsList')._setClientNodes(self.nodes["http://vwf.example.com/clients.vwf"]);
+                                            // document.querySelector('#clientsWindow').style.visibility = 'visible';
+                                            let sideBar = document.querySelector('#sideBar');
+                                            sideBar._sideBarComponent = createSettings;
+
+                                            drawer.open = !drawer.open
+                                            document.querySelector('#sideBar').style.visibility = 'visible';
+                                        },
+                                        $components: [{
+                                            $type: "i",
+                                            class: "material-icons mdc-list-item__start-detail",
+                                            'aria-hidden': "true",
+                                            $text: "create"
+                                        },
+                                        {
+                                            $text: "Create"
+                                        }]
+
+                                    },
+
                                     {
                                         $cell: true,
                                         $type: "a",
@@ -2837,10 +3041,105 @@ define([
                             $type: "span",
                             class: "mdc-toolbar__title catalog-title",
                             $text: "LiveCoding.space"
-                        }
+                        },
+
+                        {
+                            $type: "a",
+                            href: "#",
+                            class: "material-icons mdc-toolbar__icon toggleCreate",
+                            $text: "apps",
+                            'aria-label': "More"
+                        },
+                        {
+                            $type: "div",
+                            class: "mdc-menu-anchor",
+                            $components: [
+                                {
+                                    $type: "div",
+                                    class: "mdc-simple-menu",
+                                    "tabindex": "-1",
+                                    id: "create-menu",
+                                    $init: function(){
+
+                                    //var menuEl = document.querySelector('#demo-menu');
+                                    var menu = new mdc.menu.MDCSimpleMenu(this);
+                                    var toggle = document.querySelector('.toggleCreate');
+                                    toggle.addEventListener('click', function() {
+                                        menu.open = !menu.open;
+                                    });
+                                    
+                                    },
+                                    style: "transform-origin: right top 0px; right: 0px; top: 0px; transform: scale(0, 0);",
+                                    $components: [
+                                       { 
+                                        $type: "ul",
+                                        class: "mdc-simple-menu__items mdc-list",
+                                        role: "menu",
+                                        'aria-hidden': "true",
+                                        style: "transform: scale(1, 1);",
+                                        $components: [
+                                            {
+                                                $type: "li",
+                                                class: "mdc-list-item",
+                                                role: "menuitem",
+                                                tabindex: "0",
+                                                $text: "Apps"
+                                            }
+                                        ]
+                                    }
+                                    ]
+                                }
+                            ]
+                        },
+                        widgets.icontoggle({
+                            'styleClass': "mdc-toolbar__icon",
+                            'id': "selectNodeSwitch",
+                            'label': 'select',
+                            'on': JSON.stringify({"content": "radio_button_checked", "label": "Select"}),
+                            'off': JSON.stringify({"content": "radio_button_unchecked", "label": "Unselect"}),
+                            'state': false,
+                            'init': function(){
+                        
+                                this.addEventListener('MDCIconToggle:change', (e) => {
+                                    
+                                    let avatarID = 'avatar-'+ vwf.moniker_;
+                                    let avatarNode = self.nodes['avatar-'+ vwf.moniker_];
+                                    let mode = JSON.parse(avatarNode.properties.selectMode.getValue());
+
+                                    if (mode) {
+
+                                        console.log("unselect");
+                                        vwf_view.kernel.setProperty(avatarID, "selectMode", false);
 
+                                    } else {
+
+                                        console.log("select")
+                                        vwf_view.kernel.setProperty(avatarID, "selectMode", true);
+                                    }
+
+                                  });
+                                
+                            }
+                        })
+                       
                     ]
-                }]
+                },
+                {
+                    $type: "section",
+                    class: "mdc-toolbar__section mdc-toolbar__section--align-end",
+                    $components: [
+                        {
+                            $type: "a",
+                            href: "#",
+                            class: "material-icons mdc-toolbar__icon toggle",
+                            $text: "help",
+                            'aria-label': "Help"
+
+
+                        }
+                    ]
+                }
+            ]
 
             };
 

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

@@ -155,6 +155,10 @@
         background-size: 100%;
       }
 
+      .create-card {
+        cursor:pointer;
+      }
+
   /*    .avatar-card .mdc-card__primary,
       .avatar-card .mdc-card__actions {
         background: rgba(0, 0, 0, .4);
@@ -178,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

@@ -30,6 +30,152 @@ define(function () {
 
         }
 
+        simpleCard(obj){
+            let style =  'background-image: url(' + obj.imgSrc + '); background-size: cover; background-repeat: no-repeat; height:' + obj.imgHeight + ';';
+            var addonClass = obj.addonClass;
+            if (!addonClass){
+                addonClass = ''
+            }
+
+            return  {
+                $cell: true,
+                $type: "div",
+                $components:[
+                    {
+                        $cell: true,
+                        $type: "div",
+                        class: "mdc-card" +' '+ addonClass,
+                        onclick: obj.onclickfunc,
+                        $components:[
+                            {
+                                $cell: true,
+                                $type: "section",
+                                class: "mdc-card__media",
+                                style:  style
+                            },
+                            {
+                                $cell: true,
+                                $type: "section",
+                                class: "mdc-card__supporting-text",
+                                $text: obj.text
+                            }
+                        ]
+                    }
+                ]
+            }
+        }
+
+        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,
+                $type: "div",
+                $components:[
+                    {
+                        $cell: true,
+                        $type: "div",
+                        class: "mdc-card",
+                        $components:[
+                            {
+                                $cell: true,
+                                $type: "div",
+                                class: "mdc-card__horizontal-block",
+                                $components:[
+                                    {
+                                        $cell: true,
+                                        $type: "section",
+                                        class: "mdc-card__primary",
+                                        $components:[
+                                            {
+                                                $cell: true,
+                                                $type: "h1",
+                                                class: "mdc-card__title mdc-card__title--large",
+                                                $text: obj.title
+                                            },
+                                            {
+                                                $cell: true,
+                                                $type: "h2",
+                                                class: "mdc-card__subtitle",
+                                                $text: obj.subTitle
+                                            }
+                                        ]
+                                    },
+                                    {
+                                        
+                                            $cell: true,
+                                            $type: "img",
+                                            class: "",
+                                            src: obj.imgSrc
+                                        
+                                    }
+                                ]
+                            },
+                            {
+                                $cell: true,
+                                $type: "section",
+                                class: "mdc-card__actions",
+                                $components:[
+                                    {
+                                        $cell: true,
+                                        $type: "button",
+                                        class: "mdc-button mdc-button--compact mdc-card__action",
+                                        $text: obj.actionLabel
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            }
+        }
+
         buttonStroked(obj){
             return {
                 $cell: true,
@@ -173,7 +319,7 @@ define(function () {
             return {
                 $cell: true,
                 $type: "i",
-                class: "mdc-icon-toggle material-icons",
+                class: "mdc-icon-toggle material-icons "+ obj.styleClass,
                 role: "button",
                 $text: obj.label,
                 id: obj.id,
@@ -185,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/a-asset-audio-item.vwf.yaml

@@ -0,0 +1,7 @@
+# https://aframe.io/docs/0.5.0/primitives/a-cursor.html
+---
+extends: http://vwf.example.com/aframe/node.vwf
+type: "audio"
+properties:
+  itemID:
+  itemSrc:

support/proxy/vwf.example.com/aframe/a-asset-image-item.vwf.yaml

@@ -0,0 +1,7 @@
+# https://aframe.io/docs/0.5.0/primitives/a-cursor.html
+---
+extends: http://vwf.example.com/aframe/node.vwf
+type: "image"
+properties:
+  itemID:
+  itemSrc:

support/proxy/vwf.example.com/aframe/a-asset-item.vwf.yaml

@@ -0,0 +1,7 @@
+# https://aframe.io/docs/0.5.0/primitives/a-cursor.html
+---
+extends: http://vwf.example.com/aframe/node.vwf
+type: "a-asset-item"
+properties:
+  itemID:
+  itemSrc:

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

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

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

@@ -0,0 +1,10 @@
+#https://aframe.io/docs/0.6.0/components/line.html#properties_visible
+---
+extends: http://vwf.example.com/aframe/aentityComponent.vwf
+type: "component"
+properties:
+  fogType:
+  fogColor:
+  density:
+  near:
+  far:

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

@@ -3,9 +3,32 @@
 extends: http://vwf.example.com/aframe/aentity.vwf
 type: "a-box"
 properties:
+  ambient-occlusion-map:
+  ambient-occlusion-map-intensity:
+  ambient-occlusion-texture-offset:
+  ambient-occlusion-texture-repeat:
+  color:
   depth:
+  displacement-bias:
+  displacement-map:
+  displacement-scale:
+  displacement-texture-offset:
+  displacement-texture-repeat:
+  env-map:
+  fog:
   height:
-  width:
+  metalness:
+  normal-map:
+  normal-scale:
+  normal-texture-offset:
+  normal-texture-repeat:
+  repeat: 
+  roughness:
   segments-depth:
   segments-height:
-  segments-width:
+  segments-width:
+  spherical-env-map:
+  src:
+  width:
+  wireframe:
+  wireframe-linewidth:

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

@@ -0,0 +1,10 @@
+this.updateModel = function(srcID){
+
+    if (srcID) {
+        this.src = "";
+        this.src = srcID;
+    }
+    
+
+}
+

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

@@ -3,4 +3,10 @@
 extends: http://vwf.example.com/aframe/aentity.vwf
 type: "a-collada-model"
 properties:
-  src:
+  src:
+methods:
+  updateModel:
+    parameters:
+      - obj
+scripts:
+  - source: "http://vwf.example.com/aframe/acolladamodel.js"

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

@@ -22,3 +22,12 @@ this.showCloseGizmo = function () {
         }
     }
 }
+
+this.updateSrc = function(srcID){
+
+    if (srcID) {
+        this.src = "";
+        this.src = srcID;
+    }
+    
+}

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

@@ -3,28 +3,22 @@
 extends: http://vwf.example.com/aframe/node.vwf
 type: "a-entity"
 properties:
-  opacity:
-  transparent:
-  color:
   position:
   rotation:
   scale:
-  wireframe:
-  wireframe-linewidth:
   clickable:
-  src:
-  repeat:
-  fog:
   displayName:
   visible:
   edit:
   worldPosition:
-  side:
   osc:
 methods:
   setGizmoMode:
     parameters:
       - mode
   showCloseGizmo:
+  updateSrc:
+    parameters:
+      - src
 scripts:
   - source: "http://vwf.example.com/aframe/aentity.js"

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

@@ -0,0 +1,10 @@
+this.updateModel = function(srcID){
+
+    if (srcID) {
+        this.src = "";
+        this.src = srcID;
+    }
+    
+
+}
+

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

@@ -3,4 +3,10 @@
 extends: http://vwf.example.com/aframe/aentity.vwf
 type: "a-gltf-model"
 properties:
-  src:
+  src:
+methods:
+  updateModel:
+    parameters:
+      - obj
+scripts:
+  - source: "http://vwf.example.com/aframe/agltfmodel.js"

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

@@ -11,4 +11,6 @@ properties:
   intensity:
   penumbra:
   type:
-  target:
+  target:
+  castShadow:
+  shadowCameraVisible:

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

@@ -0,0 +1,19 @@
+this.updateModel = function(srcID){
+
+    if (srcID) {
+        this.src = "";
+        this.src = srcID;
+    }
+    
+
+}
+
+this.updateModelMtl = function(srcID){
+
+    if (srcID) {
+        this.mtl = "";
+        this.mtl = srcID;
+    }
+
+
+}

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

@@ -4,4 +4,13 @@ extends: http://vwf.example.com/aframe/aentity.vwf
 type: "a-obj-model"
 properties:
   src:
-  mtl:
+  mtl:
+methods:
+  updateModel:
+    parameters:
+      - obj
+  updateModelMtl:
+    parameters:
+      - mtl
+scripts:
+  - source: "http://vwf.example.com/aframe/aobjmodel.js"

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

@@ -3,7 +3,30 @@
 extends: http://vwf.example.com/aframe/aentity.vwf
 type: "a-plane"
 properties:
+  ambient-occlusion-map:
+  ambient-occlusion-map-intensity:
+  ambient-occlusion-texture-offset:
+  ambient-occlusion-texture-repeat:
+  color:
+  displacement-bias:
+  displacement-map:
+  displacement-scale:
+  displacement-texture-offset:
+  displacement-texture-repeat:
+  env-map:
+  fog:
   height:
-  width:
+  metalness:
+  normal-map:
+  normal-scale:
+  normal-texture-offset:
+  normal-texture-repeat:
+  repeat: 
+  roughness:
+  segments-height:
+  segments-width:
+  spherical-env-map:
   src:
-  repeat:
+  width:
+  wireframe:
+  wireframe-linewidth:

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

@@ -1,4 +1,4 @@
-this.initialize = function() {
+this.initialize = function () {
     this.future(0).clientWatch();
 };
 
@@ -28,25 +28,277 @@ this.clientWatch = function () {
                         //console.log(node.id + " needed to delete!");
                         self.children.delete(self.children[node.id]);
                         //'gearvr-'
-                        let controllerVR = self.children['gearvr-'+ node.id.slice(7)];
-                        if (controllerVR){
+                        let controllerVR = self.children['gearvr-' + node.id.slice(7)];
+                        if (controllerVR) {
                             self.children.delete(controllerVR);
                         }
 
-                        let wmrvR = self.children['wmrvr-right-'+ node.id.slice(7)];
-                        if (wmrvR){
+                        let wmrvR = self.children['wmrvr-right-' + node.id.slice(7)];
+                        if (wmrvR) {
                             self.children.delete(wmrvR);
                         }
-                        
-                        let wmrvL = self.children['wmrvr-left-'+ node.id.slice(7)];
-                        if (wmrvL){
+
+                        let wmrvL = self.children['wmrvr-left-' + node.id.slice(7)];
+                        if (wmrvL) {
                             self.children.delete(wmrvL);
                         }
-                        
+
                     }
                 }
             });
-     }
+        }
     }
-    this.future(5).clientWatch(); 
+    this.future(5).clientWatch();
 };
+
+this.sphereProto = function () {
+
+    let node = {
+        "extends": "http://vwf.example.com/aframe/asphere.vwf",
+        "properties": {
+            "displayName": "sphere",
+            "color": "white",
+            "radius": 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.cubeProto = function () {
+
+    let node = {
+        "extends": "http://vwf.example.com/aframe/abox.vwf",
+        "properties": {
+            "displayName": "cube",
+            "color": "white",
+            "height": 1,
+            "width": 1,
+            "depth": 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.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;
+
+
+    let myAvatar = this.children[avatar];
+    let cursorNode = myAvatar.avatarNode.myHead.myCursor.vis;
+
+    if (cursorNode) {
+        position = cursorNode.worldPosition;
+        //console.log(position);
+    }
+
+    if (!name) {
+        nodeName = this.GUID();
+    }
+
+    var newNode = {};
+
+    switch (type) {
+
+        case "cube":
+            newNode = this.cubeProto();
+            break;
+
+        case "sphere":
+            newNode = this.sphereProto();
+            break;
+
+        case "plane":
+            newNode = this.planeProto();
+            break;
+
+        case "light":
+            newNode = this.lightProto(params);
+            break;
+            
+        default:
+            newNode = undefined;
+            break;
+    }
+
+    if (newNode) {
+        newNode.properties.position = position;
+        this.children.create(nodeName, newNode);
+    }
+
+}
+
+
+this.GUID = function () {
+    var self = this;
+    var S4 = function () {
+        return Math.floor(
+            self.random() * 0x10000 /* 65536 */
+        ).toString(16);
+    };
+
+    return (
+        S4() + S4() + "-" +
+        S4() + "-" +
+        S4() + "-" +
+        S4() + "-" +
+        S4() + S4() + S4()
+    );
+}
+
+this.smallRandomId = function()  {
+    return '_' + this.random().toString(36).substr(2, 9);
+}
+
+this.assetImgProto = function () {
+
+    let node = {
+        "extends": "http://vwf.example.com/aframe/a-asset-image-item.vwf",
+        "properties": {
+        },
+    }
+    return node
+}
+
+
+
+this.createAssetItemImg = function(){
+
+    console.log("create new asset item for img");
+
+    let nodeName = "asset-item-img-" + this.smallRandomId();
+    let newNode = {
+        "extends": "http://vwf.example.com/aframe/a-asset-image-item.vwf",
+        "properties": {
+            itemID:  nodeName,
+            itemSrc: ""
+        }
+    }
+
+    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

@@ -3,11 +3,27 @@
 extends: http://vwf.example.com/aframe/node.vwf
 type: "a-scene"
 properties:
-  fog:
   assets:
   color:
   transparent:
 methods:
   clientWatch:
+  GUID:
+  createPrimitive:
+    parameters:
+      - type
+      - avatar
+      - name
+      - node
+  createAssetItemImg:
+  planeProto:
+  cubeProto:
+  sphereProto:
+  lightProto:
+     parameters:
+      - lightType
+  deleteNode:
+    parameters:
+      - nodeName
 scripts:
 - source: "http://vwf.example.com/aframe/ascene.js"

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

@@ -4,5 +4,18 @@ extends: http://vwf.example.com/aframe/aentity.vwf
 type: "a-sky"
 properties:
   color:
+  metalness:
+  opacity:
+  phi-length:
+  phi-start:
+  radius:
+  repeat:
+  roughness:
+  segments-height:
+  segments-width:
+  shader:
   side:
-  src:
+  src:
+  theta-length:
+  theta-start:
+  transparent:

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

@@ -3,4 +3,36 @@
 extends: http://vwf.example.com/aframe/aentity.vwf
 type: "a-sphere"
 properties:
-  radius:
+  ambient-occlusion-map:
+  ambient-occlusion-map-intensity:
+  ambient-occlusion-texture-offset:
+  ambient-occlusion-texture-repeat:
+  color:
+  displacement-bias:
+  displacement-map:
+  displacement-scale:
+  displacement-texture-offset:
+  displacement-texture-repeat:
+  env-map:
+  fog:
+  height:
+  metalness:
+  normal-map:
+  normal-scale:
+  normal-texture-offset:
+  normal-texture-repeat:
+  phi-length:
+  phi-start:
+  radius: 
+  repeat:
+  roughness:
+  segments-depth:
+  segments-height:
+  segments-width:
+  spherical-env-map:
+  src: 
+  theta-length:
+  theta-start:
+  width:
+  wireframe:
+  wireframe-linewidth:

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

@@ -3,6 +3,24 @@
 extends: http://vwf.example.com/aframe/aentity.vwf
 type: "a-text"
 properties:
-  value:
+  align:
+  alpha-test:
+  anchor:
+  baseline:
   color:
-  side:
+  font:
+  font-image:
+  height:
+  letter-spacing:
+  line-height:
+  opacity:
+  shader:
+  side:
+  tab-size:
+  transparent:
+  value:
+  white-space:
+  width:
+  wrap-count:
+  wrap-pixels:
+  z-offset:

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

@@ -10,6 +10,7 @@ properties:
     sharing: { audio: true, video: true }
 methods:
     initialize:
+    selectMode:
     updateAvatar:
     showHideAvatar:
         parameters:

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

@@ -0,0 +1,7 @@
+#https://aframe.io/docs/0.6.0/components/line.html#properties_visible
+---
+extends: http://vwf.example.com/aframe/aentityComponent.vwf
+type: "component"
+properties:
+  cast:
+  receive: