add a-asset-item

public/aframe2/assets.json

@@ -6,14 +6,6 @@
     "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",

public/aframe2/index.vwf.yaml

@@ -7,6 +7,16 @@ properties:
   transparent: true
   assets: "assets.json"
 children:
+  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:

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

@@ -287,17 +287,17 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                             // }
                             break;
 
-                        case "color":
-                            aframeObject.setAttribute('color', propertyValue);
-                            break;
+                        // case "color":
+                        //     aframeObject.setAttribute('color', propertyValue);
+                        //     break;
 
-                        case "transparent":
-                            aframeObject.setAttribute('material', 'transparent', propertyValue);
-                            break;
+                        // case "transparent":
+                        //     aframeObject.setAttribute('material', 'transparent', propertyValue);
+                        //     break;
 
-                        case "opacity":
-                            aframeObject.setAttribute('material', 'opacity', propertyValue);
-                            break;
+                        // case "opacity":
+                        //     aframeObject.setAttribute('material', 'opacity', propertyValue);
+                        //     break;
 
                         case "fog":
                             aframeObject.setAttribute('material', 'fog', propertyValue);
@@ -363,6 +363,25 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
                 }
 
+                if (value === undefined && aframeObject.nodeName == "A-ASSET-ITEM") {
+                    value = propertyValue;
+
+                    switch (propertyName) {
+
+                        case "itemID":
+                            aframeObject.setAttribute('id', propertyValue);
+                        break;
+
+                        case "itemSrc":
+                            aframeObject.setAttribute('src', propertyValue);
+                        break;
+
+                        default:
+                            value = undefined;
+                            break;
+                    }
+                }
+
                 if (value === undefined && aframeObject.nodeName == "A-SKY") {
                     value = propertyValue;
 
@@ -429,8 +448,12 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                             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) {
@@ -473,6 +496,20 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                             aframeObject.setAttribute('width', propertyValue);
                             break;
 
+                        case "color":
+                           
+                            // let materialName = '/' + node.name + '/material';
+                            // let materialID = vwf.find('', materialName)[0];
+                            // if (materialID) {
+                            //     //self.kernel.setProperty(materialID, 'color', propertyValue)
+                            // }   else {
+                            //     aframeObject.setAttribute('color', propertyValue);
+                            // }
+                            
+                            aframeObject.setAttribute('color', propertyValue);
+
+                            break;
+
 
                         default:
                             value = undefined;
@@ -757,9 +794,7 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                             }
                             break;
 
-                        case "color":
-                            value = aframeObject.getAttribute('color');
-                            break;
+                       
 
                         case "side":
                         if (aframeObject.getAttribute('material')) {
@@ -773,17 +808,22 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                             }
                             break;
 
-                        case "opacity":
-                            if (aframeObject.getAttribute('material')) {
-                                value = aframeObject.getAttribute('material').opacity;
-                            }
-                            break;
+                         // case "color":
+                        //     value = aframeObject.getAttribute('color');
+                        //     break;
 
-                        case "transparent":
-                            if (aframeObject.getAttribute('material')) {
-                                value = aframeObject.getAttribute('material').transparent;
-                            }
-                            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');
@@ -823,6 +863,24 @@ 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 == "A-SCENE") {
 
                     switch (propertyName) {
@@ -870,6 +928,12 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                             break;
                         case "width":
                             value = aframeObject.getAttribute('width');
+                            break;
+                        case "color":
+                            value = aframeObject.getAttribute('color');
+
+
+
                             break;
                     }
                 }
@@ -1080,8 +1144,17 @@ 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', "");
+                assets.appendChild(aframeObj);
+            }
 
         } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/asky.vwf")) {
             aframeObj = document.createElement('a-sky');
@@ -1116,7 +1189,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.setAttribute('id', node.ID);
+        }
+
+       
         return aframeObj;
     }
 
@@ -1132,7 +1210,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"){
                     parent.aframeObj.appendChild(node.aframeObj);
+                    }
                 }
             }
             if (node.aframeObj.nodeName !== "A-SCENE") {
@@ -1251,7 +1331,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/aframeComponent.js

@@ -274,6 +274,25 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                     }
                 }
 
+                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 && isARayCasterDefinition(node.prototypes)) {
                     if (aframeObject.el.getAttribute(aframeObject.compName)) {
 
@@ -626,6 +645,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 +831,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) {
@@ -927,6 +981,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,41 @@ define(["module", "vwf/view"], function (module, view) {
                 return;
             }
 
+
+            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], "updateModelObj", [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();
             // }

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/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/abox.vwf.yaml

@@ -8,4 +8,5 @@ properties:
   width:
   segments-depth:
   segments-height:
-  segments-width:
+  segments-width:
+  color:

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

@@ -3,9 +3,6 @@
 extends: http://vwf.example.com/aframe/node.vwf
 type: "a-entity"
 properties:
-  opacity:
-  transparent:
-  color:
   position:
   rotation:
   scale:

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

@@ -0,0 +1,19 @@
+this.updateModelObj = 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:
+  updateModelObj:
+    parameters:
+      - obj
+  updateModelMtl:
+    parameters:
+      - mtl
+scripts:
+  - source: "http://vwf.example.com/aframe/aobjmodel.js"