Merge remote-tracking branch 'upstream/lcs-v0.7.5'

package.json

@@ -1,7 +1,7 @@
 {
   "name": "livecodingspace",
   "description": "LiveCoding.Space",
-  "version": "0.7.2",
+  "version": "0.7.5",
   "author": "Nikolai Suslov",
   "homepage": "https://livecoding.space",
   "repository": {

public/core/app.js

@@ -245,6 +245,13 @@ class App {
       recall, 1000)
   }
 
+  get streamMsg(){
+    return this.config.streamMsg
+  }
+
+  set streamMsg(value){
+    this.config.streamMsg = value
+  }
 
   get isLuminary() {
 
@@ -1248,7 +1255,7 @@ class App {
   async loadIndexLibs() {
 
     return loadjs([
-      '/lib/ui/cell.js',
+      '/lib/ui/cell.min.js',
       '/lib/ui/treeview/treeview.min.css',
       '/lib/ui/treeview/treeview.min.js',
       '/lib/ui/mdc/dist/material-components-web.min.css',
@@ -1553,7 +1560,7 @@ class App {
 
     const confLibsDefaults = {
       '/drivers/model/aframe':[
-          '/drivers/model/aframe/aframe-master.js',
+          '/drivers/model/aframe/aframe-master.min.js',
           '/drivers/model/aframe/addon/SkyShader.js',
           '/drivers/model/aframe/addon/BVHLoader.js',
           '/drivers/model/aframe/addon/TransformControls.js',
@@ -1574,7 +1581,7 @@ class App {
         '/drivers/view/webrtc/adapter-latest.js'
       ],
       '/drivers/view/editor': [
-        '/lib/ui/cell.js',
+        '/lib/ui/cell.min.js',
         '/lib/ui/treeview/treeview.min.css',
         '/lib/ui/treeview/treeview.min.js',
         '/lib/ui/mdc/dist/material-components-web.min.css',
@@ -1589,7 +1596,9 @@ class App {
         '/drivers/view/editor/draggabilly/draggabilly.pkgd.js',
         '/drivers/view/editor/colorpicker/colorpicker.min.js',
         '/drivers/view/editor/colorpicker/themes.css',
-        '/drivers/view/editor/editorLive.css'
+        '/drivers/view/editor/editorLive.css',
+        '/lib/ui/tippyjs/popperjs/popper.min.js',
+        '/lib/ui/tippyjs/dist/tippy-bundle.umd.min.js'
       ],
         '/drivers/view/aframe-ar-driver':[
           '/drivers/view/arjs/aframe-ar.js'
@@ -1599,7 +1608,11 @@ class App {
       ],
       '/drivers/view/osc':[
         '/drivers/view/oscjs/osc-browser.min.js'
+      ],
+      '/drivers/view/tone':[
+        '/drivers/view/tonejs/Tone.js'
       ]
+      
     }
 
 

public/core/vwf.js

@@ -42,8 +42,8 @@ class VWF {
         this.isLuminary = connectionConf.luminary;
         this.isLuminaryGlobalHB = connectionConf.luminaryHB;
         this.luminaryGlobalHBPath = connectionConf.luminaryGlobalHBPath;
-        
-        
+
+
         this.luminary = new Luminary;
         this.reflectorClient = new ReflectorClient;
         this.virtualTime = new VirtualTime;
@@ -62,7 +62,7 @@ class VWF {
 
         /// Default configuration for all environments.
 
-        this.configuration =  {
+        this.configuration = {
             "log-level": "info",                  // logger threshold
             "random-seed": +new Date,             // pseudorandom number generator seed
             "randomize-ids": true,               // randomize IDs to discourage assumptions about ID allocation
@@ -71,7 +71,7 @@ class VWF {
             "load-timeout": 30                   // resource load timeout in seconds
         }
 
-        
+
         //undefined; // require( "vwf/configuration" ).active; // "active" updates in place and changes don't invalidate the reference  // TODO: assign here after converting vwf.js to a RequireJS module and listing "vwf/configuration" as a dependency
 
         /// Kernel utility functions and objects.
@@ -88,11 +88,11 @@ class VWF {
         this.utility = new Utility;
 
         this.viewModule = new Fabric({
-            id:"vwf/view"
+            id: "vwf/view"
         }, 'View');
 
         this.modelModule = new Fabric({
-            id:"vwf/model"
+            id: "vwf/model"
         }, 'Model');
 
 
@@ -102,7 +102,7 @@ class VWF {
         /// 
         /// @private
 
-        this.logger = (new Logger).for("vwf", this, this.configuration["log-level"] );
+        this.logger = (new Logger).for("vwf", this, this.configuration["log-level"]);
 
         //undefined; // require( "logger" ).for( undefined, this );  // TODO: for( "vwf", ... ), and update existing calls  // TODO: assign here after converting vwf.js to a RequireJS module and listing "vwf/logger" as a dependency
 
@@ -823,6 +823,10 @@ class VWF {
                     this.globals[nodeID] = undefined;
                 }
 
+                //FIX!!!
+                // if (parentNode && Object.keys(parentNode.childsDeleted).includes(nodeName))
+                //     delete parentNode.childsDeleted[nodeName]
+
                 // Add the node to the registry.
 
                 return this.existing[nodeID] = {
@@ -1047,7 +1051,7 @@ class VWF {
 
         var initializers = {
             model: [
-                 {
+                {
                     library: "/core/vwf/model/ohm",
                     active: true
                 },
@@ -1107,71 +1111,71 @@ class VWF {
         //     resolve(this.driverConfiguration);
         // });
 
-            let configLibraries = this.driverConfiguration;
+        let configLibraries = this.driverConfiguration;
 
-            if (configLibraries && typeof configLibraries == "object") {
-                if (typeof configLibraries.configuration == "object") {
-                    applicationConfig = configLibraries.configuration;
+        if (configLibraries && typeof configLibraries == "object") {
+            if (typeof configLibraries.configuration == "object") {
+                applicationConfig = configLibraries.configuration;
+            }
+            Object.keys(configLibraries).forEach(function (libraryType) {
+                if (libraryType == 'info' && configLibraries[libraryType]["title"]) {
+                    //jQuery('title').html(configLibraries[libraryType]["title"]);
+                    document.querySelector('title').innerHTML = configLibraries[libraryType]["title"]
                 }
-                Object.keys(configLibraries).forEach(function (libraryType) {
-                    if (libraryType == 'info' && configLibraries[libraryType]["title"]) {
-                        //jQuery('title').html(configLibraries[libraryType]["title"]);
-                        document.querySelector('title').innerHTML = configLibraries[libraryType]["title"]
-                    }
-                    if (!userLibraries[libraryType]) {
-                        userLibraries[libraryType] = {};
-                    }
-                    // Merge libraries from config file and URL together. Check for incompatible
-                    // libraries, and disable them.
-                    Object.keys(configLibraries[libraryType]).forEach(function (libraryName) {
-                        var disabled = false;
-                        if (!disabled) {
-                            if (userLibraries[libraryType][libraryName] == undefined) {
-                                userLibraries[libraryType][libraryName] = configLibraries[libraryType][libraryName];
-                            } else if (typeof userLibraries[libraryType][libraryName] == "object" && typeof configLibraries[libraryType][libraryName] == "object") {
-                                userLibraries[libraryType][libraryName] = Object.assign({}, configLibraries[libraryType][libraryName], userLibraries[libraryType][libraryName]);
-                            }
+                if (!userLibraries[libraryType]) {
+                    userLibraries[libraryType] = {};
+                }
+                // Merge libraries from config file and URL together. Check for incompatible
+                // libraries, and disable them.
+                Object.keys(configLibraries[libraryType]).forEach(function (libraryName) {
+                    var disabled = false;
+                    if (!disabled) {
+                        if (userLibraries[libraryType][libraryName] == undefined) {
+                            userLibraries[libraryType][libraryName] = configLibraries[libraryType][libraryName];
+                        } else if (typeof userLibraries[libraryType][libraryName] == "object" && typeof configLibraries[libraryType][libraryName] == "object") {
+                            userLibraries[libraryType][libraryName] = Object.assign({}, configLibraries[libraryType][libraryName], userLibraries[libraryType][libraryName]);
                         }
-                    });
+                    }
                 });
-            }
+            });
+        }
 
 
-            Object.keys(userLibraries).forEach(function (libraryType) {
-                if (initializers[libraryType]) {
-                    Object.keys(userLibraries[libraryType]).forEach(function (libraryName) {
-                        //if (requireArray[libraryName]) {
-                           // requireArray[libraryName].active = true;
+        Object.keys(userLibraries).forEach(function (libraryType) {
+            if (initializers[libraryType]) {
+                Object.keys(userLibraries[libraryType]).forEach(function (libraryName) {
+                    //if (requireArray[libraryName]) {
+                    // requireArray[libraryName].active = true;
 
-                            if(!initializers[libraryType][libraryName]){
+                    if (!initializers[libraryType][libraryName]) {
 
-                                initializers[libraryType].unshift({'library': libraryName});
-                                initializers[libraryType][libraryName] = initializers[libraryType][0];
+                        initializers[libraryType].unshift({ 'library': libraryName });
+                        initializers[libraryType][libraryName] = initializers[libraryType][0];
 
-                            }
-                            initializers[libraryType][libraryName].active = true;
-                            if (userLibraries[libraryType][libraryName] && userLibraries[libraryType][libraryName] != "") {
-                                if (typeof initializers[libraryType][libraryName].parameters == "object") {
+                    }
+                    initializers[libraryType][libraryName].active = true;
+                    if (userLibraries[libraryType][libraryName] && userLibraries[libraryType][libraryName] != "") {
+                        if (typeof initializers[libraryType][libraryName].parameters == "object") {
 
-                                    initializers[libraryType][libraryName].parameters = Object.assign({}, initializers[libraryType][libraryName].parameters, userLibraries[libraryType][libraryName]);
+                            initializers[libraryType][libraryName].parameters = Object.assign({}, initializers[libraryType][libraryName].parameters, userLibraries[libraryType][libraryName]);
 
-                                } else {
-                                    initializers[libraryType][libraryName].parameters = userLibraries[libraryType][libraryName];
-                                }
-                            }
-                    });
-                }
-            })
+                        } else {
+                            initializers[libraryType][libraryName].parameters = userLibraries[libraryType][libraryName];
+                        }
+                    }
+                });
+            }
+        })
 
 
-            // Load default renderer if no other librarys specified
-            // if (Object.keys(userLibraries["model"]).length == 0 && Object.keys(userLibraries["view"]).length == 0) {
-            //     // requireArray["vwf/model/threejs"].active = true;
-            // }
+        // Load default renderer if no other librarys specified
+        // if (Object.keys(userLibraries["model"]).length == 0 && Object.keys(userLibraries["view"]).length == 0) {
+        //     // requireArray["vwf/model/threejs"].active = true;
+        // }
 
-                    // With the scripts loaded, we must initialize the framework. vwf.initialize()
-                    // accepts three parameters: a world specification, model configuration parameters,
-                    // and view configuration parameters.
+        // With the scripts loaded, we must initialize the framework. vwf.initialize()
+        // accepts three parameters: a world specification, model configuration parameters,
+        // and view configuration parameters.
 
         self.initialize(self.applicationLoad, getActiveLibraries(initializers["model"], true), getActiveLibraries(initializers["view"], true), callback);
 
@@ -1267,7 +1271,7 @@ class VWF {
         // immediately or future calls that are placed on the queue and executed when removed.
 
         let modelKernel = new ModelKernel({
-            id:"vwf/kernel/model"
+            id: "vwf/kernel/model"
         }).factory();
         this.models.kernel = modelKernel.create(vwf);
 
@@ -1276,7 +1280,7 @@ class VWF {
         // Create and attach each configured model.
 
         for (let modelInitializer of modelInitializers) {
-        //modelInitializers.forEach(function (modelInitializer) {
+            //modelInitializers.forEach(function (modelInitializer) {
 
             // Skip falsy values to allow initializers to be conditionally included by the
             // loader.
@@ -1294,25 +1298,25 @@ class VWF {
                 }
 
                 let log = new Log({
-                    id:"vwf/model/stage/log"
+                    id: "vwf/model/stage/log"
                 }).factory();
 
                 //
-                    var modelMod = undefined;
-                    await import(modelName+'.js').then(m=>{
-                        modelMod = (new m.default({
-                            id: modelName
-                        }).factory())
-                    });
-                    
-
-                    var model = modelMod.create(
-                        this.models.kernel, // model's kernel access
-                        [log],
-                        //[require("vwf/model/stage/log")], // stages between the kernel and model
-                        {}, // state shared with a paired view
-                        [].concat(modelArguments || []) // arguments for initialize()
-                    );
+                var modelMod = undefined;
+                await import(modelName + '.js').then(m => {
+                    modelMod = (new m.default({
+                        id: modelName
+                    }).factory())
+                });
+
+
+                var model = modelMod.create(
+                    this.models.kernel, // model's kernel access
+                    [log],
+                    //[require("vwf/model/stage/log")], // stages between the kernel and model
+                    {}, // state shared with a paired view
+                    [].concat(modelArguments || []) // arguments for initialize()
+                );
 
 
                 if (model) {
@@ -1348,7 +1352,7 @@ class VWF {
         // when removed.
 
         let viewKernel = new ViewKernel({
-            id:"vwf/kernel/view"
+            id: "vwf/kernel/view"
         }).factory();
 
         this.views.kernel = viewKernel.create(vwf);
@@ -1357,8 +1361,8 @@ class VWF {
 
         // Create and attach each configured view.
 
-        for( let viewInitializer of viewInitializers) {
-        //viewInitializers.forEach(function (viewInitializer) {
+        for (let viewInitializer of viewInitializers) {
+            //viewInitializers.forEach(function (viewInitializer) {
 
             // Skip falsy values to allow initializers to be conditionally included by the
             // loader.
@@ -1396,39 +1400,39 @@ class VWF {
                 //     }
 
                 // } else { 
-                    // new way
-
-                    var modelPeer = this.models.actual[viewName.replace("view/", "model/")]; // TODO: this.model.actual() is kind of heavy, but it's probably OK to use just a few times here at start-up
-
-                   
-                    var viewMod = undefined;
-                    await import(viewName +'.js').then(m=>{
-                        viewMod = (new m.default({
-                            id: viewName
-                        }).factory())
-                    })
-
-                    var view = viewMod.create(
-                        this.views.kernel, // view's kernel access
-                        [], // stages between the kernel and view
-                        modelPeer && modelPeer.state || {}, // state shared with a paired model
-                        [].concat(viewArguments || []) // arguments for initialize()
-                    );
+                // new way
 
+                var modelPeer = this.models.actual[viewName.replace("view/", "model/")]; // TODO: this.model.actual() is kind of heavy, but it's probably OK to use just a few times here at start-up
 
 
-                    if (view) {
-                        this.views.push(view);
-                        this.views[viewName] = view; // also index by id  // TODO: this won't work if multiple view instances are allowed
+                var viewMod = undefined;
+                await import(viewName + '.js').then(m => {
+                    viewMod = (new m.default({
+                        id: viewName
+                    }).factory())
+                })
 
-                        if (view.compatibilityStatus) {
-                            if (!view.compatibilityStatus.compatible) {
-                                compatibilityStatus.compatible = false;
-                                Object.assign(compatibilityStatus.errors, view.compatibilityStatus.errors);
-                                // jQuery.extend(compatibilityStatus.errors, view.compatibilityStatus.errors);
-                            }
+                var view = viewMod.create(
+                    this.views.kernel, // view's kernel access
+                    [], // stages between the kernel and view
+                    modelPeer && modelPeer.state || {}, // state shared with a paired model
+                    [].concat(viewArguments || []) // arguments for initialize()
+                );
+
+
+
+                if (view) {
+                    this.views.push(view);
+                    this.views[viewName] = view; // also index by id  // TODO: this won't work if multiple view instances are allowed
+
+                    if (view.compatibilityStatus) {
+                        if (!view.compatibilityStatus.compatible) {
+                            compatibilityStatus.compatible = false;
+                            Object.assign(compatibilityStatus.errors, view.compatibilityStatus.errors);
+                            // jQuery.extend(compatibilityStatus.errors, view.compatibilityStatus.errors);
                         }
                     }
+                }
 
                 //}
 
@@ -1480,8 +1484,8 @@ class VWF {
                 })
             }
 
-           this.luminary.subscribeOnHeartbeat(heartbeat);
-           this.luminary.subscribeOnMessages();
+            this.luminary.subscribeOnHeartbeat(heartbeat);
+            this.luminary.subscribeOnMessages();
 
 
         } else {
@@ -1517,7 +1521,7 @@ class VWF {
     /// 
     /// @see {@link module:vwf/api/kernel.setState}
 
-    setState(appState, callback_async /* () */ ) {
+    setState(appState, callback_async /* () */) {
         let self = this;
 
         this.logger.debuggx("setState"); // TODO: loggableState
@@ -1548,7 +1552,7 @@ class VWF {
 
         var nodeIndex = 0;
 
-        async.forEachSeries(nodes, function (nodeComponent, each_callback_async /* ( err ) */ ) {
+        async.forEachSeries(nodes, function (nodeComponent, each_callback_async /* ( err ) */) {
 
             // Look up a possible annotation for this node. For backward compatibility, if the
             // state has exactly one node and doesn't contain an annotations object, assume the
@@ -1710,7 +1714,7 @@ class VWF {
     /// 
     /// @see {@link module:vwf/api/kernel.createNode}
 
-    createNode (nodeComponent, nodeAnnotation, baseURI, callback_async /* ( nodeID ) */ ) {
+    createNode(nodeComponent, nodeAnnotation, baseURI, callback_async /* ( nodeID ) */) {
 
         let self = this;
 
@@ -1751,7 +1755,7 @@ class VWF {
             // If `nodeComponent` is a URI, load the descriptor. `nodeComponent` may be a URI, a
             // descriptor or an ID here.
 
-            function (series_callback_async /* ( err, results ) */ ) {
+            function (series_callback_async /* ( err, results ) */) {
 
                 if (self.componentIsURI(nodeComponent)) { // URI  // TODO: allow non-vwf URIs (models, images, etc.) to pass through to stage 2 and pass directly to createChild()
 
@@ -1818,7 +1822,7 @@ class VWF {
             // 
             // Also see the `mergeDescriptors` limitations.
 
-            function (series_callback_async /* ( err, results ) */ ) {
+            function (series_callback_async /* ( err, results ) */) {
 
                 if (self.componentIsDescriptor(nodeComponent) && nodeComponent.includes && self.componentIsURI(nodeComponent.includes)) { // TODO: for "includes:", accept an already-loaded component (which componentIsURI exludes) since the descriptor will be loaded again
 
@@ -1842,7 +1846,7 @@ class VWF {
             // If `nodeComponent` is a descriptor, construct and get the ID. `nodeComponent` may
             // be a descriptor or an ID here.
 
-            function (series_callback_async /* ( err, results ) */ ) {
+            function (series_callback_async /* ( err, results ) */) {
 
                 if (self.componentIsDescriptor(nodeComponent)) { // descriptor  // TODO: allow non-vwf URIs (models, images, etc.) to pass through to stage 2 and pass directly to createChild()
 
@@ -1863,7 +1867,7 @@ class VWF {
 
             // nodeComponent is an ID here.
 
-            function (series_callback_async /* ( err, results ) */ ) {
+            function (series_callback_async /* ( err, results ) */) {
 
                 if (self.componentIsID(nodeComponent) || self.components[nodeComponent] instanceof Array) { // ID
 
@@ -1916,7 +1920,7 @@ class VWF {
     /// 
     /// @see {@link module:vwf/api/kernel.deleteNode}
 
-    deleteNode (nodeID) {
+    deleteNode(nodeID, replaceFlag) {
         let self = this;
 
         this.logger.debuggx("deleteNode", nodeID);
@@ -1952,8 +1956,7 @@ class VWF {
         });
 
         //Delete childs nodes
-        self.children(nodeID).forEach(function(child)
-        {
+        self.children(nodeID).forEach(function (child) {
             self.deleteNode(child);
         });
 
@@ -1962,7 +1965,7 @@ class VWF {
         // have run.
 
         this.models.forEach(function (model) {
-            model.deletingNode && model.deletingNode(nodeID);
+            model.deletingNode && model.deletingNode(nodeID, replaceFlag);
         });
 
         // Unregister the node.
@@ -1990,7 +1993,7 @@ class VWF {
     /// 
     /// @see {@link module:vwf/api/kernel.setNode}
 
-    setNode (nodeID, nodeComponent, callback_async /* ( nodeID ) */ ) { // TODO: merge with createChild?
+    setNode(nodeID, nodeComponent, callback_async /* ( nodeID ) */) { // TODO: merge with createChild?
 
         let self = this;
         self.logger.debuggx("setNode", function () {
@@ -2023,6 +2026,11 @@ class VWF {
             // Create a new property if the property is not defined on a prototype.
             // Otherwise, initialize the property.
 
+            // if(!node){
+            //     console.log(nodeComponent);
+            //     return
+            // }
+
             var creating = !node.properties.has(propertyName); // not defined on node or prototype
 
             // Translate node references in the descriptor's form `{ node: nodeID }` into kernel
@@ -2084,13 +2092,13 @@ class VWF {
 
         async.series([
 
-            function (series_callback_async /* ( err, results ) */ ) {
+            function (series_callback_async /* ( err, results ) */) {
 
                 // Create and attach the children. For each child, call createChild() with the
                 // child's component specification. createChild() delegates to the models and
                 // views as before.
 
-                async.forEach(Object.keys(nodeComponent.children || {}), function (childName, each_callback_async /* ( err ) */ ) {
+                async.forEach(Object.keys(nodeComponent.children || {}), function (childName, each_callback_async /* ( err ) */) {
 
                     var creating = !self.nodeHasOwnChild.call(self, nodeID, childName);
                     if (creating) {
@@ -2105,23 +2113,47 @@ class VWF {
                             });
                     } // TODO: delete when nodeComponent.children[childName] === null in patch
                 }, function (err) /* async */ {
-                        let deletedProtoNodes = nodeComponent.childrenDeleted;
-
-                        if (deletedProtoNodes) {
-                            let childNames = Object.keys(nodeComponent.childrenDeleted)
-                            if (childNames) {
-                                childNames.forEach(el => {
-                                    console.log("DELETE CHILD HERE!: ", el);
-                                    self.deleteChild(nodeID, el);
-                                });
-                            }
+                    let deletedProtoNodes = nodeComponent.childrenDeleted;
+
+                    if (deletedProtoNodes) {
+                        let childNames = Object.keys(nodeComponent.childrenDeleted)
+                        if (childNames) {
+                            childNames.forEach(el => {
+                                console.log("DELETE CHILD HERE!: ", el);
+
+                                //self.deleteChild(nodeID, el);
+                                var indm = false;
+                                for (const prop in nodeComponent.children) {
+                                    if (nodeComponent.children[prop].properties && nodeComponent.children[prop].properties.displayName) {
+
+                                        if (nodeComponent.children[prop].properties.displayName == el ||
+                                            nodeComponent.children[prop].properties.displayName.value == el) {
+                                            indm = true;
+                                            //console.log('REPLACE: ');
+                                            //self.deleteChild(nodeID, el, true);
+                                        }
+
+                                    } else {
+                                        indm = false;
+                                        //self.deleteChild(nodeID, el);
+                                    }
+
+                                }
+                                if (nodeComponent.children && !nodeComponent.children[el] && indm) {
+                                    self.deleteChild(nodeID, el, true)
+                                } else {
+                                    self.deleteChild(nodeID, el)
+                                }
+
+                            });
                         }
+                    }
                     series_callback_async(err, undefined);
                 });
 
             },
 
-            function (series_callback_async /* ( err, results ) */ ) {
+            function (series_callback_async /* ( err, results ) */) {
 
                 // Attach the scripts. For each script, load the network resource if the script
                 // is specified as a URI, then once loaded, call execute() to direct any model
@@ -2133,7 +2165,7 @@ class VWF {
 
                 var baseURI = self.uri(nodeID, true);
 
-                async.map(scripts, function (script, map_callback_async /* ( err, result ) */ ) {
+                async.map(scripts, function (script, map_callback_async /* ( err, result ) */) {
 
                     if (self.valueHasType(script)) {
                         if (script.source) {
@@ -2298,6 +2330,14 @@ class VWF {
                         prop.set = ""
                     }
 
+
+                    if(prop.get == "" && prop.set == ""){
+                        //let val = prop.value;
+                        // delete prop.get;
+                        // delete prop.set;
+                        prop = prop.value;
+                    }
+
                     nodeComponent.properties[el] = prop
                 }
             })
@@ -2402,13 +2442,13 @@ class VWF {
                 delete nodeComponent.children[childName];
             }
         }
-        
+
         ////CHECK FOR DELETED PROTO NODES
 
         nodeComponent.childrenDeleted = {};
 
         Object.keys(node.childsDeleted).forEach((childName) => {
-            nodeComponent.childrenDeleted[childName] = null;
+            nodeComponent.childrenDeleted[childName] = null//node.childsDeleted[childName];
             patched = true;
         });
 
@@ -2521,7 +2561,7 @@ class VWF {
     /// 
     /// @see {@link module:vwf/api/kernel.createChild}
 
-    createChild(nodeID, childName, childComponent, childURI, callback_async /* ( childID ) */ ) {
+    createChild(nodeID, childName, childComponent, childURI, callback_async /* ( childID ) */) {
 
         let self = this;
 
@@ -2582,7 +2622,7 @@ class VWF {
 
         async.series([
 
-            function (series_callback_async /* ( err, results ) */ ) {
+            function (series_callback_async /* ( err, results ) */) {
 
                 // Rudimentary support for `{ includes: prototype }`, which absorbs a prototype
                 // descriptor into the child descriptor before creating the child. See the notes
@@ -2642,14 +2682,14 @@ class VWF {
 
             },
 
-            function (series_callback_async /* ( err, results ) */ ) {
+            function (series_callback_async /* ( err, results ) */) {
 
                 // Create the prototype and behavior nodes (or locate previously created
                 // instances).
 
                 async.parallel([
 
-                    function (parallel_callback_async /* ( err, results ) */ ) {
+                    function (parallel_callback_async /* ( err, results ) */) {
 
                         // Create or find the prototype and save the ID in childPrototypeID.
 
@@ -2685,13 +2725,13 @@ class VWF {
 
                     },
 
-                    function (parallel_callback_async /* ( err, results ) */ ) {
+                    function (parallel_callback_async /* ( err, results ) */) {
 
                         // Create or find the behaviors and save the IDs in childBehaviorIDs.
 
                         var behaviorComponents = childComponent.implements ? [].concat(childComponent.implements) : []; // accept either an array or a single item
 
-                        async.map(behaviorComponents, function (behaviorComponent, map_callback_async /* ( err, result ) */ ) {
+                        async.map(behaviorComponents, function (behaviorComponent, map_callback_async /* ( err, result ) */) {
                             self.createNode(behaviorComponent, undefined, baseURI, function (behaviorID) /* async */ {
                                 map_callback_async(undefined, behaviorID);
                             });
@@ -2708,7 +2748,7 @@ class VWF {
 
             },
 
-            function (series_callback_async /* ( err, results ) */ ) {
+            function (series_callback_async /* ( err, results ) */) {
 
                 // Re-register the node now that we have the prototypes and behaviors.
 
@@ -2743,7 +2783,7 @@ class VWF {
                 // Call creatingNode() on each model. The node is considered to be constructed
                 // after all models have run.
 
-                async.forEachSeries(self.models, function (model, each_callback_async /* ( err ) */ ) {
+                async.forEachSeries(self.models, function (model, each_callback_async /* ( err ) */) {
 
                     var driver_ready = true;
                     var timeoutID;
@@ -2788,12 +2828,12 @@ class VWF {
 
             },
 
-            function (series_callback_async /* ( err, results ) */ ) {
+            function (series_callback_async /* ( err, results ) */) {
 
                 // Call createdNode() on each view. The view is being notified of a node that has
                 // been constructed.
 
-                async.forEach(self.views, function (view, each_callback_async /* ( err ) */ ) {
+                async.forEach(self.views, function (view, each_callback_async /* ( err ) */) {
 
                     var driver_ready = true;
                     var timeoutID;
@@ -2834,7 +2874,7 @@ class VWF {
 
             },
 
-            function (series_callback_async /* ( err, results ) */ ) {
+            function (series_callback_async /* ( err, results ) */) {
 
                 // Set the internal state.
 
@@ -2927,7 +2967,7 @@ class VWF {
                 // child's component specification. createChild() delegates to the models and
                 // views as before.
 
-                async.forEach(Object.keys(childComponent.children || {}), function (childName, each_callback_async /* ( err ) */ ) {
+                async.forEach(Object.keys(childComponent.children || {}), function (childName, each_callback_async /* ( err ) */) {
                     var childValue = childComponent.children[childName];
 
                     self.createChild(childID, childName, childValue, undefined, function (childID) /* async */ { // TODO: add in original order from childComponent.children  // TODO: propagate childURI + fragment identifier to children of a URI component?
@@ -2940,7 +2980,7 @@ class VWF {
 
             },
 
-            function (series_callback_async /* ( err, results ) */ ) {
+            function (series_callback_async /* ( err, results ) */) {
 
                 // Attach the scripts. For each script, load the network resource if the script is
                 // specified as a URI, then once loaded, call execute() to direct any model that
@@ -2950,7 +2990,7 @@ class VWF {
 
                 var scripts = childComponent.scripts ? [].concat(childComponent.scripts) : []; // accept either an array or a single item
 
-                async.map(scripts, function (script, map_callback_async /* ( err, result ) */ ) {
+                async.map(scripts, function (script, map_callback_async /* ( err, result ) */) {
 
                     if (self.valueHasType(script)) {
                         if (script.source) {
@@ -3022,7 +3062,7 @@ class VWF {
                         // model drivers to apply the prototypes' initializers to the node.
 
                         async.forEachSeries(self.prototypes(childID, true).reverse().concat(childID),
-                            function (childInitializingNodeID, each_callback_async /* err */ ) {
+                            function (childInitializingNodeID, each_callback_async /* err */) {
 
                                 // Call initializingNode() on each model.
 
@@ -3127,14 +3167,14 @@ class VWF {
     /// 
     /// @see {@link module:vwf/api/kernel.deleteChild}
 
-    deleteChild(nodeID, childName) {
+    deleteChild(nodeID, childName, replaceFlag) {
 
         var childID = this.children(nodeID).filter(function (childID) {
             return this.name(childID) === childName;
         }, this)[0];
 
         if (childID !== undefined) {
-            return this.deleteNode(childID);
+            return this.deleteNode(childID, replaceFlag);
         }
 
     }
@@ -3730,23 +3770,23 @@ class VWF {
 
             if (propertyValue === undefined && !ignorePrototype) {
 
-                if(this.behaviors(nodeID)){
-                    
-                this.behaviors(nodeID).reverse().concat(this.prototype(nodeID)).
-                some(function (prototypeID, prototypeIndex, prototypeArray) {
+                if (this.behaviors(nodeID)) {
 
-                    if (prototypeIndex < prototypeArray.length - 1) {
-                        propertyValue = this.getProperty(prototypeID, propertyName, true); // behavior node only, not its prototypes
-                    } else if (prototypeID !== this.kutility.protoNodeURI) {
-                        propertyValue = this.getProperty(prototypeID, propertyName); // prototype node, recursively
-                    }
+                    this.behaviors(nodeID).reverse().concat(this.prototype(nodeID)).
+                        some(function (prototypeID, prototypeIndex, prototypeArray) {
 
-                    return propertyValue !== undefined;
+                            if (prototypeIndex < prototypeArray.length - 1) {
+                                propertyValue = this.getProperty(prototypeID, propertyName, true); // behavior node only, not its prototypes
+                            } else if (prototypeID !== this.kutility.protoNodeURI) {
+                                propertyValue = this.getProperty(prototypeID, propertyName); // prototype node, recursively
+                            }
 
-                }, this);
+                            return propertyValue !== undefined;
+
+                        }, this);
 
+                }
             }
-        }
 
             // Call gotProperty() on each view.
 
@@ -4524,7 +4564,7 @@ class VWF {
     /// 
     /// @see {@link module:vwf/api/kernel.execute}
 
-    execute(nodeID, scriptText, scriptType, callback_async /* result */ ) {
+    execute(nodeID, scriptText, scriptType, callback_async /* result */) {
 
         let self = this;
 
@@ -4942,7 +4982,7 @@ class VWF {
     /// 
     /// @see {@link module:vwf/api/kernel.find}
 
-    find(nodeID, matchPattern, initializedOnly, callback /* ( matchID ) */ ) {
+    find(nodeID, matchPattern, initializedOnly, callback /* ( matchID ) */) {
 
         // Interpret `find( nodeID, matchPattern, callback )` as
         // `find( nodeID, matchPattern, undefined, callback )`. (`initializedOnly` was added in
@@ -4996,7 +5036,7 @@ class VWF {
     /// 
     /// @see {@link module:vwf/api/kernel.findClients}
 
-    findClients(nodeID, matchPattern, callback /* ( matchID ) */ ) {
+    findClients(nodeID, matchPattern, callback /* ( matchID ) */) {
 
         this.logger.warn("`kernel.findClients` is deprecated. Use " +
             "`kernel.find( nodeID, \"doc('proxy/clients.vwf')/pattern\" )`" +
@@ -5050,7 +5090,7 @@ class VWF {
 
     /// @name module:vwf~loadComponent
 
-    loadComponent(nodeURI, baseURI, callback_async /* nodeDescriptor */ , errback_async /* errorMessage */ ) { // TODO: turn this into a generic xhr loader exposed as a kernel function?
+    loadComponent(nodeURI, baseURI, callback_async /* nodeDescriptor */, errback_async /* errorMessage */) { // TODO: turn this into a generic xhr loader exposed as a kernel function?
 
         let self = this;
 
@@ -5116,14 +5156,14 @@ class VWF {
             } else {
                 var worldName = dbName.split('/')[1];
                 var fileName = dbName.split('/')[2];
-                 //+ '_json';
+                //+ '_json';
 
-                if(!fileName) {
+                if (!fileName) {
                     worldName = self.helpers.appPath
                     fileName = dbName + '_json';
-                    } else {
+                } else {
                     fileName = fileName + '_json';
-                    }
+                }
 
                 let dbNode = _LCSDB.user(_LCS_WORLD_USER.pub).get('worlds').path(worldName).get(fileName);
 
@@ -5155,7 +5195,7 @@ class VWF {
 
     /// @name module:vwf~loadScript
 
-    loadScript(scriptURI, baseURI, callback_async /* scriptText */ , errback_async /* errorMessage */ ) {
+    loadScript(scriptURI, baseURI, callback_async /* scriptText */, errback_async /* errorMessage */) {
 
         let self = this;
         if (scriptURI.match(RegExp("^data:application/javascript;base64,"))) {
@@ -5198,8 +5238,13 @@ class VWF {
             if (dbName.includes("proxy")) {
                 let proxyDB = self.proxy ? _LCSDB.user(self.proxy) : _LCSDB.user(_LCS_WORLD_USER.pub);
 
+             
+                
+                let url = scriptURI.startsWith('/') ? scriptURI.substring(1) : fetchUrl;
+                let scrName = scriptURI.startsWith('/') ? url.split(".").join("_") : dbName;
+
                 //userDB = window._LCS_SYS_USER.get('proxy');
-                let fileName = dbName;
+                let fileName = scrName;
                 let dbNode = proxyDB.get('proxy').get(fileName);
                 let nodeProm = new Promise(res => dbNode.once(res))
 
@@ -5214,12 +5259,12 @@ class VWF {
             } else {
                 var fileName = dbName.split('/')[2]; //dbName.replace(worldName + '/', "");
 
-                if(!fileName) {
+                if (!fileName) {
                     worldName = self.helpers.appPath
                     fileName = dbName;
-                    } else {
+                } else {
                     fileName = fileName;
-                    }
+                }
 
 
                 let dbNode = _LCSDB.user(_LCS_WORLD_USER.pub).get('worlds').path(worldName).get(fileName);
@@ -5822,10 +5867,11 @@ class VWF {
 
     resolvedDescriptor(component, baseURI) {
 
+        let selfKernel = this; 
         return this.utility.transform(component, resolvedDescriptorTransformationWithBaseURI);
 
         function resolvedDescriptorTransformationWithBaseURI(object, names, depth) {
-            return resolvedDescriptorTransformation.call(this, object, names, depth, baseURI);
+            return selfKernel.resolvedDescriptorTransformation.call(selfKernel, object, names, depth, baseURI);
         }
 
     }
@@ -6183,8 +6229,8 @@ class VWF {
                 );
                 break;
 
-                // case "following-sibling":  // TODO
-                // case "following":  // TODO
+            // case "following-sibling":  // TODO
+            // case "following":  // TODO
 
             case "attribute":
                 if (resolveAttributes) {
@@ -6192,8 +6238,8 @@ class VWF {
                 }
                 break;
 
-                // n/a: case "namespace":
-                // n/a:   break;
+            // n/a: case "namespace":
+            // n/a:   break;
 
         }
 
@@ -6213,7 +6259,7 @@ class VWF {
 
                 break;
 
-                // Element test.
+            // Element test.
 
             case "element":
 
@@ -6230,7 +6276,7 @@ class VWF {
 
                 break;
 
-                // Attribute test.
+            // Attribute test.
 
             case "attribute":
 
@@ -6240,8 +6286,8 @@ class VWF {
 
                 break;
 
-                // The `doc()` function for referencing globals outside the current tree.
-                // http://www.w3.org/TR/xpath-functions/#func-doc.
+            // The `doc()` function for referencing globals outside the current tree.
+            // http://www.w3.org/TR/xpath-functions/#func-doc.
 
             case "doc":
 
@@ -6254,13 +6300,13 @@ class VWF {
 
                 break;
 
-                // Any-kind test.
+            // Any-kind test.
 
             case "node":
 
                 break;
 
-                // Unimplemented test.
+            // Unimplemented test.
 
             default:
 
@@ -6355,7 +6401,7 @@ class VWF {
 
         if (nodeDescriptor.implements) {
             prototypeDescriptor.implements = (prototypeDescriptor.implements || []).
-            concat(nodeDescriptor.implements);
+                concat(nodeDescriptor.implements);
         }
 
         if (nodeDescriptor.source) {
@@ -6405,7 +6451,7 @@ class VWF {
 
         if (nodeDescriptor.scripts) {
             prototypeDescriptor.scripts = (prototypeDescriptor.scripts || []).
-            concat(nodeDescriptor.scripts);
+                concat(nodeDescriptor.scripts);
         }
 
         return prototypeDescriptor;
@@ -6468,11 +6514,11 @@ class VWF {
 
     async chooseConnection(data) {
         if (this.isLuminary) {
-          return await this.luminary.connect(data) //use Luminary
+            return await this.luminary.connect(data) //use Luminary
         } else {
-          return data //use Reflector
+            return data //use Reflector
         }
-      }
+    }
 
 
 }

public/core/vwf/model/javascript.js

@@ -94,7 +94,28 @@ class VWFJavaScript extends Fabric {
             // Create the node. Its prototype is the most recently-attached behavior, or the
             // specific prototype if no behaviors are attached.
 
-            var node = this.nodes[childID] = Object.create( prototype );
+            const handler = {
+                get: function( obj, prop, receiver ) {
+
+                    if (prop in obj || prop == 'node') {
+                        return Reflect.get(obj, prop, receiver);
+                    } 
+                    else {
+                        let ch = Reflect.get(obj, 'children', receiver);
+                        if(ch){
+                            let child = Object.values(ch).filter(el=>el['displayName'] == prop)[0];
+                            if (child){
+                                //console.log('TRAp children', child);
+                                return child
+                            }
+                        }
+                    }
+            
+                  return undefined
+                }
+              }
+
+            var node = this.nodes[childID] = new Proxy(Object.create( prototype ), handler);
 
             if ( childID === VWFJavaScript.kutility.protoNodeURI ) {
                 this.protoNode = node;
@@ -109,6 +130,21 @@ class VWFJavaScript extends Fabric {
                 enumerable: true,
             } );
 
+            Object.defineProperty( node, "protoID", {
+                get: function() {
+                    return self.kernel.prototype( this.id );
+                },
+                enumerable: true,
+            } );
+
+            Object.defineProperty( node, "proto", {
+                get: function() {
+                    let protoID = self.kernel.prototype( this.id )
+                    return self.nodes[ protoID ];
+                },
+                enumerable: true,
+            } );
+
             Object.defineProperty( node, "uri", { // "this" is node
                 get: function() {
                     return self.kernel.uri( this.id );
@@ -525,6 +561,9 @@ node.hasOwnProperty( childName ) ||  // TODO: recalculate as properties, methods
         deletingNode: function( nodeID ) {
 
             var child = this.nodes[nodeID];
+            if(!child)
+                return
+                
             var node = child.parent;
 
             if ( node ) {

public/defaults/proxy/aframe/a-sound-component.vwf.json

@@ -2,7 +2,7 @@
   "extends": "proxy/aframe/aentityComponent.vwf",
   "type": "component",
   "properties": {
-    "autoplay": null,
+    "autoplay": false,
     "distanceModel": null,
     "loop": null,
     "maxDistance": null,

public/defaults/proxy/aframe/aentity.js

@@ -114,6 +114,15 @@ this.hitendEventMethod = function () {
     //clearIntersect method
 }
 
+this.fromhitstartEventMethod = function (value) {
+    //intersect method
+}
+
+
+this.fromhitendEventMethod = function (value) {
+    //clearIntersect method
+}
+
 this.clickEventMethod = function (value) {
     //clickEventMethod
 }
@@ -327,7 +336,7 @@ this.placeInFrontOf =  function(nodeID, dist) {
 }
 
 
-this.doButtonTriggerdownAction = function(button){
+this.doButtonTriggerdownAction = function(button, controllerID, point){
     //do button action
     console.log('TriggerdownAction form: ', button)
 }
@@ -342,4 +351,44 @@ this.mousedownAction = function(){
 }
 
 this.mouseupAction = function(){  
+}
+
+this.createChild = function(id,nodeDef){
+    let self = this;
+    this.children.create(id, nodeDef, function(child){
+
+        if(child.stepping){
+            child.step();
+        }
+
+    })
+
+}
+
+this.createChildComponent = function(name,nodeDef){
+    let self = this;
+
+    if(this[name]){
+        this.children.delete(this[name])
+    }
+
+    let dn = nodeDef.properties.displayName;
+        if(this[dn]){
+            this.children.delete(this[dn])
+        }
+    
+   
+
+    this.children.create(name, nodeDef, function(child){})
+
+}
+
+this.positionChanged = function(){
+    
+}
+
+this.setPosition = function(value){
+    this.position = value;
+    this.positionChanged();
+
 }

public/defaults/proxy/aframe/aentity.vwf.json

@@ -30,6 +30,16 @@
     "clearIntersectEvent": {},
     "hitstartEvent": {},
     "hitendEvent": {},
+    "fromhitstartEvent": {
+      "parameters": [
+        "value"
+      ]
+    },
+    "fromhitendEvent": {
+      "parameters": [
+        "value"
+      ]
+    },
     "clickEvent": {
       "parameters": [
         "value"
@@ -150,6 +160,16 @@
         "obj"
       ]
     },
+    "createChild": {
+      "parameters": [
+        "id","nodeDef"
+      ]
+    },
+    "createChildComponent": {
+      "parameters": [
+        "name","nodeDef"
+      ]
+    },
     "changeVisual": {},
     "resetVisual": {},
     "step": {},
@@ -164,13 +184,25 @@
     },
     "doButtonTriggerdownAction":{
       "parameters": [
-        "value"
+        "buttonID", "controllerID", "point"
+      ]
+    },
+    "doButtonTriggerupAction":{
+      "parameters": [
+        "value",
+        "controllerID"
       ]
     },
     "triggerdownAction":{},
     "triggerupAction":{},
     "mousedownAction":{},
-    "mouseupAction":{}
+    "mouseupAction":{},
+    "positionChanged":{},
+    "setPosition":{
+      "parameters": [
+        "value"
+      ]
+    }
   },
   "scripts": {
     "source": "aentity.js"

public/defaults/proxy/aframe/ascene.js

@@ -80,7 +80,7 @@ this.sphereProto = function () {
         "properties": {
             "displayName": "sphere",
             "radius": 1,
-            "class": "clickable"
+            "class": "clickable intersectable"
         },
         children: {
             "material": {
@@ -101,7 +101,11 @@ this.sphereProto = function () {
             "cursor-listener": {
                 "extends": "proxy/aframe/app-cursor-listener-component.vwf",
                 "type": "component"
-            }
+            },
+            "raycasterListener":  {
+                "extends": "proxy/aframe/app-raycaster-listener-component.vwf",
+                "type": "component"
+              }
         },
         events: {
             "clickEvent": {
@@ -121,7 +125,7 @@ this.cylinderProto = function () {
             "displayName": "cylinder",
             "radius": 1,
             "height": 1,
-            "class": "clickable"
+            "class": "clickable intersectable"
         },
         children: {
             "material": {
@@ -142,7 +146,11 @@ this.cylinderProto = function () {
             "cursor-listener": {
                 "extends": "proxy/aframe/app-cursor-listener-component.vwf",
                 "type": "component"
-            }
+            },
+            "raycasterListener":  {
+                "extends": "proxy/aframe/app-raycaster-listener-component.vwf",
+                "type": "component"
+              }
         },
         events: {
             "clickEvent": {
@@ -163,7 +171,7 @@ this.coneProto = function () {
             "radius-bottom": 1,
             "radius-top": 0.01,
             "height": 1,
-            "class": "clickable"
+            "class": "clickable intersectable"
         },
         children: {
             "material": {
@@ -184,7 +192,11 @@ this.coneProto = function () {
             "cursor-listener": {
                 "extends": "proxy/aframe/app-cursor-listener-component.vwf",
                 "type": "component"
-            }
+            },
+            "raycasterListener":  {
+                "extends": "proxy/aframe/app-raycaster-listener-component.vwf",
+                "type": "component"
+              }
         },
         events: {
             "clickEvent": {
@@ -244,7 +256,7 @@ this.cubeProto = function () {
             "height": 1,
             "width": 1,
             "depth": 1,
-            "class": "clickable"
+            "class": "clickable intersectable"
         },
         children: {
             "interpolation":
@@ -259,6 +271,10 @@ this.cubeProto = function () {
                 "extends": "proxy/aframe/app-cursor-listener-component.vwf",
                 "type": "component"
             },
+            "raycasterListener":  {
+                "extends": "proxy/aframe/app-raycaster-listener-component.vwf",
+                "type": "component"
+              },
             "material": {
                 "extends": "proxy/aframe/aMaterialComponent.vwf",
                 "type": "component",
@@ -393,7 +409,7 @@ this.planeProto = function () {
             "displayName": "plane",
             "height": 1,
             "width": 1,
-            "class": "clickable"
+            "class": "clickable intersectable"
         },
         children: {
             "material": {
@@ -415,7 +431,11 @@ this.planeProto = function () {
             "cursor-listener": {
                 "extends": "proxy/aframe/app-cursor-listener-component.vwf",
                 "type": "component"
-            }
+            },
+            "raycasterListener":  {
+                "extends": "proxy/aframe/app-raycaster-listener-component.vwf",
+                "type": "component"
+              }
         },
         events: {
             "clickEvent": {
@@ -464,6 +484,28 @@ this.createModelObj = function (mtlSrc, objSrc, name, avatar) {
 
 }
 
+this.createClock = function (parentName, avatar) {
+    var self = this;
+    let nodeName = 'clock-' + this.smallRandomId();
+
+    let node = {
+        "extends": "proxy/objects/clock.vwf",
+        "properties": {
+            "displayName": nodeName
+        }
+    }
+
+    let rootNode = parentName ? this.getChildByName(parentName) : this;
+    rootNode.children.create(nodeName, node, function( child ) {
+        if (avatar) child.placeInFrontOf(avatar, -2);
+        child.init();
+        child.run();
+       
+
+    })
+
+
+}
 
 this.createLegoBoost = function (boostID, parentName) {
     var self = this;
@@ -519,7 +561,8 @@ this.createModel = function (modelType, modelSrc, avatar) {
         let modelNode = {
             "extends": extendsName[1],
             "properties": {
-                "src": '#' + child.itemID
+                "src": '#' + child.itemID,
+                "class": "intersectable clickable"
             },
             children:{
                 "interpolation":
@@ -529,7 +572,11 @@ this.createModel = function (modelType, modelSrc, avatar) {
                     "properties": {
                         "enabled": true
                     }
-                }
+                },
+                "raycasterListener":  {
+                    "extends": "proxy/aframe/app-raycaster-listener-component.vwf",
+                    "type": "component"
+                  }
             }
         }
 
@@ -639,6 +686,10 @@ this.createPrimitive = function (type, params, name, node, avatar) {
 
     if (newNode) {
 
+        newNode.implements =  [
+            "proxy/objects/gui/drag.vwf"
+          ]
+
         if (displayName) {
             newNode.properties.displayName = displayName;
         }
@@ -931,7 +982,7 @@ this.createAudio = function (itemSrc, name, node, avatar) {
 
         self.children.create(nodeName, newNode, function( child ) {
             //if (avatar) child.lookAt(self.children[avatar].worldPosition())
-            if (avatar) child.placeInFrontOf(avatar, -2)
+            if (avatar) child.placeInFrontOf(avatar, -2);
            });
 
        // }
@@ -1094,82 +1145,11 @@ this.getDefaultXRCostume = function(){
     let myColor = "white";
     
     let defaultXRCostume = {
-        "extends": "proxy/aframe/aentity.vwf",
+        "includes": "proxy/objects/xrcostume.vwf",
         "properties": {
             displayName: "defaultXRCostume",
             "position": "0 0 0",
-            "avatarColor": myColor,
-            "mousedown_state": false,
-            "triggerdown_state": false
-            // "height": 0.01,
-            // "width": 0.01,
-            // "depth": 1
-        },
-        "methods":{
-            mousedownAction:{
-                body:`
-                this.mousedown_state = true;
-                    if(elID){
-                        //let node = this.findNodeByID(elID);
-                        vwf.callMethod(elID, "mousedownAction",[])
-                    }
-                `,
-                parameters:["point", "elID"],
-                type: "application/javascript"
-            },
-            mouseupAction:{
-                body:`
-                    if(elID){
-                        //let node = this.findNodeByID(elID);
-                        vwf.callMethod(elID, "mouseupAction",[])
-                    }
-                this.mousedown_state = false;
-                `,
-                parameters:["point", "elID"],
-                type: "application/javascript"
-            },
-            triggerdownAction:{
-                body:`
-                //do on trigger down
-                this.triggerdown_state = true;
-                this.cursorVisual.color = "red";
-
-                if(elID){
-                    //let node = this.findNodeByID(elID);
-                    let pointData = AFRAME.utils.coordinates.parse(point);
-                    vwf.callMethod(elID, "triggerdownAction",[pointData])
-                }
-                `,
-                parameters:["point", "elID"],
-                type: "application/javascript"
-            },
-            triggerupAction:{
-                body:`
-                //do on trigger up
-                this.cursorVisual.color = this.cursorVisual.avatarColor;
-                if(elID){
-                    //let node = this.findNodeByID(elID);
-                    let pointData = AFRAME.utils.coordinates.parse(point);
-                    vwf.callMethod(elID, "triggerupAction",[pointData])
-                }
-                this.triggerdown_state = false;
-                `,
-                parameters:["point", "elID"],
-                type: "application/javascript"
-            },
-            onMove:{
-                body:`
-                 if(this.mousedown_state || this.triggerdown_state){
-                    if(idata){
-                        //console.log('Move POINT: ', idata.point, + ' on ' + idata.elID);
-                        let point = AFRAME.utils.coordinates.parse(idata.point);
-                        vwf.callMethod(idata.elID, "moveAction",[point])
-                    }
-                }
-                `,
-                parameters:["idata"],
-                type: "application/javascript"
-            }
+            "avatarColor": myColor
         },
         children: {
             "cursorVisual": {
@@ -1179,19 +1159,8 @@ this.getDefaultXRCostume = function(){
                     "color": myColor,
                     "position": "0 0 0"
                 }
-            },
-            "aabb-collider": {
-                "extends": "proxy/aframe/aabb-collider-component.vwf",
-                "type": "component",
-                "properties": {
-                    debug: false,
-                    interval: 10,
-                    objects: ".hit"
-                }
             }
-         
         }
-    
     }
 
     return defaultXRCostume

public/defaults/proxy/aframe/ascene.vwf.json

@@ -144,6 +144,12 @@
         "boostID",
         "parentName"
       ]
+    },
+    "createClock": {
+      "parameters": [
+        "id",
+        "avatar"
+      ]
     }
   },
   "scripts": {

public/defaults/proxy/aframe/avatar.js

@@ -375,8 +375,10 @@ this.moveHead = function (rotation) {
 
 this.updateAvatarBodyRotation = function (rotation) { 
     
-    let myRot = this.rotation.clone();
-    this.rotation = [myRot.x, rotation.y, myRot.z];
+    if(this.rotation)
+        {let myRot = this.rotation.clone();
+            this.rotation = [myRot.x, rotation.y, myRot.z];
+        }
 }
 
 

public/defaults/proxy/aframe/xrcontroller.js

@@ -116,20 +116,24 @@ this.initialize = function() {
    // this.future(0).update();
 }
 
-this.mousedown = function(point, elID) {
+this.mousedown = function(point, elID, controllerID) {
     let controller = this.xrnode.controller;
     if(controller){
         this.showHandSelection(point);
-        controller.mousedownAction(point, elID);
+        controller.mousedownAction(point, elID, controllerID);
     }
     //this.xrnode.controller.pointer.material.color = 'red'
  }
 
- this.mouseup = function(point, elID) {
+ this.mouseup = function(point, elID, controllerID) {
+
+    if(this.dragID)
+        this.dragID = false;
+
     let controller = this.xrnode.controller;
     if(controller){
         this.resetHandSelection();
-        controller.mouseupAction(point, elID);
+        controller.mouseupAction(point, elID, controllerID);
     }
     //this.xrnode.controller.pointer.material.color = 'green'
  }
@@ -142,21 +146,25 @@ this.mousedown = function(point, elID) {
 //     //this.xrnode.controller.pointer.material.color = 'green'
 //  }
 
-this.triggerdown = function(point, elID) {
+this.triggerdown = function(point, elID, controllerID) {
     let controller = this.xrnode.controller;
 
     if(controller){
         this.showHandSelection(point);
-        controller.triggerdownAction(point, elID);
+        controller.triggerdownAction(point, elID, controllerID);
     }
     //this.xrnode.controller.pointer.material.color = 'red'
  }
 
- this.triggerup = function(point, elID) {
+ this.triggerup = function(point, elID, controllerID) {
+
+    if(this.dragID)
+        this.dragID = false;
+
     let controller = this.xrnode.controller;
     if(controller){
         this.resetHandSelection();
-        controller.triggerupAction(point, elID);
+        controller.triggerupAction(point, elID, controllerID);
     }
     
     //this.xrnode.controller.pointer.material.color = 'green'
@@ -234,6 +242,7 @@ this.setControllerNode = function(modelSrc){
 this.showHandSelection = function (point) { 
 
     //let data = this.raycaster.getIntersectionPoint();
+
     if(point){  
     let end = this.xrnode.controller.cursorVisual.worldToLocal(point);
     //this.xrnode.controller.line.end = end;

public/defaults/proxy/aframe/xrcontroller.vwf.json

@@ -1,7 +1,9 @@
 {
     "extends": "proxy/aframe/aentity.vwf",
     "type": "xrcontroller",
-    "properties": {},
+    "properties": {
+        "dragID": false
+    },
     "methods": {
         "initialize": {},
         "updateController": {},
@@ -32,25 +34,29 @@
         "triggerdown": {
             "parameters": [
                 "point",
-                "elID"
+                "elID",
+                "controllerID"
             ]
         },
         "triggerup": {
             "parameters": [
                 "point",
-                "elID"
+                "elID",
+                "controllerID"
             ]
         },
         "mousedown": {
             "parameters": [
                 "point",
-                "elID"
+                "elID",
+                "controllerID"
             ]
         },
         "mouseup": {
             "parameters": [
                 "point",
-                "elID"
+                "elID",
+                "controllerID"
             ]
         },
         "checkDefaultXRCostume":{},

public/defaults/proxy/animation/animationNode.js

@@ -6,21 +6,16 @@ this.animationUpdate = function(time, duration){
 
 this.translateBy = function(translation, duration){
 
-this.startTranslationSIM = this.position || goog.vec.Vec3.create();
+this.startTranslationSIM = this.position || new THREE.Vector3();
   var deltaTranslation = this.translationFromValue( translation );
-  this.stopTranslationSIM = goog.vec.Vec3.add(
-    this.startTranslationSIM,
-    deltaTranslation,
-    goog.vec.Vec3.create()
-  );
+
+  this.stopTranslationSIM = new THREE.Vector3().addVectors ( this.startTranslationSIM, deltaTranslation);
+
   if(duration > 0) {
     this.animationDuration = duration;
     this.animationUpdate = function(time, duration) {
-      this.position = goog.vec.Vec3.lerp(
-        this.startTranslationSIM, this.stopTranslationSIM,
-        time >= duration ? 1 : time / duration,
-        goog.vec.Vec3.create()
-      );
+      this.position = new THREE.Vector3().lerpVectors(this.startTranslationSIM, this.stopTranslationSIM,
+        time >= duration ? 1 : time / duration)
     }
     this.animationPlay(0, duration);
   }
@@ -31,16 +26,13 @@ this.startTranslationSIM = this.position || goog.vec.Vec3.create();
 }
 
 this.translateTo = function(translation, duration){
-    this.startTranslationSIM = this.position || goog.vec.Vec3.create();
+    this.startTranslationSIM = this.position || new THREE.Vector3();
     this.stopTranslationSIM = this.translationFromValue( translation );
     if(duration > 0) {
       this.animationDuration = duration;
       this.animationUpdate = function(time, duration) {
-        this.position = goog.vec.Vec3.lerp(
-          this.startTranslationSIM, this.stopTranslationSIM,
-          duration == 0 ? duration : time / duration,
-          goog.vec.Vec3.create()
-        );
+        this.position = new THREE.Vector3().lerpVectors(this.startTranslationSIM, this.stopTranslationSIM,
+          duration == 0 ? duration : time / duration)
       }
       this.animationPlay(0, duration);
     }

public/defaults/proxy/objects/clock.js

@@ -0,0 +1,157 @@
+this.init = function () {
+    let self = this;
+
+    let arrows = {
+        "second": {
+            color: "red",
+            radius: 0.01,
+            height: 1,
+            offset: 0,
+            visible: true,
+            visWidth: 0.5,
+            textPos: "-0.25,0,0"
+        },
+        "minute": {
+            color: "blue",
+            radius: 0.02,
+            height: 0.8,
+            offset: 0.3,
+            visible: true,
+            visWidth: 0.3,
+            textPos: "-0.15,0,0"
+        },
+        "hour": {
+            color: "green",
+            radius: 0.03,
+            height: 0.6,
+            offset: 0.5,
+            visible: false,
+            visWidth: 0.3,
+            textPos: "-0.15,0,0"
+        }
+    }
+
+    for (const [key, value] of Object.entries(arrows)) {
+
+        let arrowNode = {
+            "extends": "proxy/aframe/aentity.vwf",
+            "properties": {
+                displayName: key
+            },
+            "children": {
+
+                "arrow": {
+                    "extends": "proxy/aframe/acylinder.vwf",
+                    "properties": {
+                        radius: value.radius,
+                        height: value.height,
+                        position: [0, value.height / 2, 0]
+                    },
+                    "children": {
+                        "material": {
+                            "extends": "proxy/aframe/aMaterialComponent.vwf",
+                            "type": "component",
+                            "properties": {
+                                "color": value.color
+                            }
+                        },
+                        "digit": {
+                            "extends": "proxy/aframe/aplane.vwf",
+                            "properties": {
+                                height: 0.3,
+                                width: value.visWidth,
+                                position: [0, value.height + value.offset, 0],
+                                visible: value.visible
+                            },
+                            children: {
+                                "material": {
+                                    "extends": "proxy/aframe/aMaterialComponent.vwf",
+                                    "type": "component",
+                                    "properties": {
+                                        "color": "white",
+                                        "side": "double"
+                                    }
+                                },
+                                "text": {
+                                    "extends": "proxy/aframe/atext.vwf",
+                                    "properties": {
+                                        "color": "black",
+                                        "value": "",
+                                        "side": "double",
+                                        position: value.textPos
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        self.children.create(key, arrowNode)
+    }
+
+    let vis = {
+        "extends": "proxy/aframe/acylinder.vwf",
+        "properties": {
+            radius: 1.2,
+            height: 0.01,
+            rotation: [90, 0, 0],
+            position: [0, 0, -0.05]
+        },
+        "children": {
+            // "clock": {
+            //     "extends": "proxy/aframe/a-asset-image-item.vwf",
+            //     "properties": {
+            //         "itemID": "clock",
+            //         "itemSrc": "/defaults/assets/textures/clock.png"
+            //     }
+            // },
+            "material": {
+                "extends": "proxy/aframe/aMaterialComponent.vwf",
+                "type": "component",
+                "properties": {
+                    "src": "url(/defaults/assets/textures/clock.png)",
+                    "side": "double",
+                    "color": "white"
+                }
+            }
+        }
+    }
+
+    self.children.create("vis", vis)
+
+}
+
+this.run = function () {
+
+
+    let seconds = this.time//Math.floor(this.time/2);
+    let minutes = Math.floor(seconds / 60);
+    let hours = Math.floor(minutes / 60);
+
+    if (this.second && this.minute && this.hour) {
+        this.second.rotation = [0, 0, -360 * (seconds / 60)];
+        this.minute.rotation = [0, 0, -360 * (minutes / 60)];
+        this.hour.rotation = [0, 0, -360 * (hours / 12)];
+
+        this.second.arrow.digit.rotation = [0, 0, 360 * (seconds / 60)];
+        this.minute.arrow.digit.rotation = [0, 0, 360 * (minutes / 60)];
+        this.hour.arrow.digit.rotation = [0, 0, 360 * (hours / 60)];
+
+
+        let sText = Number.parseFloat(seconds % 60 ).toFixed(1);
+        let minText = minutes % 60;
+        let hrText = hours % 12;
+
+
+        this.second.arrow.digit.text.value = (sText == 0) ? "" : sText
+        this.minute.arrow.digit.text.value = (minText == 0) ? "" : minText
+        this.hour.arrow.digit.text.value = (hrText == 0) ? "" : hrText
+
+    }
+
+    this.future(0.1).run()
+
+}
+

public/defaults/proxy/objects/clock.vwf.json

@@ -0,0 +1,11 @@
+{
+    "extends": "proxy/aframe/aentity.vwf",
+    "properties": {},
+    "methods": {
+        "init": {},
+        "run":{}
+    },
+    "scripts": {
+        "source": "clock.js"
+    }
+}

public/defaults/proxy/objects/cursorVisual.js

@@ -26,6 +26,15 @@ this.createVisual = function () {
                             "transparent": true,
                             "opacity": 0.6
                         }
+                    },
+                    "aabb-collider": {
+                        "extends": "proxy/aframe/aabb-collider-component.vwf",
+                        "type": "component",
+                        "properties": {
+                            debug: false,
+                            interval: 10,
+                            objects: ".hit"
+                        }
                     }
 
             }

public/defaults/proxy/objects/gui/button.js

@@ -30,9 +30,20 @@ this.init = function(){
         "type": "component"
       }
 
+      let textNode = {
+        "extends": "proxy/aframe/atext.vwf",
+        "properties": {
+          "value": this.text,
+          "color": "white",
+          "position": [-this.width/2, 0, 0],
+          "width": this.width*10
+        }
+      }
+
       this.children.create('material', material);
       this.children.create('cursor-listener', cursorListener);
       this.children.create('raycaster-listener', raycasterListener);
+      this.children.create('textNode', textNode);
 
 
 }
@@ -47,23 +58,27 @@ this.clearIntersectEventMethod = function(){
     this.material.color = this.baseColor
 }
 
-this.mousedownAction = function(){
-    this.triggerdownAction();
+this.mousedownAction = function(point, controllerID){
+    this.triggerdownAction(point, controllerID);
 }
 
-this.mouseupAction = function(){
-    this.triggerupAction();
+this.mouseupAction = function(point, controllerID){
+    this.triggerupAction(point, controllerID);
 
 }
 
-this.triggerdownAction = function(){
+this.triggerdownAction = function(point, controllerID){
     this.material.color = this.clickColor;
 
-    let target = this.getScene().findNode(this.target);
-    target.doButtonTriggerdownAction(this.id);
+    let target = this.target ? this.getScene().findNode(this.target) :
+    this.parent;
+    target.doButtonTriggerdownAction(this.id, controllerID, point);
 }
 
-this.triggerupAction = function(){
+this.triggerupAction = function(point, controllerID){
     this.material.color = this.baseColor;
+    let target = this.target ? this.getScene().findNode(this.target) :
+    this.parent;
+    target.doButtonTriggerupAction(this.id, controllerID);
     
 }

public/defaults/proxy/objects/gui/drag.js

@@ -0,0 +1,58 @@
+this.moveAction = function(controllerID, point){
+    
+    let pos = this.parent.localToWorld(this.position);
+
+    if( point && this.pointerDragStart){
+        let newPos = new THREE.Vector3().subVectors(point, this.pointerDragStart);
+        if(this.lockZ){
+            this.position = this.parent.worldToLocal(new THREE.Vector3(newPos.x, newPos.y, pos.z)); //[newPos.x, newPos.y, newPos.z]
+        } else {
+            this.position = this.parent.worldToLocal(newPos);
+        }
+       
+        this.positionChanged();
+    }
+
+}
+
+this.doButtonTriggerupAction = function(buttonID, controllerID){
+
+        let pointer = this.getScene().findNodeByID(controllerID);
+        this.pointerDragStart = false;
+        pointer.dragID = false;
+
+}
+
+this.doButtonTriggerdownAction = function(buttonID, controllerID, point){
+    
+        let pointer = this.getScene().findNodeByID(controllerID);
+        if(point) {
+        //console.log('POINT:', point);
+
+        let wp = new THREE.Vector3().subVectors( point, this.parent.localToWorld(this.position));
+        this.pointerDragStart = wp;
+        }
+
+        pointer.dragID = this.id;
+
+}
+
+this.mousedownAction = function(point, controllerID){
+    this.triggerdownAction(point, controllerID);
+}
+
+this.mouseupAction = function(point, controllerID){
+    this.triggerupAction(point, controllerID);
+
+}
+
+this.triggerdownAction = function(point, controllerID){
+    
+    this.doButtonTriggerdownAction(this.id, controllerID, point);
+}
+
+this.triggerupAction = function(point, controllerID){
+   
+    this.doButtonTriggerupAction(this.id, controllerID);
+    
+}

public/defaults/proxy/objects/gui/drag.vwf.json

@@ -0,0 +1,58 @@
+{
+    "properties":{
+        "lockZ": false
+
+    },
+    "methods": {
+        "mousedownAction": {
+            "parameters": [
+                "point",
+                "elID",
+                "controllerID"
+            ]
+        },
+        "mouseupAction": {
+            "parameters": [
+                "point",
+                "elID",
+                "controllerID"
+            ]
+        },
+        "triggerdownAction": {
+            "parameters": [
+                "point",
+                "elID",
+                "controllerID"
+            ]
+        },
+        "triggerupAction": {
+            "parameters": [
+                "point",
+                "elID",
+                "controllerID"
+            ]
+        },
+        "moveAction": {
+            "parameters": [
+                "controllerID",
+                "point"
+            ]
+        },
+        "doButtonTriggerupAction": {
+            "parameters": [
+                "buttonID",
+                "controllerID"
+            ]
+        },
+        "doButtonTriggerdownAction": {
+            "parameters": [
+                "buttonID",
+                "controllerID",
+                "point"
+            ]
+        }
+    },
+    "scripts": {
+        "source": "drag.js"
+    }
+}

public/defaults/proxy/objects/music/note.js

@@ -0,0 +1,29 @@
+this.initialize = function(){
+    //this.dragButton.init();
+    this.positionChanged()
+}
+
+this.hitstartEventMethod = function(value){
+     //console.log(value)
+     this.material.color = "red"
+}
+
+this.hitendEventMethod = function(value){
+    this.material.color = "green"
+    //console.log(value)
+    // if(this.synth){
+    //     let scene = this.getScene();
+    //     let synth = scene.findNodeByID(this.synth);
+    //     synth.triggerRelease(this.note.note);
+    // }
+    // this.synth = null;
+}
+
+this.positionChanged = function(){
+
+    let note = Tone.Frequency(Math.abs(this.worldPosition().y)*150).toNote();
+    this.note.note = note;
+    if(this.text)
+        this.text.value = note;
+
+}

public/defaults/proxy/objects/music/note.vwf.json

@@ -0,0 +1,99 @@
+{
+    "extends": "proxy/aframe/acylinder.vwf",
+    "implements": "proxy/objects/gui/drag.vwf",
+    "properties": {
+        "lockZ": true,
+        "radius": "0.2",
+        "height": 0.6,
+        "position": "0 1 0",
+        "rotation": [
+            0,
+            0,
+            90
+        ],
+        "class": "hit clickable intersectable"
+    },
+    "methods": {
+        "hitstartEventMethod": {},
+        "hitendEventMethod": {},
+        "moveAction": {
+            "parameters": [
+                "controllerID",
+                "point"
+            ]
+        }
+    },
+    "events": {
+        "clickEvent": {
+            "body": ""
+        }
+    },
+    "children": {
+        "material": {
+            "extends": "proxy/aframe/aMaterialComponent.vwf",
+            "properties": {
+                "color": "#3c7249"
+            }
+        },
+        "aabb-collider-listener": {
+            "extends": "proxy/aframe/app-aabb-collider-listener-component.vwf",
+            "type": "component",
+            "properties": {
+                "dynamic": true
+            }
+        },
+        "cursor-listener": {
+            "extends": "proxy/aframe/app-cursor-listener-component.vwf",
+            "type": "component"
+        },
+        "raycasterListener": {
+            "extends": "proxy/aframe/app-raycaster-listener-component.vwf",
+            "type": "component"
+        },
+        "note": {
+            "extends": "proxy/tonejs/note.vwf",
+            "properties": {
+                "note": "C3",
+                "duration": "8n"
+            }
+        },
+        "text": {
+            "extends": "proxy/aframe/atext.vwf",
+            "properties": {
+                "value": "note",
+                "color": "white",
+                "position": [
+                    0,
+                    0.2,
+                    0.3
+                ],
+                "rotation": [
+                    0,
+                    0,
+                    -90
+                ]
+            }
+        },
+        "propGUI": {
+            "extends": "proxy/node.vwf",
+            "properties": {
+                "radius_max": 1.0,
+                "radius_min": 0.01,
+                "radius_step": 0.05,
+                "height_max": 10.0,
+                "height_min": 0.1,
+                "height_step": 0.1
+            }
+        },
+        "interpolation": {
+            "extends": "proxy/aframe/interpolation-component.vwf",
+            "type": "component",
+            "properties": {
+                "enabled": true
+            }
+        }
+    },
+    "scripts": {
+        "source": "/proxy/objects/music/note.js"
+    }
+}

public/defaults/proxy/objects/xrcostume.js

@@ -0,0 +1,65 @@
+this.onMove = function (idata) {
+
+    if (this.mousedown_state || this.triggerdown_state) {
+       
+        let controller = this.parent.parent;
+        if (controller && controller.dragID) {
+            let point = idata && idata.point ? AFRAME.utils.coordinates.parse(idata.point) : null;
+            //console.log("Point: ", point)
+            vwf.callMethod(controller.dragID, "moveAction", [controller.id, point])
+        } 
+        // else if (idata) {
+        //     //console.log('Move POINT: ', idata.point, + ' on ' + idata.elID);
+        //     let point = AFRAME.utils.coordinates.parse(idata.point);
+        //     vwf.callMethod(idata.elID, "moveAction", [controller.id, point])
+        // }
+    }
+}
+
+this.triggerupAction = function (point, elID, controllerID) {
+    //do on trigger up
+    this.cursorVisual.color = this.cursorVisual.avatarColor;
+    if (elID) {
+        //let node = this.findNodeByID(elID);
+        let pointData = AFRAME.utils.coordinates.parse(point);
+        vwf.callMethod(elID, "triggerupAction", [pointData, controllerID])
+    }
+    this.triggerdown_state = false;
+}
+
+this.triggerdownAction = function (point, elID, controllerID) {
+    //do on trigger down
+    this.triggerdown_state = true;
+    this.cursorVisual.color = "red";
+
+    if (elID) {
+        //let node = this.findNodeByID(elID);
+        let pointData = AFRAME.utils.coordinates.parse(point);
+        vwf.callMethod(elID, "triggerdownAction", [pointData, controllerID])
+    }
+
+}
+
+this.mouseupAction = function (point, elID, controllerID) {
+
+    if (elID) {
+        //let node = this.findNodeByID(elID);
+        let pointData = AFRAME.utils.coordinates.parse(point);
+        vwf.callMethod(elID, "mouseupAction", [pointData, controllerID])
+    }
+    this.mousedown_state = false;
+
+}
+
+this.mousedownAction = function (point, elID, controllerID) {
+
+    this.mousedown_state = true;
+    if (elID) {
+        //let node = this.findNodeByID(elID);
+        let pointData = AFRAME.utils.coordinates.parse(point);
+        vwf.callMethod(elID, "mousedownAction", [pointData, controllerID])
+    }
+
+}
+
+

public/defaults/proxy/objects/xrcostume.vwf.json

@@ -0,0 +1,58 @@
+{
+    "extends": "proxy/aframe/aentity.vwf",
+    "properties": {
+        "displayName": "defaultXRCostume",
+        "position": "0 0 0",
+        "avatarColor": "white",
+        "mousedown_state": false,
+        "triggerdown_state": false
+    },
+    "methods": {
+        "mousedownAction": {
+            "parameters": [
+                "point",
+                "elID",
+                "controllerID"
+            ]
+        },
+        "mouseupAction": {
+            "parameters": [
+                "point",
+                "elID",
+                "controllerID"
+            ]
+        },
+        "triggerdownAction": {
+            "parameters": [
+                "point",
+                "elID",
+                "controllerID"
+            ]
+        },
+        "triggerupAction": {
+            "parameters": [
+                "point",
+                "elID",
+                "controllerID"
+            ]
+        },
+        "onMove": {
+            "parameters": [
+                "idata"
+            ]
+        }
+    },
+    "children": {
+        "cursorVisual": {
+            "extends": "proxy/objects/cursorVisual.vwf",
+            "type": "",
+            "properties": {
+                "color": "white",
+                "position": "0 0 0"
+            }
+        }
+    },
+    "scripts": {
+        "source": "/proxy/objects/xrcostume.js"
+    }
+}

public/defaults/proxy/tonejs/membraneSynth.vwf.json

@@ -0,0 +1,31 @@
+{
+    "extends": "proxy/tonejs/polySynth.vwf",
+    "properties": {
+        "detune": null,
+        "portamento": null,
+        "volume": null,
+
+        "octaves": null,
+        "pitchDecay": null,
+        "onsilence": null,
+
+        "harmonicity":null,
+        "modulationType":null,
+        "partialCount":null,
+        "partials":null,
+        "phase":null,
+        "type":null,
+
+        "attack":null,
+        "attackCurve":null,
+        "decay":null,
+        "decayCurve":null,
+        "release":null,
+        "releaseCurve":null,
+        "sustain":null
+    },
+    "methods":{},
+    "scripts": {
+      "source": "membraneSynth.js"
+    }
+  }

public/defaults/proxy/tonejs/node.vwf.json

@@ -0,0 +1,5 @@
+{
+  "extends": "proxy/node.vwf",
+  "properties": {
+  }
+}

public/defaults/proxy/tonejs/noiseSynth.vwf.json

@@ -0,0 +1,19 @@
+{
+    "extends": "proxy/tonejs/polySynth.vwf",
+    "properties": {
+        "noise": null,
+        "volume": null,
+
+        "attack":null,
+        "attackCurve":null,
+        "decay":null,
+        "decayCurve":null,
+        "release":null,
+        "releaseCurve":null,
+        "sustain":null
+    },
+    "methods":{},
+    "scripts": {
+      "source": "noiseSynth.js"
+    }
+  }

public/defaults/proxy/tonejs/note.vwf.json

@@ -0,0 +1,14 @@
+{
+    "extends": "proxy/node.vwf",
+    "properties": {
+        "note": null,
+        "duration": null,
+        "time": null,
+        "velocity": null
+    },
+    "children":{},
+    "methods": {},
+    "scripts":{
+        "source":"/proxy/tonejs/note.js"
+      }
+  }

public/defaults/proxy/tonejs/pluckSynth.vwf.json

@@ -0,0 +1,14 @@
+{
+    "extends": "proxy/tonejs/polySynth.vwf",
+    "properties": {
+        "attackNoise":null,
+        "dampening":null,
+        "release":null,
+        "resonance":null,
+        "volume":null
+    },
+    "methods":{},
+    "scripts": {
+      "source": "pluckSynth.js"
+    }
+  }

public/defaults/proxy/tonejs/polySynth.js

@@ -0,0 +1,7 @@
+this.triggerAttackRelease = function(note, duration, time, velocity) {
+}
+this.triggerAttack = function(note, velocity) {
+}
+   
+this.triggerRelease = function(note) {
+}

public/defaults/proxy/tonejs/polySynth.vwf.json

@@ -0,0 +1,25 @@
+{
+  "extends": "proxy/tonejs/node.vwf",
+  "properties": {},
+  "methods":{
+    "triggerAttackRelease":{
+      "parameters": [
+        "note", "duration", "time", "velocity"
+      ]
+    },
+    "triggerAttack":{
+      "parameters": [
+        "note",
+        "velocity"
+      ]
+    },
+    "triggerRelease":{
+      "parameters": [
+        "note"
+      ]
+    }
+  },
+  "scripts": {
+    "source": "polySynth.js"
+  }
+}

public/defaults/proxy/tonejs/synth.vwf.json

@@ -0,0 +1,25 @@
+{
+    "extends": "proxy/tonejs/polySynth.vwf",
+    "properties": {
+        "detune": null,
+        "portamento": null,
+        "volume": null,
+        "harmonicity":null,
+        "modulationType":null,
+        "partialCount":null,
+        "partials":null,
+        "phase":null,
+        "type":null,
+        "attack":null,
+        "attackCurve":null,
+        "decay":null,
+        "decayCurve":null,
+        "release":null,
+        "releaseCurve":null,
+        "sustain":null
+    },
+    "methods":{},
+    "scripts": {
+      "source": "synth.js"
+    }
+  }

public/defaults/worlds/aframe-ar/index.vwf.json

@@ -124,7 +124,7 @@
           },
           "methods": {
             "run": {
-              "body": "    var time = this.time;\n    let rot = this.rotation; //AFRAME.utils.coordinates.parse(this.rotation);\n    this.rotation = [rot[0], rot[1]+2, rot[2]];\n    this.future( 0.05 ).run();\n",
+              "body": "    var time = this.time;\n    let rot = this.rotation; //AFRAME.utils.coordinates.parse(this.rotation);\n    this.rotation = [rot.x, rot.y+2, rot.z];\n    this.future( 0.05 ).run();\n",
               "type": "application/javascript"
             }
           },

public/defaults/worlds/aframe/index.vwf.json

@@ -28,7 +28,8 @@
           "properties": {
             "color": "#ECECEC",
             "side": "back",
-            "fog": false
+            "fog": false,
+            "shader": "flat"
           }
         }
       }

public/defaults/worlds/aframe2/index.vwf.json

@@ -293,7 +293,8 @@
           "properties": {
             "src": "#sky",
             "side": "back",
-            "fog": false
+            "fog": false,
+            "shader": "flat"
           }
         }
       }

public/defaults/worlds/gearvr/index.vwf.json

@@ -4,6 +4,16 @@
     "fog": "type: linear; color: #ECECEC; far: 20; near: 0"
   },
   "children": {
+    "fog": {
+      "extends": "proxy/aframe/aSceneFogComponent.vwf",
+      "type": "component",
+      "properties": {
+        "fogType": "linear",
+        "color": "#ECECEC",
+        "far": 20, 
+        "near": 0
+      }
+    },
     "assetBG2": {
       "extends": "proxy/aframe/a-asset-image-item.vwf",
       "properties": {

public/defaults/worlds/lego-boost/index.vwf.json

@@ -74,7 +74,8 @@
             "color": "#ECECEC",
             "src": "#sky",
             "fog": false,
-            "side": "back"
+            "side": "back",
+            "shader": "flat"
           }
         }
       }

public/defaults/worlds/multipixel/index.vwf.json

@@ -46,7 +46,8 @@
           "properties": {
             "color": "#ECECEC",
             "side": "back",
-            "fog": false
+            "fog": false,
+            "shader": "flat"
           }
         }
       }

public/defaults/worlds/ohmlang-calc/index.vwf.json

@@ -77,11 +77,11 @@
     "calcText": {
       "extends": "proxy/aframe/atext.vwf",
       "properties": {
-        "value": {
-          "set": "this.value = value; this.calcMe()",
-          "get": "return this.value",
+        "expr": {
+          "set": "this.expr = value; this.calcMe()",
           "value": "1 * pi"
         },
+        "value": "",
         "color": "#b74217",
         "position": [
           -1,
@@ -97,7 +97,7 @@
       },
       "methods": {
         "calcMe": {
-          "body": "    let match = this.calcLang.grammar.match(this.value);\n    if (match.succeeded()){\n      if (typeof this.calcLang.semantics === 'function'){\n    let result = this.calcLang.semantics(match).interpret(); \n if (this.parent.calcResult && (typeof this.parent.calcResult.value == 'string')) {\n this.parent.calcResult.value = result \n} \n   }}\n    //this.future( 0.1 ).calcMe();\n",
+          "body": " this.value = this.expr; let match = this.calcLang.grammar.match(this.value);\n    if (match.succeeded()){\n      if (typeof this.calcLang.semantics === 'function'){\n    let result = this.calcLang.semantics(match).interpret(); \n if (this.parent.calcResult && (typeof this.parent.calcResult.value == 'string')) {\n this.parent.calcResult.value = result \n} \n   }}\n    //this.future( 0.1 ).calcMe();\n",
           "type": "application/javascript"
         }
       },
@@ -131,7 +131,8 @@
           "extends": "proxy/aframe/aMaterialComponent.vwf",
           "properties": {
             "color": "#ECECEC",
-            "side": "back"
+            "side": "back",
+            "shader": "flat"
           }
         }
       }

public/defaults/worlds/orchestra/index.vwf.json

@@ -334,7 +334,8 @@
           "properties": {
             "src": "#sky",
             "side": "back",
-            "fog": false
+            "fog": false,
+            "shader": "flat"
           }
         }
       }

public/defaults/worlds/paint/index.vwf.json

@@ -74,7 +74,8 @@
             "color": "#ECECEC",
             "src": "#sky",
             "fog": false,
-            "side": "back"
+            "side": "back",
+            "shader": "flat"
           }
         }
       }

public/defaults/worlds/rubik/cubeModel.js

@@ -329,23 +329,48 @@ this.doButtonTriggerdownAction = function(buttonID){
 
 this.editRubik = function(){
 
-    if(!this.gizmo && this.editCube){
+    let clientThatCallThis = vwf.client();
+    let me = vwf.moniker();
+    if(clientThatCallThis == me) {
+        console.log('EDIT CUBE!!');
+
+        let viewNode = document.querySelector("[id='" + this.id + "']");
+        let gizmo = viewNode.getAttribute('gizmo');
+        if(!gizmo && this.editCube){
+            viewNode.setAttribute('gizmo', {mode: "rotate"});
+            let inter = viewNode.getAttribute('interpolation');
+            if (inter) {
+                viewNode.components.interpolation.node.viewEdit = true;
+            }
+        }
+
+        if(gizmo && !this.editCube){
+            viewNode.removeAttribute('gizmo');
+            let inter = viewNode.getAttribute('interpolation');
+            if (inter) {
+                viewNode.components.interpolation.node.viewEdit = false;
+            }
 
-        let gizmoNode =
-    {
-        "extends": "proxy/aframe/gizmoComponent.vwf",
-        "type": "component",
-        "properties":
-        {
-            "mode": "rotate"
         }
     }
-    this.children.create("gizmo", gizmoNode);
-} 
 
-    if(this.gizmo && !this.editCube){
-        this.children.delete(this.gizmo)
-    }
+//     if(!this.gizmo && this.editCube){
+
+//         let gizmoNode =
+//     {
+//         "extends": "proxy/aframe/gizmoComponent.vwf",
+//         "type": "component",
+//         "properties":
+//         {
+//             "mode": "rotate"
+//         }
+//     }
+//     this.children.create("gizmo", gizmoNode);
+// } 
+
+//     if(this.gizmo && !this.editCube){
+//         this.children.delete(this.gizmo)
+//     }
 
 
 }

public/defaults/worlds/tone/appui.js

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

public/defaults/worlds/tone/generate.js

@@ -0,0 +1,50 @@
+this.clickEventMethod = function() {
+   this.synth.triggerAttackRelease(['C4'], ['8n'], 0.3);
+}
+
+this.doButtonTriggerdownAction = function(buttonID){
+
+    let transportNode = this.find('//' + 'globalTransport')[0];
+
+
+
+    if(this.playButton.displayName == "playButton"){
+        //this.transportLine.playing
+        this.globalBeat = this.globalBeat? false : true;
+
+        if(this.globalBeat){
+            this.playButton.baseColor = 'red';
+            this.playButton.textNode.value = 'Stop'
+
+            if(!transportNode.playing)
+                transportNode.play()
+           
+
+        } else {
+            this.playButton.baseColor = 'green';
+            this.playButton.textNode.value = 'Play'
+        }
+
+    }
+
+}
+
+this.initialize = function(){
+    this.playButton.init();
+}
+
+this.onGlobalBeat = function (obj) {
+    //dispatch the beat example send OSC
+    let transportNode = this.find('//' + obj.name)[0];
+    let rate = transportNode.animationRate; // 1 by default
+    let drumSeq = this.seq;
+    // [
+    //     { beat: 0, msg: "C0" },
+    //     { beat: 15, msg: "C0" }];
+    drumSeq.forEach(el => {
+        if (el.beat / rate == obj.beat) {
+            this.synth.triggerAttackRelease([el.msg], ['16n']);
+        }
+    })
+
+}

public/defaults/worlds/tone/index.vwf.config.json

@@ -0,0 +1,19 @@
+{
+  "info":{
+    "title": "VWF & AFrame Example App"
+  },
+  "model": {
+    "/drivers/model/aframe": {},
+    "/drivers/model/aframeComponent": {},
+    "/drivers/model/osc": {},
+    "/drivers/model/tone": {}
+
+  },
+  "view": {
+    "/drivers/view/aframe": null,
+    "/drivers/view/aframeComponent": null,
+    "/drivers/view/editor": null,
+    "/drivers/view/osc": null,
+    "/drivers/view/tone": {}
+  }
+}

public/defaults/worlds/tone/index.vwf.json

@@ -0,0 +1,298 @@
+{
+  "extends": "proxy/aframe/ascene.vwf",
+  "properties": {},
+  "methods": {
+    "initialize": {
+      "body": "    this.globalTransport.init();\n    console.log(\"INIT TRANSPORT!!!\");\n",
+      "type": "application/javascript"
+    }
+  },
+  "children": {
+    "fog": {
+      "extends": "proxy/aframe/aSceneFogComponent.vwf",
+      "type": "component",
+      "properties": {
+        "fogType": "linear",
+        "fogColor": "#ECECEC",
+        "far": 20,
+        "near": 0
+      }
+    },
+    "floorTexture": {
+      "extends": "proxy/aframe/a-asset-image-item.vwf",
+      "properties": {
+        "itemID": "bg2",
+        "itemSrc": "/defaults/assets/checker.jpg"
+      }
+    },
+    "newSky": {
+      "extends": "proxy/aframe/aentity.vwf",
+      "children": {
+        "skyshader": {
+          "extends": "proxy/aframe/app-skyshader-component.vwf"
+        }
+      }
+    },
+    "groundPlane": {
+      "extends": "proxy/aframe/aplane.vwf",
+      "properties": {
+        "height": "50",
+        "width": "50",
+        "rotation": [
+          -90,
+          0,
+          0
+        ]
+      },
+      "children": {
+        "material": {
+          "extends": "proxy/aframe/aMaterialComponent.vwf",
+          "properties": {
+            "wireframe": false,
+            "src": "#bg2",
+            "repeat": "10 10"
+          }
+        }
+      }
+    },
+    "myLight": {
+      "extends": "proxy/aframe/alight.vwf",
+      "properties": {
+        "type": "point",
+        "color": "white",
+        "position": [
+          0,
+          10,
+          5
+        ],
+        "rotation": [
+          0,
+          0,
+          0
+        ]
+      }
+    },
+    "spaceText": {
+      "extends": "proxy/aframe/atext.vwf",
+      "properties": {
+        "value": "Music World",
+        "color": "#2b5d83",
+        "position": 
+          [-1.2,2.5,-3]
+        
+      }
+    },
+    "notesLine":{
+      "extends": "proxy/aframe/aentity.vwf",
+      "properties":{
+        "position": "0 0 -3"
+      },
+      "children":{
+        "note1": {
+          "includes": "proxy/objects/music/note.vwf",
+          "properties": {
+            "position": "0 1 0"
+          }
+        },
+        "note2": {
+          "includes": "proxy/objects/music/note.vwf",
+          "properties": {
+            "position": "1.2 2 0"
+          }
+        },
+        "note3": {
+          "includes": "proxy/objects/music/note.vwf",
+          "properties": {
+            "position": "-0.7 0.5 0"
+          }
+        },
+        "note4": {
+          "includes": "proxy/objects/music/note.vwf",
+          "properties": {
+            "position": "0.6 1.5 0"
+          }
+        }
+      },
+      "scripts":{
+        "source":"sequence.js"
+      }
+    },
+    "instrument": {
+      "extends": "proxy/aframe/abox.vwf",
+      "properties": {
+        "position": "-1.6 1 -3",
+        "rotation": "0 0 0",
+        "depth": 1,
+        "height": 0.5,
+        "width": 0.5,
+        "class": "clickable intersectable"
+      },
+      "methods": {
+        "clickEventMethod": {},
+        "doButtonTriggerdownAction": {
+          "parameters":["value"]
+        }
+      },
+      "events": {
+        "clickEvent": {}
+      },
+      "children": {
+        "playButton":{
+          "extends": "proxy/objects/gui/button.vwf",
+           "properties": {
+               "target": null,
+               "displayName": "playButton",
+               "position": [-0.5, 0.5, 0.3],
+               "clickColor": "blue",
+               "baseColor": "green",
+               "height": 0.4,
+               "width": 0.4,
+               "text": "Play"
+           }
+   },
+        "transportLine": {
+          "extends": "proxy/aframe/abox.vwf",
+          "properties": {
+            "position": "0 1.5 0",
+            "rotation": "0 0 0",
+            "depth": 1.1,
+            "height": 5,
+            "width": 0.04,
+            "delta": 1,
+            "end": 5,
+            "playing":false
+          },
+          "methods": {
+            "initialize":{},
+            "run":{},
+            "play": {},
+            "stop": {},
+            "fromhitstartEventMethod": {
+              "parameters": [
+                "value"
+              ]
+            },
+            "fromhitendEventMethod": {
+              "parameters": [
+                "value"
+              ]
+            }
+          },
+          "children": {
+            "material": {
+              "extends": "proxy/aframe/aMaterialComponent.vwf",
+              "properties": {
+                "color": "white",
+                "opacity": 0.5
+              }
+            },
+            "aabb-collider": {
+              "extends": "proxy/aframe/aabb-collider-component.vwf",
+              "type": "component",
+              "properties": {
+                "debug": false,
+                "interval": 10,
+                "objects": ".hit"
+              }
+            },
+            "interpolation": {
+              "extends": "proxy/aframe/interpolation-component.vwf",
+              "type": "component",
+              "properties": {
+                "enabled": false
+              }
+            }
+          },
+          "scripts": {
+            "source": "transportLine.js"
+          }
+        },
+        "synth": {
+          "extends": "proxy/tonejs/synth.vwf",
+          "properties": {}
+        },
+        "material": {
+          "extends": "proxy/aframe/aMaterialComponent.vwf",
+          "properties": {
+            "color": "white"
+          }
+        },
+        "raycaster-listener": {
+          "extends": "proxy/aframe/app-raycaster-listener-component.vwf",
+          "type": "component"
+        },
+        "cursor-listener": {
+          "extends": "proxy/aframe/app-cursor-listener-component.vwf",
+          "type": "component"
+        }
+      },
+      "scripts": {
+        "source": "instrument.js"
+      }
+    },
+    "drum": {
+      "extends": "proxy/aframe/abox.vwf",
+      "properties": {
+        "position": "0 1 -4.5",
+        "rotation": "0 0 0",
+        "depth": 1,
+        "height": 0.5,
+        "width": 0.5,
+        "class": "clickable intersectable",
+        "seq": [{ "beat": 0, "msg": "C0" },   { "beat": 15, "msg": "C0" }]
+      },
+      "methods": {
+        "clickEventMethod": {},
+        "doButtonTriggerdownAction": {
+          "parameters":["value"]
+        }
+      },
+      "events": {
+        "clickEvent": {}
+      },
+      "children": {
+        "playButton":{
+          "extends": "proxy/objects/gui/button.vwf",
+           "properties": {
+               "target": null,
+               "displayName": "playButton",
+               "position": [-0.5, 0.5, 0.3],
+               "clickColor": "blue",
+               "baseColor": "green",
+               "height": 0.4,
+               "width": 0.4,
+               "text": "Play"
+           }
+   },
+        "synth": {
+          "extends": "proxy/tonejs/membraneSynth.vwf",
+          "properties": {}
+        },
+        "material": {
+          "extends": "proxy/aframe/aMaterialComponent.vwf",
+          "properties": {
+            "color": "white"
+          }
+        },
+        "raycaster-listener": {
+          "extends": "proxy/aframe/app-raycaster-listener-component.vwf",
+          "type": "component"
+        },
+        "cursor-listener": {
+          "extends": "proxy/aframe/app-cursor-listener-component.vwf",
+          "type": "component"
+        }
+      },
+      "scripts": {
+        "source": "generate.js"
+      }
+    },
+    "globalTransport": {
+      "extends": "proxy/aframe/transport.vwf",
+      "properties": {
+        "displayName": "global",
+        "position": [3,2.5,-3]
+      }
+    }
+  }
+}

public/defaults/worlds/tone/info.json

@@ -0,0 +1,15 @@
+{
+    "info": {
+        "en":{
+            "title": "Music App",
+            "imgUrl": "/defaults/worlds/tone/webimg.jpg",
+            "text": "Example app with Tone JS"
+        },
+        "ru":{
+            "title": "Music App",
+            "imgUrl": "/defaults/worlds/tone/webimg.jpg",
+            "text": "Example app with Tone JS"
+        }
+       
+    }
+}

public/defaults/worlds/tone/instrument.js

@@ -0,0 +1,45 @@
+this.clickEventMethod = function() {
+   this.synth.triggerAttackRelease(['C4'], ['8n'], 0.3);
+}
+
+this.doButtonTriggerdownAction = function(buttonID){
+
+    let transportNode = this.find('//' + 'globalTransport')[0];
+
+    if(this.playButton.displayName == "playButton"){
+        //this.transportLine.playing
+        this.globalBeat = this.globalBeat? false : true;
+
+        if(this.globalBeat){
+            this.playButton.baseColor = 'red';
+            this.playButton.textNode.value = 'Stop'
+
+            if(!transportNode.playing)
+                transportNode.play()
+
+        } else {
+            this.playButton.baseColor = 'green';
+            this.playButton.textNode.value = 'Play'
+        }
+
+    }
+
+}
+
+this.initialize = function(){
+    this.playButton.init();
+}
+
+this.onGlobalBeat = function (obj) {
+    //dispatch the beat example send OSC
+    let transportNode = this.find('//' + obj.name)[0];
+    let rate = transportNode.animationRate; // 1 by default
+    let tps = transportNode.animationTPS; // 30 by default
+    //this.transportLine.translateTo([obj.beat*0.2, 0, 0]);
+    let end = this.transportLine.end;
+    if(obj.beat == 0)
+        this.transportLine.translateTo([end, 0, 0], rate - 0.1);
+    if(obj.beat == tps - 1)
+        this.transportLine.translateTo([0, 0, 0]);
+
+}

public/defaults/worlds/tone/sequence.js

@@ -0,0 +1,7 @@
+this.positionChanged = function(){
+    this.children.forEach(child => {
+        if(child.note){
+            child.positionChanged();
+        }
+    })
+}

public/defaults/worlds/tone/transportLine.js

@@ -0,0 +1,64 @@
+this.initialize = function(){
+    //this.run();
+}
+
+this.fromhitstartEventMethod = function(value){
+
+    let synth = this.parent.synth;
+    
+    let scene = this.getScene();
+    let notes = value.map(el=>{
+        let node = scene.findNodeByID(el);
+        node.synth = synth.id;
+
+        //let note = Tone.Frequency(node.worldPosition().y*150).toNote();
+        //node.note.note = note;
+
+        return {
+            freq: node.note.note,
+            velocity: node.radius,
+            duration: node.height//node.note.duration,
+        }
+    })
+
+    if(notes.length == 1){
+        let note = notes[0];
+        //synth.triggerAttack(note.freq, note.velocity);
+        synth.triggerAttackRelease([note.freq], [note.duration], note.velocity);
+    } else if (notes.length > 0){
+        let chord = notes.map(el=>{
+            return el.freq
+        })
+        let durations = notes.map(el=>{
+            return el.duration
+        })
+
+         let velocity = notes[0].velocity;
+         synth.triggerAttackRelease(chord, durations, velocity);
+        // synth.triggerAttack(chord, velocity); //, durations
+    }
+
+   
+}
+
+this.fromhitendEventMethod = function(value){
+    //console.log(value)
+}
+
+// this.stop = function(){
+//     this.animationLoop = false;
+//     this.position = [0,1.5,0];
+// }
+
+// this.play = function(){
+//     this.animationLoop = true;
+//     this.translateBy([5,0,0],1);
+// }
+
+// this.run = function(){
+//     if(this.playing){
+//     this.translateTo([this.end, 0, 0],this.delta - 0.1);
+//     this.future(this.delta).position = [0,1.5,0];
+//     }
+//     this.future(this.delta).run();
+// }

public/defaults/worlds/webrtc/index.vwf.json

@@ -74,7 +74,8 @@
             "color": "#ECECEC",
             "src": "#sky",
             "fog": false,
-            "side": "back"
+            "side": "back",
+            "shader": "flat"
           }
         }
       }

public/drivers/model/aframe.js

@@ -256,6 +256,7 @@ class AFrameModel extends Fabric {
                                 aframeObj = document.createElement('audio');
                                 aframeObj.setAttribute('id', "item-" + _self_.helpers.GUID());
                                 aframeObj.setAttribute('src', "");
+                                //aframeObj.setAttribute('response-type', "arraybuffer");
                                 aframeObj.setAttribute('crossorigin', "anonymous");
                                 assets.appendChild(aframeObj);
                             }

public/drivers/model/aframe/addon/TransformControls.js

@@ -271,8 +271,8 @@ THREE.TransformControls = function ( camera, domElement ) {
 
 			if ( planeIntersect ) {
 
-				let viewDriver = vwf.views["/drivers/view/aframeComponent"];
-				viewDriver.interpolateView = false;
+				// let viewDriver = vwf.views["/drivers/view/aframeComponent"];
+				//viewDriver.interpolateView = false;
 
 				event.preventDefault();
 				event.stopPropagation();
@@ -578,8 +578,8 @@ THREE.TransformControls = function ( camera, domElement ) {
 
 		if ( pointer.button !== 0 ) return;
 
-		let viewDriver = vwf.views["/drivers/view/aframeComponent"];
-			viewDriver.interpolateView = true;
+		// let viewDriver = vwf.views["/drivers/view/aframeComponent"];
+		
 		if ( this.dragging && ( this.axis !== null ) ) {
 
 			mouseUpEvent.mode = this.mode;
@@ -590,6 +590,8 @@ THREE.TransformControls = function ( camera, domElement ) {
 		this.dragging = false;
 		this.axis = null;
 
+		//viewDriver.interpolateView = true;
+
 	};
 
 	// normalize mouse / touch pointer and remap {x,y} to view space.

public/drivers/model/aframe/addon/aframe-components.js

@@ -46,18 +46,22 @@ AFRAME.registerComponent('desktop-controls', {
         }
 
         if(this.xrcontroller) {
-
+           
             let intersection = this.xrcontroller.components.raycaster.intersections[0];
             let point = intersection ? intersection.point : null;
             let elID = intersection ? intersection.object.el.id : null;
-            if(point) console.log('Point to: ', point);
+            if(point) {
+                //console.log('Point to: ', point);
+                
+                self.avatar.setAttribute('look-controls', 'enabled', false)  
+        }
     
             if (e.button == 1) {
-                vwf_view.kernel.callMethod(controllerID, "triggerdown", [point, elID]);
+                vwf_view.kernel.callMethod(controllerID, "triggerdown", [point, elID, controllerID]);
               }
     
               if (e.button == 0) {
-                vwf_view.kernel.callMethod(controllerID, "mousedown", [point, elID]);
+                vwf_view.kernel.callMethod(controllerID, "mousedown", [point, elID, controllerID]);
               }  
 
         }
@@ -76,15 +80,19 @@ AFRAME.registerComponent('desktop-controls', {
             let intersection = this.xrcontroller.components.raycaster.intersections[0];
             let point = intersection ? intersection.point : null;
             let elID = intersection ? intersection.object.el.id : null;
-            if(point) console.log('Point to: ', point);
-    
+            if(point) {
+                //console.log('Point to: ', point);
+            }
+
+            if (!self.avatar.getAttribute('look-controls').enabled)
+                self.avatar.setAttribute('look-controls', 'enabled', true)  
 
 
         if (e.button == 1) {
-            vwf_view.kernel.callMethod(controllerID, "triggerup", [point, elID]);
+            vwf_view.kernel.callMethod(controllerID, "triggerup", [point, elID, controllerID]);
         }
         if (e.button == 0) {
-            vwf_view.kernel.callMethod(controllerID, "mouseup", [point, elID]);
+            vwf_view.kernel.callMethod(controllerID, "mouseup", [point, elID, controllerID]);
           }   
 
         }
@@ -200,6 +208,7 @@ AFRAME.registerComponent('scene-utils', {
     setCameraControl(){
 
         let avatarEl = document.querySelector('#avatarControl');
+        //avatarEl.setAttribute('look-controls', 'enabled', true)
 
         document.addEventListener('keydown', (event) => {
             const keyName = event.key;
@@ -444,8 +453,10 @@ AFRAME.registerComponent('gizmo', {
             var transformMode = self.transformControls.getMode();
             switch (transformMode) {
                 case 'translate':
-                    vwf_view.kernel.setProperty(object.el.id, 'position',
-                        [object.position.x, object.position.y, object.position.z])
+                    vwf_view.kernel.callMethod(object.el.id, 'setPosition',
+                        [[object.position.x, object.position.y, object.position.z]]);
+                    // vwf_view.kernel.setProperty(object.el.id, 'position',
+                    //     [object.position.x, object.position.y, object.position.z]);
 
                     break;
                 case 'rotate':
@@ -809,11 +820,11 @@ AFRAME.registerComponent('gearvrcontrol', {
             let elID = intersection ? intersection.object.el.id : null;
             if(point) console.log('Point to: ', point);
 
-            vwf_view.kernel.callMethod(controllerID, "triggerdown", [point, elID]);
+            vwf_view.kernel.callMethod(controllerID, "triggerdown", [point, elID, self.controllerID]);
         });
 
         this.el.addEventListener('triggerup', function (event) {
-            vwf_view.kernel.callMethod(controllerID, "triggerup", [point, elID]);
+            vwf_view.kernel.callMethod(controllerID, "triggerup", [point, elID, self.controllerID]);
         });
 
          //X-buttorn Pressed 
@@ -873,7 +884,7 @@ AFRAME.registerComponent('xrcontroller', {
         let elID = intersection ? intersection.object.el.id : null;
         if(point) console.log('Point to: ', point);
 
-            vwf_view.kernel.callMethod(self.controllerID, "triggerdown", [point, elID]);
+            vwf_view.kernel.callMethod(self.controllerID, "triggerdown", [point, elID, self.controllerID]);
             //this.emit('teleportstart');
         });
         this.el.addEventListener('triggerup', function (event) { //pointup 'triggerup'
@@ -888,7 +899,7 @@ AFRAME.registerComponent('xrcontroller', {
         let elID = intersection ? intersection.object.el.id : null;
         if(point) console.log('Point to: ', point);
 
-            vwf_view.kernel.callMethod(self.controllerID, "triggerup", [point, elID]);
+            vwf_view.kernel.callMethod(self.controllerID, "triggerup", [point, elID, self.controllerID]);
             //this.emit('teleportend');
         });
 

public/drivers/model/aframe/addon/aframe-interpolation.js

@@ -62,11 +62,14 @@ AFRAME.registerComponent('interpolation', {
       let interNode = Object.entries(this.driver.state.nodes).find(el =>
         el[1].parentID == this.el.id && el[1].extendsID == "proxy/aframe/interpolation-component.vwf"
       );
-      this.node = this.driver.nodes[interNode[0]];
-      this.nodeState = interNode[1];
+      if(interNode) {
+        this.node = this.driver.nodes[interNode[0]];
+        this.nodeState = interNode[1];
+      }
+      
     }
 
-    if (this.enabled && this.node && this.node.interpolate && this.driver.interpolateView) {
+    if (this.enabled && this.node && this.node.interpolate && this.driver.interpolateView && !this.node.viewEdit) {
       this.setInterpolatedTransforms(timepassed);
 
       // this.restoreTransforms();

public/drivers/model/aframe/aframe-master.js

@@ -57228,7 +57228,8 @@ module.exports.Component = registerComponent('generic-tracked-controller-control
     hand: {default: ''},  // This informs the degenerate arm model.
     defaultModel: {default: true},
     defaultModelColor: {default: 'gray'},
-    orientationOffset: {type: 'vec3'}
+    orientationOffset: {type: 'vec3'},
+    disabled: {default: false}
   },
 
   /**
@@ -57253,9 +57254,19 @@ module.exports.Component = registerComponent('generic-tracked-controller-control
     this.onButtonTouchStart = function (evt) { onButtonEvent(evt.detail.id, 'touchstart', self); };
     this.onButtonTouchEnd = function (evt) { onButtonEvent(evt.detail.id, 'touchend', self); };
     this.controllerPresent = false;
+    this.wasControllerConnected = false;
     this.lastControllerCheck = 0;
     this.rendererSystem = this.el.sceneEl.systems.renderer;
     this.bindMethods();
+
+    // generic-tracked-controller-controls has the lowest precedence.
+    // We must diable this component if there are more specialized controls components.
+    this.el.addEventListener('controllerconnected', function (evt) {
+      if (evt.detail.name === self.name) { return; }
+      self.wasControllerConnected = true;
+      self.removeEventListeners();
+      self.removeControllersUpdateListener();
+    });
   },
 
   addEventListeners: function () {
@@ -57289,6 +57300,7 @@ module.exports.Component = registerComponent('generic-tracked-controller-control
   },
 
   play: function () {
+    if (this.wasControllerConnected) { return; }
     this.checkIfControllerPresent();
     this.addControllersUpdateListener();
   },
@@ -57301,6 +57313,7 @@ module.exports.Component = registerComponent('generic-tracked-controller-control
   injectTrackedControls: function () {
     var el = this.el;
     var data = this.data;
+
     // Do nothing if tracked-controls already set.
     // Generic controls have the lowest precedence.
     if (this.el.components['tracked-controls']) {
@@ -62062,7 +62075,7 @@ module.exports.Component = registerComponent('inspector', {
    * <ctrl> + <alt> + i keyboard shortcut.
    */
   onKeydown: function (evt) {
-    var shortcutPressed = evt.keyCode === 73 && evt.ctrlKey && evt.altKey;
+    var shortcutPressed = evt.keyCode === 73 && (evt.ctrlKey && evt.altKey || evt.getModifierState('AltGraph'));
     if (!shortcutPressed) { return; }
     this.openInspector();
   },
@@ -71418,7 +71431,7 @@ _dereq_('./core/a-mixin');
 _dereq_('./extras/components/');
 _dereq_('./extras/primitives/');
 
-console.log('A-Frame Version: 1.1.0 (Date 2021-01-11, Commit #60a23326)');
+console.log('A-Frame Version: 1.1.0 (Date 2021-01-29, Commit #d044b82a)');
 console.log('THREE Version (https://github.com/supermedium/three.js):',
             pkg.dependencies['super-three']);
 console.log('WebVR Polyfill Version:', pkg.dependencies['webvr-polyfill']);

public/drivers/model/aframeComponent.js

@@ -259,6 +259,12 @@ class AFrameComponentModel extends Fabric {
                             return found;
                         },
 
+                        checkAttribute: function(aframeObj){
+                            if(aframeObj.el.getAttribute(aframeObj.compName)){
+                                aframeObj.el.removeAttribute(aframeObj.compName);
+                            }
+                        },
+
                         setAFrameObject: function (node, config) {
                             var protos = node.prototypes;
                             var aframeObj = {};
@@ -268,7 +274,6 @@ class AFrameComponentModel extends Fabric {
                             // aframeObj.el = sceneEl.children[node.parentID];
                             aframeObj.el = Array.from(sceneEl.querySelectorAll('*')).filter(item => { return item.id == aframeObj.id })[0];
 
-
                             if (this.isComponentClass(protos, "proxy/aframe/lineComponent.vwf")) {
                                 // aframeObj.id = node.parentID;
                                 // aframeObj.el = sceneEl.children[node.parentID];
@@ -279,6 +284,7 @@ class AFrameComponentModel extends Fabric {
                                     aframeObj.compName = "line";
                                 }
                                 //aframeObj.el.setAttribute(node.type, {});
+                                this.checkAttribute(aframeObj);
                                 aframeObj.el.setAttribute(aframeObj.compName, {});
 
                             }
@@ -288,6 +294,7 @@ class AFrameComponentModel extends Fabric {
 
                                 // aframeObj.el.setAttribute(node.type, {});
                                 aframeObj.compName = "gizmo";
+                                this.checkAttribute(aframeObj);
                                 aframeObj.el.setAttribute(aframeObj.compName, {});
 
                             }
@@ -303,6 +310,7 @@ class AFrameComponentModel extends Fabric {
                                 aframeObj.el = document.querySelector('a-scene');
 
                                 aframeObj.compName = "fog";
+                                this.checkAttribute(aframeObj);
                                 aframeObj.el.setAttribute('fog', {});
 
                             }
@@ -312,6 +320,7 @@ class AFrameComponentModel extends Fabric {
 
                                 // aframeObj.el.setAttribute(node.type, {});
                                 aframeObj.compName = "raycaster";
+                                this.checkAttribute(aframeObj);
                                 aframeObj.el.setAttribute(aframeObj.compName, {});
 
                             }
@@ -322,6 +331,7 @@ class AFrameComponentModel extends Fabric {
 
                                 // aframeObj.el.setAttribute(node.type, {});
                                 aframeObj.compName = "shadow";
+                                this.checkAttribute(aframeObj);
                                 aframeObj.el.setAttribute(aframeObj.compName, {});
 
                             }
@@ -330,14 +340,28 @@ class AFrameComponentModel extends Fabric {
 
                                 // aframeObj.el.setAttribute(node.type, {});
                                 aframeObj.compName = "aabb-collider";
+                                this.checkAttribute(aframeObj);
                                 aframeObj.el.setAttribute(aframeObj.compName, {});
 
+                                aframeObj.el.addEventListener('hitstart', function (evt) {
+                                    let elms = evt.detail.intersectedEls;
+                                    let el  = elms ? 
+                                        elms.map(m=> {return m.id})
+                                        : null;
+                                    vwf_view.kernel.fireEvent(evt.target.id, "fromhitstartEvent", [el]);
+                                })
+                        
+                                aframeObj.el.addEventListener('hitend', function (evt) {
+                                    vwf_view.kernel.fireEvent(evt.target.id, "fromhitendEvent", [null]);
+                                })
+
                             }
 
                             if (this.isComponentClass(protos, "proxy/aframe/a-mirror-component.vwf")) {
 
                                 // aframeObj.el.setAttribute(node.type, {});
                                 aframeObj.compName = "mirror";
+                                this.checkAttribute(aframeObj);
                                 aframeObj.el.setAttribute(aframeObj.compName, {});
 
                             }
@@ -346,6 +370,7 @@ class AFrameComponentModel extends Fabric {
 
                                 // aframeObj.el.setAttribute(node.type, {});
                                 aframeObj.compName = "viewoffset";
+                                this.checkAttribute(aframeObj);
                                 aframeObj.el.setAttribute(aframeObj.compName, {});
 
                             }
@@ -364,14 +389,25 @@ class AFrameComponentModel extends Fabric {
 
                                 // aframeObj.el.setAttribute(node.type, {});
                                 aframeObj.compName = "linepath";
+                                this.checkAttribute(aframeObj);
                                 aframeObj.el.setAttribute(aframeObj.compName, {});
 
                             }
 
                             if (this.isComponentClass(protos, "proxy/aframe/aMaterialComponent.vwf")) {
 
+                             
+                                
+                               
                                 // aframeObj.el.setAttribute(node.type, {});
                                 aframeObj.compName = "material";
+
+                                // let name = aframeObj.compName = "material";
+                                // if(aframeObj.el.getAttribute(name)){
+                                //     aframeObj.el.removeAttribute(name);
+                                // }
+
+                                this.checkAttribute(aframeObj);
                                 aframeObj.el.setAttribute(aframeObj.compName, {});
 
                             }
@@ -380,6 +416,7 @@ class AFrameComponentModel extends Fabric {
 
                                 // aframeObj.el.setAttribute(node.type, {});
                                 aframeObj.compName = "sound";
+                                this.checkAttribute(aframeObj);
                                 aframeObj.el.setAttribute(aframeObj.compName, {});
 
                             }
@@ -389,6 +426,7 @@ class AFrameComponentModel extends Fabric {
 
                                 // aframeObj.el.setAttribute(node.type, {});
                                 aframeObj.compName = "interpolation";
+                                this.checkAttribute(aframeObj);
                                 aframeObj.el.setAttribute(aframeObj.compName, {});
 
                             }
@@ -398,6 +436,7 @@ class AFrameComponentModel extends Fabric {
 
                                 // aframeObj.el.setAttribute(node.type, {});
                                 aframeObj.compName = "animation-mixer";
+                                this.checkAttribute(aframeObj);
                                 aframeObj.el.setAttribute(aframeObj.compName, {});
 
                             }
@@ -407,6 +446,7 @@ class AFrameComponentModel extends Fabric {
 
                                 // aframeObj.el.setAttribute(node.type, {});
                                 aframeObj.compName = "envmap";
+                                this.checkAttribute(aframeObj);
                                 aframeObj.el.setAttribute(aframeObj.compName, {});
 
                             }
@@ -417,6 +457,7 @@ class AFrameComponentModel extends Fabric {
 
                                 // aframeObj.el.setAttribute(node.type, {});
                                 aframeObj.compName = "avatarbvh";
+                                this.checkAttribute(aframeObj);
                                 aframeObj.el.setAttribute(aframeObj.compName, {});
 
                             }
@@ -427,6 +468,7 @@ class AFrameComponentModel extends Fabric {
                                 // aframeObj.el.setAttribute(node.type, {});
                                 aframeObj.compName = "sun";
                                 aframeObj.el.setAttribute('id', "sun");
+                                this.checkAttribute(aframeObj);
                                 aframeObj.el.setAttribute(aframeObj.compName, {});
 
                             }
@@ -436,6 +478,7 @@ class AFrameComponentModel extends Fabric {
 
                                 // aframeObj.el.setAttribute(node.type, {});
                                 aframeObj.compName = "skyshader";
+                                this.checkAttribute(aframeObj);
                                 aframeObj.el.setAttribute(aframeObj.compName, {});
 
                             }
@@ -445,6 +488,7 @@ class AFrameComponentModel extends Fabric {
 
                                 // aframeObj.el.setAttribute(node.type, {});
                                 aframeObj.compName = "raycaster-listener";
+                                this.checkAttribute(aframeObj);
                                 aframeObj.el.setAttribute(aframeObj.compName, {});
 
                             }
@@ -454,6 +498,7 @@ class AFrameComponentModel extends Fabric {
 
                                 // aframeObj.el.setAttribute(node.type, {});
                                 aframeObj.compName = "aabb-collider-listener";
+                                this.checkAttribute(aframeObj);
                                 aframeObj.el.setAttribute(aframeObj.compName, {});
                                   
                             }
@@ -463,6 +508,7 @@ class AFrameComponentModel extends Fabric {
 
                                 // aframeObj.el.setAttribute(node.type, {});
                                 aframeObj.compName = "cursor-listener";
+                                this.checkAttribute(aframeObj);
                                 aframeObj.el.setAttribute(aframeObj.compName, {});
 
                             }
@@ -570,13 +616,13 @@ class AFrameComponentModel extends Fabric {
                 // -- initializingNode -------------------------------------------------------------------------
 
                 //   initializingNode: function( nodeID, childID, childExtendsID, childImplementsIDs,
-                //     childSource, childType, childIndex, childName ) {
+                //     childSource, childType, childIndex, childName ) { 
 
                 // },
 
                 // -- deletingNode -------------------------------------------------------------------------
 
-                deletingNode: function (nodeID) {
+                deletingNode: function (nodeID, replaceFlag) {
 
                     if (this.state.nodes[nodeID] !== undefined) {
 
@@ -584,7 +630,9 @@ class AFrameComponentModel extends Fabric {
 
                         if (node.aframeObj.compName !== undefined) {
                             // removes and destroys object
-                            node.aframeObj.el.removeAttribute(node.aframeObj.compName);
+                            if(!replaceFlag)
+                                node.aframeObj.el.removeAttribute(node.aframeObj.compName);
+                                
                             node.aframeObj = undefined;
                         }
 
@@ -733,7 +781,7 @@ class AFrameComponentModel extends Fabric {
 
                                 if(propertyName == "dynamic"){
                                     if(propertyValue){
-                                        parentNodeAF.setAttribute('data-aabb-collider-dynamic', "");
+                                        parentNodeAF.setAttribute('data-aabb-collider-dynamic', propertyValue);
                                     } else {
                                         let attr = parentNodeAF.getAttribute('data-aabb-collider-dynamic');
                                         if(attr !== undefined)
@@ -1366,7 +1414,12 @@ class AFrameComponentModel extends Fabric {
 
                             switch (propertyName) {
                                 case "src":
-                                    value = value !== "" ? ('#' + value.getAttribute('id')) : value;
+                                    if (typeof value == "string" && value !== ""){
+                                        value = value
+                                    } else {
+                                        value = (value) ? ('#' + value.getAttribute('id')) : value;
+                                    }
+                                    
                                     break;
 
                             }

public/drivers/model/tone.js

@@ -0,0 +1,357 @@
+/*
+The MIT License (MIT)
+Copyright (c) 2014-2020 Nikolai Suslov and the Krestianstvo.org project contributors. (https://github.com/NikolaySuslov/livecodingspace/blob/master/LICENSE.md)
+
+*/
+
+// VWF & ToneJS model driver
+
+import { Fabric } from '/core/vwf/fabric.js';
+
+class ToneModel extends Fabric {
+
+    constructor(module) {
+
+        console.log("ToneModel constructor");
+        super(module, "Model");
+    }
+
+    factory() {
+        let _self_ = this;
+
+        return this.load( this.module, 
+            {
+
+                // == Module Definition ====================================================================
+        
+                // -- pipeline -----------------------------------------------------------------------------
+        
+                // pipeline: [ log ], // vwf <=> log <=> scene
+        
+                // -- initialize ---------------------------------------------------------------------------
+        
+                initialize: function() {
+                    
+                    var self = this;
+        
+                   this.state = {
+                        nodes: {},
+                        scenes: {},
+                        prototypes: {},
+                        createLocalNode: function (nodeID, childID, childExtendsID, childImplementsIDs,
+                            childSource, childType, childIndex, childName, callback) {
+                            return {
+                                "parentID": nodeID,
+                                "ID": childID,
+                                "extendsID": childExtendsID,
+                                "implementsIDs": childImplementsIDs,
+                                "source": childSource,
+                                "type": childType,
+                                "name": childName,
+                                "prototypes": undefined
+                            };
+                        },
+                        isToneNodeComponent: function (prototypes) {
+                            var found = false;
+                            if (prototypes) {
+                                for (var i = 0; i < prototypes.length && !found; i++) {
+                                    found = (prototypes[i] === "proxy/tonejs/node.vwf");
+                                }
+                            }
+                            return found;
+                        },
+                        isToneClass: function (prototypes, classID) {
+                            if (prototypes) {
+                                for (var i = 0; i < prototypes.length; i++) {
+                                    if (prototypes[i] === classID) {
+                                        //console.info( "prototypes[ i ]: " + prototypes[ i ] );
+                                        return true;
+                                    }
+                                }
+                            }
+                            return false;
+                        },
+                        isSynthDefinition: function (prototypes) {
+                            var found = false;
+                            if (prototypes) {
+                                for (var i = 0; i < prototypes.length && !found; i++) {
+                                    found = (prototypes[i] == "proxy/tonejs/synth.vwf");
+                                }
+                            }
+                            return found;
+                        },
+                        isMembraneSynthDefinition: function (prototypes) {
+                            var found = false;
+                            if (prototypes) {
+                                for (var i = 0; i < prototypes.length && !found; i++) {
+                                    found = (prototypes[i] == "proxy/tonejs/membraneSynth.vwf");
+                                }
+                            }
+                            return found;
+                        },
+                        isNoiseSynthDefinition: function (prototypes) {
+                            var found = false;
+                            if (prototypes) {
+                                for (var i = 0; i < prototypes.length && !found; i++) {
+                                    found = (prototypes[i] == "proxy/tonejs/noiseSynth.vwf");
+                                }
+                            }
+                            return found;
+                        },
+                        createToneObject: function (node, config) {
+
+                            var protos = node.prototypes;
+                            var toneObj = undefined;
+    
+                            if (this.isToneClass(protos, "proxy/tonejs/synth.vwf")) {
+                                toneObj = new Tone.PolySynth(Tone.synth);
+                            }
+
+                            if (this.isToneClass(protos, "proxy/tonejs/membraneSynth.vwf")) {
+                                toneObj = new Tone.PolySynth(Tone.MembraneSynth);
+                                // toneObj.set({
+                                //     envelope: {
+                                //         release: 0.1
+                                //     }
+                                // });
+                            }
+
+                            if (this.isToneClass(protos, "proxy/tonejs/noiseSynth.vwf")) {
+                                toneObj = new Tone.NoiseSynth();
+                            }
+
+                            if (this.isToneClass(protos, "proxy/tonejs/pluckSynth.vwf")) {
+                                toneObj = new Tone.PolySynth(Tone.PluckSynth);
+                            }
+
+
+                            return toneObj
+                            }
+                    };
+        
+                    this.state.kernel = this.kernel.kernel.kernel;
+        
+                    //this.Tone = Tone;
+                    //this.state.kernel = this.kernel.kernel.kernel;
+                    
+                },
+                // == Model API ============================================================================
+        
+                // -- creatingNode -------------------------------------------------------------------------
+        
+                creatingNode: function( nodeID, childID, childExtendsID, childImplementsIDs,
+                    childSource, childType, childIndex, childName, callback /* ( ready ) */ ) {
+        
+                    // If the parent nodeID is 0, this node is attached directly to the root and is therefore either 
+                    // the scene or a prototype.  In either of those cases, save the uri of the new node
+                    var childURI = (nodeID === 0 ? childIndex : undefined);
+                    var appID = this.kernel.application();
+        
+                    // If the node being created is a prototype, construct it and add it to the array of prototypes,
+                    // and then return
+                    var prototypeID = _self_.utility.ifPrototypeGetId(appID, this.state.prototypes, nodeID, childID);
+                    if (prototypeID !== undefined) {
+        
+                        this.state.prototypes[prototypeID] = {
+                            parentID: nodeID,
+                            ID: childID,
+                            extendsID: childExtendsID,
+                            implementsID: childImplementsIDs,
+                            source: childSource,
+                            type: childType,
+                            name: childName
+                        };
+                        return;
+                    }
+        
+                    var protos = _self_.getPrototypes(this.kernel, childExtendsID);
+                    //var kernel = this.kernel.kernel.kernel;
+                    var node;
+        
+                    if (this.state.isToneNodeComponent(protos)) {
+        
+                        // Create the local copy of the node properties
+                        if (this.state.nodes[childID] === undefined) {
+                            this.state.nodes[childID] = this.state.createLocalNode(nodeID, childID, childExtendsID, childImplementsIDs,
+                                childSource, childType, childIndex, childName, callback);
+                        }
+        
+                        node = this.state.nodes[childID];
+                        node.prototypes = protos;
+        
+                        //this.state.createToneObject(node);
+
+                        let aframeDriver = vwf.views["/drivers/view/aframe"];
+                        if(aframeDriver){
+                            let parentNode = aframeDriver.state.nodes[nodeID];
+                            if(parentNode.aframeObj){
+                                let sceneEl = aframeDriver.state.nodes[nodeID].scene.sceneEl;
+                                if (!sceneEl.audioListener) {
+                                    sceneEl.audioListener = new THREE.AudioListener();
+                                    sceneEl.camera && sceneEl.camera.add(sceneEl.audioListener);
+                                    // sceneEl.addEventListener('camera-set-active', function (evt) {
+                                    //     evt.detail.cameraEl.getObject3D('camera').add(sceneEl.audioListener);
+                                    // });
+                                }
+                                node.sound = new THREE.PositionalAudio( sceneEl.audioListener );
+                                Tone.setContext(node.sound.context);
+                                //node.sound.context.resume();
+                                node.toneObj = this.state.createToneObject(node);
+                                node.sound.setNodeSource(node.toneObj);
+                                parentNode.aframeObj.object3D.add(node.sound);
+                                
+                            } 
+                        }
+                        //addNodeToHierarchy(node);
+                        //notifyDriverOfPrototypeAndBehaviorProps();
+                    }
+                },
+        
+                 // -- initializingNode -------------------------------------------------------------------------
+        
+                //   initializingNode: function( nodeID, childID, childExtendsID, childImplementsIDs,
+                //     childSource, childType, childIndex, childName ) {
+        
+                // },
+        
+                // -- deletingNode -------------------------------------------------------------------------
+        
+                //deletingNode: function( nodeID ) {
+                //},
+        
+                 // -- initializingProperty -----------------------------------------------------------------
+        
+                initializingProperty: function( nodeID, propertyName, propertyValue ) {
+        
+                     var value = undefined;
+                    var node = this.state.nodes[nodeID];
+                    if (node !== undefined) {
+                        value = this.settingProperty(nodeID, propertyName, propertyValue);
+                    }
+                    return value;
+                
+            },
+        
+                // -- creatingProperty ---------------------------------------------------------------------
+        
+                creatingProperty: function (nodeID, propertyName, propertyValue) {
+                    return this.initializingProperty(nodeID, propertyName, propertyValue);
+                },
+        
+        
+                // -- settingProperty ----------------------------------------------------------------------
+        
+                settingProperty: function( nodeID, propertyName, propertyValue ) {
+        
+                    let self = this;
+                    let node = this.state.nodes[nodeID];
+                    var value = undefined;
+
+                    if (node && node.toneObj && _self_.utility.validObject(propertyValue)) {
+
+                        let toneObject = node.toneObj;
+
+                        // if (self.state.isComponentNodeDefinition(node.prototypes)) {
+
+
+                        //     value = propertyValue;
+                        //     switch (propertyName) {
+
+                        //         default:
+                        //             value = undefined;
+                        //             break;
+                        //     }
+
+                        // }
+
+
+                        if (value === undefined && self.state.isSynthDefinition(node.prototypes)) {
+
+                            value = propertyValue;
+
+                            switch (propertyName) {
+
+
+                                case "type":
+
+                                    toneObject.set({oscillator:{type: propertyValue}})
+                                    //"sine"; "square"; "triangle"; "sawtooth";
+
+                                    break;
+
+                                default:
+                                    value = undefined;
+                                    break;
+                            }
+                        }
+                    }
+        
+                     return value;
+        
+                },
+        
+                // -- gettingProperty ----------------------------------------------------------------------
+        
+                gettingProperty: function( nodeID, propertyName, propertyValue ) {
+        
+                    let self = this;
+                    let node = this.state.nodes[nodeID];
+                    let value = undefined;
+                    if (node && node.toneObj) {
+
+                        let toneObject = node.toneObj;
+
+                        // if (self.state.isComponentNodeDefinition(node.prototypes)) {
+                        //     switch (propertyName) {
+                        //     }
+                        // }
+
+                        if (value === undefined && self.state.isSynthDefinition(node.prototypes)) {
+
+                            switch (propertyName) {
+
+                                case "type":
+                                    value = toneObject.options.oscillator.type
+                                    break;
+                            }
+                        }
+
+        
+                    }
+
+                     if ( value !== undefined ) {
+                        propertyValue = value;
+                    }
+        
+                    return value;
+        
+                     
+                }
+
+
+
+
+        
+            } );
+
+        }
+
+
+    getPrototypes(kernel, extendsID) {
+        var prototypes = [];
+        var id = extendsID;
+    
+        while (id !== undefined) {
+            prototypes.push(id);
+            id = kernel.prototype(id);
+        }
+        return prototypes;
+    }
+    
+
+    }
+
+    export {
+        ToneModel as default
+      }
+    

public/drivers/view/aframe.js

@@ -364,10 +364,11 @@ class AFrameView extends Fabric {
                 if (!(node)) {
                     return;
                 }
+
+                var clientThatSatProperty = self.kernel.client();
+                var me = self.kernel.moniker();
     
                 if (eventName == "changingTransformFromView") {
-                    var clientThatSatProperty = self.kernel.client();
-                    var me = self.kernel.moniker();
     
                     // If the transform property was initially updated by this view....
                     if (clientThatSatProperty == me) {
@@ -394,6 +395,8 @@ class AFrameView extends Fabric {
                     eventName == 'mousedownEvent' ||
                     eventName == 'mouseupEvent'){
 
+                        if (clientThatSatProperty == me) {
+
                         let methodName = eventName +'Method';
                         self.kernel.callMethod(nodeID, methodName, eventParameters);
 
@@ -419,18 +422,16 @@ class AFrameView extends Fabric {
 
                         }
 
-
+                    }
                     }
 
 
 
-                let intersectEvents = ['hitstart', 'hitend', 'intersect', 'clearIntersect']; //'intersect', 
+                let intersectEvents = ['fromhitstart', 'fromhitend', 'hitstart', 'hitend', 'intersect', 'clearIntersect']; //'intersect', 
     
                 let hitEvent = intersectEvents.filter(el=> el == eventName.slice(0,-5))[0]; //slice Event word
                 if (hitEvent)
                 {
-                    var clientThatSatProperty = self.kernel.client();
-                    var me = self.kernel.moniker();
     
                     // If the transform property was initially updated by this view....
                     if (clientThatSatProperty == me) {
@@ -849,9 +850,19 @@ class AFrameView extends Fabric {
 
                 if (distance > delta)
                 {
+                    //let idata = el.components["xrcontroller"].intersectionData;
+
+                let intersection = el.components.raycaster.intersections[0];
+                let point = intersection ? intersection.point : null;
+                let elID = intersection ? intersection.object.el.id : null;
+                let idata = point ? {
+                    point: point,
+                    elID: elID
+                } : null;
+               
                    // console.log("position not equal");
                     self.kernel.setProperty(avatarName, "position", position);
-                    self.kernel.callMethod(avatarName, "moveVRController",[]);
+                    self.kernel.callMethod(avatarName, "moveVRController",[idata]);
                 }
             }
 
@@ -860,9 +871,16 @@ class AFrameView extends Fabric {
 
                 if (distance)
                 {
+                    let intersection = el.components.raycaster.intersections[0];
+                    let point = intersection ? intersection.point : null;
+                    let elID = intersection ? intersection.object.el.id : null;
+                    let idata = point ? {
+                        point: point,
+                        elID: elID
+                    } : null;
                     //console.log("rotation not equal");
                     self.kernel.setProperty(avatarName, "rotation", rotation);
-                    self.kernel.callMethod(avatarName, "moveVRController",[]);
+                    self.kernel.callMethod(avatarName, "moveVRController",[idata]);
                 }
             }
 
@@ -988,7 +1006,12 @@ class AFrameView extends Fabric {
        
 
         else if (self.isDesktop){
-            cursorEl.setAttribute('cursor', {rayOrigin: 'mouse'});
+            cursorEl.setAttribute('cursor',
+             {
+                rayOrigin: 'mouse'
+            });
+            cursorEl.setAttribute('visible', false);
+             
         }
 
         // cursorEl.setAttribute('raycaster', {objects: '.intersectable', showLine: true, far: 100});

public/drivers/view/aframeComponent.js

@@ -99,7 +99,8 @@ class AFrameComponentView extends Fabric {
                         id: childID,
                         extends: childExtendsID,
                         entityID: this.state.nodes[childID].parentID,
-                        liveBindings: {}
+                        liveBindings: {},
+                        viewEdit: false
                     };
     
                     let entityID = this.state.nodes[childID].parentID;
@@ -137,7 +138,7 @@ class AFrameComponentView extends Fabric {
     
                 if (this.nodes[childID].extends == "proxy/aframe/a-sound-component.vwf") {
                     console.log(vwf.getProperty(childID, 'isPlaying'));
-                    self.kernel.callMethod(childID, "playSound");
+                    //self.kernel.callMethod(childID, "playSound");
                 }
     
             },
@@ -160,7 +161,7 @@ class AFrameComponentView extends Fabric {
                     return;
                 }
     
-                if (node.name == "material") {
+                if (node.prototypes.includes("proxy/aframe/aMaterialComponent.vwf")) {
     
                     if (propertyName == 'repeat') {
     

public/drivers/view/tone.js

@@ -0,0 +1,173 @@
+/*
+The MIT License (MIT)
+Copyright (c) 2014-2020 Nikolai Suslov and the Krestianstvo.org project contributors. (https://github.com/NikolaySuslov/livecodingspace/blob/master/LICENSE.md)
+*/
+// VWF & Tone driver
+
+import {Fabric} from '/core/vwf/fabric.js';
+//import * as Tone from '/drivers/view/tonejs/dist/Tone.js';
+
+class ToneViewDriver extends Fabric {
+
+  constructor(module) {
+    console.log("ToneViewDriver constructor");
+    super(module, 'View');
+  }
+
+  factory() {
+
+    let _self_ = this;
+
+	return this.load(this.module, 
+		{
+
+			initialize: function() {
+				
+				let self = this;
+
+				this.fabric = _self_;
+
+				this.nodes = {};
+
+				// document.querySelector("button").addEventListener("click", async () => {
+				// 	await Tone.start();
+				// 	console.log("context started");
+				// });
+
+
+				//window._Tone = Tone.default;
+
+				// this.osc = osc;
+				// this.portValue = '8081';
+				// this.hostValue = 'localhost';
+				// this.port = null;
+	
+				//window._osc = this.osc;
+				// window._OSCManager = this;
+	
+			},
+
+			createdNode: function (nodeID, childID, childExtendsID, childImplementsIDs,
+                childSource, childType, childIndex, childName, callback /* ( ready ) */) {
+                let self = this;
+                var node = this.state.nodes[childID];
+    
+                // If the "nodes" object does not have this object in it, it must not be one that
+                // this driver cares about
+                if (!node) {
+                    return;
+				}
+		
+				this.nodes[childID] = {
+					id: childID,
+					extends: childExtendsID,
+					parent: nodeID,
+					toneObj: node.toneObj
+				};
+				
+				//parent: this.state.nodes[childID].aframeObj
+
+			},
+	
+			firedEvent: function (nodeID, eventName, eventParameters) {
+			 
+				let self = this;
+					// if (eventName == 'sendOSC'){
+	
+					// var clientThatSatProperty = self.kernel.client();
+					// var me = self.kernel.moniker();
+	
+	
+					// // If the transform property was initially updated by this view....
+					// if (clientThatSatProperty == me) {
+	
+	
+					// 	if (self.osc !== null) {
+					// 		if (self.getStatus() == 1) {
+					// 			self.port.send(eventParameters[0]);
+					// 			console.log('send: ' + eventParameters[0]);
+					// 		}
+					// 	}
+					// }
+	
+	
+	
+					// }
+				
+			},
+	
+	
+			/*
+			 * Receives incoming messages
+			 */
+			calledMethod: function( nodeID, methodName, methodParameters, methodValue ) {
+		
+				let self = this;
+
+				let node = this.state.nodes[nodeID];
+    
+                // If the "nodes" object does not have this object in it, it must not be one that
+                // this driver cares about
+                if (!node) {
+                    return;
+				}
+
+				if (methodName == "triggerAttackRelease") {
+					
+					if(node.toneObj){
+						const now = Tone.now()
+						let notes = methodParameters[0];
+						// let notes = methodParameters[0].map(el=>{
+						// 	return Tone.Frequency(el).toNote();
+						// }) 
+
+						if (self.state.isMembraneSynthDefinition(node.prototypes)) {
+							node.toneObj.triggerAttackRelease(notes[0], methodParameters[1][0], now);
+						} else if(self.state.isNoiseSynthDefinition(node.prototypes)) {
+							node.toneObj.triggerAttackRelease("16n", now)
+						} 
+						else {
+							node.toneObj.triggerAttackRelease(notes, methodParameters[1], now, methodParameters[2])
+						}
+
+						
+					}
+					
+				}
+
+				if (methodName == "triggerAttack") {
+					
+					if(node.toneObj){
+						const now = Tone.now()
+						node.toneObj.triggerAttack(methodParameters[0], now, methodParameters[1])
+					}
+					
+				}
+
+				if (methodName == "triggerRelease") {
+					
+					if(node.toneObj){
+						node.toneObj.triggerRelease(methodParameters[0], "+0.1")
+					}
+					
+				}
+
+	
+				
+			},
+	
+
+
+
+	
+			
+		});
+	
+	}
+
+
+
+
+}
+
+export { ToneViewDriver as default }

public/lib/ui/mdc/dist/material-components-web.d.ts

@@ -1,6 +1,7 @@
 // Generated by dts-bundle v0.7.3
 // Dependencies for this module:
 //   ../../@material/auto-init/index
+//   ../../@material/banner/index
 //   ../../@material/base/index
 //   ../../@material/checkbox/index
 //   ../../@material/chips/index
@@ -20,6 +21,7 @@
 //   ../../@material/notched-outline/index
 //   ../../@material/radio/index
 //   ../../@material/ripple/index
+//   ../../@material/segmented-button/index
 //   ../../@material/select/index
 //   ../../@material/slider/index
 //   ../../@material/snackbar/index
@@ -29,6 +31,7 @@
 //   ../../@material/tab-scroller/index
 //   ../../@material/tab/index
 //   ../../@material/textfield/index
+//   ../../@material/tooltip/index
 //   ../../@material/top-app-bar/index
 
 declare module 'material-components-web' {
@@ -55,6 +58,7 @@ declare module 'material-components-web' {
       * THE SOFTWARE.
       */
     import autoInit from '@material/auto-init/index';
+    import * as banner from '@material/banner/index';
     import * as base from '@material/base/index';
     import * as checkbox from '@material/checkbox/index';
     import * as chips from '@material/chips/index';
@@ -74,6 +78,7 @@ declare module 'material-components-web' {
     import * as notchedOutline from '@material/notched-outline/index';
     import * as radio from '@material/radio/index';
     import * as ripple from '@material/ripple/index';
+    import * as segmentedButton from '@material/segmented-button/index';
     import * as select from '@material/select/index';
     import * as slider from '@material/slider/index';
     import * as snackbar from '@material/snackbar/index';
@@ -83,7 +88,8 @@ declare module 'material-components-web' {
     import * as tabScroller from '@material/tab-scroller/index';
     import * as tab from '@material/tab/index';
     import * as textField from '@material/textfield/index';
+    import * as tooltip from '@material/tooltip/index';
     import * as topAppBar from '@material/top-app-bar/index';
-    export { autoInit, base, checkbox, chips, circularProgress, dataTable, dialog, dom, drawer, floatingLabel, formField, iconButton, lineRipple, linearProgress, list, menu, menuSurface, notchedOutline, radio, ripple, select, slider, snackbar, switchControl, tab, tabBar, tabIndicator, tabScroller, textField, topAppBar, };
+    export { autoInit, banner, base, checkbox, chips, circularProgress, dataTable, dialog, dom, drawer, floatingLabel, formField, iconButton, lineRipple, linearProgress, list, menu, menuSurface, notchedOutline, radio, ripple, segmentedButton, select, slider, snackbar, switchControl, tab, tabBar, tabIndicator, tabScroller, textField, tooltip, topAppBar, };
 }
 

public/lib/ui/tippyjs/dist/backdrop.css

@@ -0,0 +1 @@
+.tippy-box[data-placement^=top]>.tippy-backdrop{transform-origin:0 25%;border-radius:40% 40% 0 0}.tippy-box[data-placement^=top]>.tippy-backdrop[data-state=visible]{transform:scale(1) translate(-50%,-55%)}.tippy-box[data-placement^=top]>.tippy-backdrop[data-state=hidden]{transform:scale(.2) translate(-50%,-45%)}.tippy-box[data-placement^=bottom]>.tippy-backdrop{transform-origin:0 -50%;border-radius:0 0 30% 30%}.tippy-box[data-placement^=bottom]>.tippy-backdrop[data-state=visible]{transform:scale(1) translate(-50%,-45%)}.tippy-box[data-placement^=bottom]>.tippy-backdrop[data-state=hidden]{transform:scale(.2) translate(-50%)}.tippy-box[data-placement^=left]>.tippy-backdrop{transform-origin:50% 0;border-radius:50% 0 0 50%}.tippy-box[data-placement^=left]>.tippy-backdrop[data-state=visible]{transform:scale(1) translate(-50%,-50%)}.tippy-box[data-placement^=left]>.tippy-backdrop[data-state=hidden]{transform:scale(.2) translate(-75%,-50%)}.tippy-box[data-placement^=right]>.tippy-backdrop{transform-origin:-50% 0;border-radius:0 50% 50% 0}.tippy-box[data-placement^=right]>.tippy-backdrop[data-state=visible]{transform:scale(1) translate(-50%,-50%)}.tippy-box[data-placement^=right]>.tippy-backdrop[data-state=hidden]{transform:scale(.2) translate(-25%,-50%)}.tippy-box[data-animatefill]{background-color:transparent!important}.tippy-backdrop{position:absolute;background-color:#333;border-radius:50%;width:calc(110% + 32px);left:50%;top:50%;z-index:-1;transition:all cubic-bezier(.46,.1,.52,.98);-webkit-backface-visibility:hidden;backface-visibility:hidden}.tippy-backdrop[data-state=hidden]{opacity:0}.tippy-backdrop:after{content:"";float:left;padding-top:100%}.tippy-backdrop+.tippy-content{transition-property:opacity;will-change:opacity}.tippy-backdrop+.tippy-content[data-state=hidden]{opacity:0}

public/lib/ui/tippyjs/dist/border.css

@@ -0,0 +1 @@
+.tippy-box{border:1px transparent}.tippy-box[data-placement^=top]>.tippy-arrow:after{border-top-color:inherit;border-width:8px 8px 0;bottom:-8px;left:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:after{border-bottom-color:inherit;border-width:0 8px 8px;top:-8px;left:0}.tippy-box[data-placement^=left]>.tippy-arrow:after{border-left-color:inherit;border-width:8px 0 8px 8px;right:-8px;top:0}.tippy-box[data-placement^=right]>.tippy-arrow:after{border-width:8px 8px 8px 0;left:-8px;top:0;border-right-color:inherit}.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg:first-child:not(:last-child){top:17px}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg:first-child:not(:last-child){bottom:17px}.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg:first-child:not(:last-child){left:12px}.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg:first-child:not(:last-child){right:12px}.tippy-arrow{border-color:inherit}.tippy-arrow:after{content:"";z-index:-1;position:absolute;border-color:transparent;border-style:solid}

public/lib/ui/tippyjs/dist/svg-arrow.css

@@ -0,0 +1 @@
+.tippy-box[data-placement^=top]>.tippy-svg-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-svg-arrow:after,.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg{top:16px;transform:rotate(180deg)}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg{bottom:16px}.tippy-box[data-placement^=left]>.tippy-svg-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-svg-arrow:after,.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg{transform:rotate(90deg);top:calc(50% - 3px);left:11px}.tippy-box[data-placement^=right]>.tippy-svg-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-svg-arrow:after,.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg{transform:rotate(-90deg);top:calc(50% - 3px);right:11px}.tippy-svg-arrow{width:16px;height:16px;fill:#333;text-align:initial}.tippy-svg-arrow,.tippy-svg-arrow>svg{position:absolute}

public/lib/ui/tippyjs/dist/tippy.css

@@ -0,0 +1 @@
+.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}

public/lib/ui/tippyjs/popperjs/popper.min.js.flow

@@ -0,0 +1,3 @@
+// @flow
+
+export * from '../../lib/popper.js'