lot of fixes and new features

public/core/app.js

@@ -1596,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'
@@ -1606,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)
 }
@@ -354,4 +363,32 @@ this.createChild = function(id,nodeDef){
 
     })
 
+}
+
+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"
@@ -155,6 +165,11 @@
         "id","nodeDef"
       ]
     },
+    "createChildComponent": {
+      "parameters": [
+        "name","nodeDef"
+      ]
+    },
     "changeVisual": {},
     "resetVisual": {},
     "step": {},
@@ -169,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": {
@@ -541,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":
@@ -551,7 +572,11 @@ this.createModel = function (modelType, modelSrc, avatar) {
                     "properties": {
                         "enabled": true
                     }
-                }
+                },
+                "raycasterListener":  {
+                    "extends": "proxy/aframe/app-raycaster-listener-component.vwf",
+                    "type": "component"
+                  }
             }
         }
 
@@ -661,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;
         }
@@ -953,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);
            });
 
        // }
@@ -1116,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": {
@@ -1201,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/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

@@ -100,20 +100,20 @@ this.init = function () {
             position: [0, 0, -0.05]
         },
         "children": {
-            "clock": {
-                "extends": "proxy/aframe/a-asset-image-item.vwf",
-                "properties": {
-                    "itemID": "clock",
-                    "itemSrc": "/defaults/assets/textures/clock.png"
-                }
-            },
+            // "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": "#clock",
-                    "side": "double"
-                    //"color": "white"
+                    "src": "url(/defaults/assets/textures/clock.png)",
+                    "side": "double",
+                    "color": "white"
                 }
             }
         }

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/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

@@ -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/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/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/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

@@ -427,7 +427,7 @@ 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)
@@ -850,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]);
                 }
             }
 
@@ -861,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]);
                 }
             }
 

public/drivers/view/aframeComponent.js

@@ -138,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");
                 }
     
             },
@@ -161,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/editor.js

@@ -42,6 +42,7 @@ class LCSEditor extends Fabric {
                     this.widgets = _self_.widgets; //widgets;
                     this.lang = _LangManager.language;
                     this.helpers = _self_.helpers;
+                    this.tippy = tippy;
 
                     this.nodes = {};
                     this.scenes = {};
@@ -1564,18 +1565,37 @@ class LCSEditor extends Fabric {
                                 step: 10
                             }
                         }
+
                         if (Object.keys(sliderProps).includes(m.name)) {
 
-                            let currentValue = parseInt(JSON.parse(m.getValue()));
+
+                        let node = self.nodes[document.querySelector('#currentNode')._currentNode];
+                        
+                        let propGUI = node.children.filter(el=>{
+                           return el.name == "propGUI"
+                        })[0]
+
+                        let propMax = propGUI && (propGUI.properties[m.name + '_max']) ? 
+                        (propGUI.properties[m.name + '_max']).rawValue : null; 
+
+                        let propMin = propGUI && (propGUI.properties[m.name + '_min']) ? 
+                        (propGUI.properties[m.name + '_min']).rawValue : null; 
+
+                        let propStep = propGUI && (propGUI.properties[m.name + '_step']) ? 
+                        (propGUI.properties[m.name + '_min']).rawValue : null; 
+
+
+                            let currentValue = JSON.parse(m.getValue()) //parseInt(JSON.parse(m.getValue()));
 
                             let max = (currentValue > sliderProps[m.name].max) ? currentValue + 10 : sliderProps[m.name].max;
+                            let step = sliderProps[m.name].step ? sliderProps[m.name].step : 0.1;
 
                             var sliderComponent = self.widgets.sliderContinuous({
                                 'id': 'prop-slider-' + m.name,
                                 'label': 'Slider',
-                                'min': sliderProps[m.name].min,
-                                'max': max,
-                                'step': sliderProps[m.name].step ? sliderProps[m.name].step : 0.1,
+                                'min': propMin ? propMin : sliderProps[m.name].min,
+                                'max': propMax ? propMax : max,
+                                'step': propStep ? propStep : step,
                                 'value': currentValue, //parseInt(currenValue),
                                 'init': function () {
 
@@ -1990,160 +2010,364 @@ class LCSEditor extends Fabric {
                         ]
                     }
 
-                   function  pasteToScene (){
+                    function gizmoEdit() {
                         let nodeID = document.querySelector('#currentNode')._currentNode;
-                        if (nodeID !== vwf.application() || !self.copyBuffer){
-                            return {}
-                        }
-
-                        return  {
-                            $type: "div",
-                            $components: [
-                                self.widgets.floatActionButton({
-                                    label: "content_paste",
-                                    styleClass: "mdc-fab--mini",
-                                    onclickfunc: function () {
-                                        let nodeID = document.querySelector('#currentNode')._currentNode;
-                                        if (self.copyBuffer) {
-                                            let newNodeID = self.helpers.GUID();
-                                            let newName = self.helpers.randId();
-                                            let nodeDef = self.copyBuffer;
-                                            nodeDef.id = newNodeID;
-                                            vwf_view.kernel.callMethod(nodeID, "createChild", [newName, nodeDef]);
-                                            self.copyBuffer = null;
-                                        }
-
-
-
-                                    }
-                                })
-                            ]
-                        }
 
+                        let node = self.nodes[nodeID];
+                        let nodeProtos = LCSEditor.getPrototypes.call(self, self.kernel, node.extendsID);
 
-                    }
+                        let aframe = vwf.models["/drivers/model/aframe"];
+                        if (nodeID !== self.kernel.application() &&
+                            nodeProtos.includes("proxy/aframe/aentity.vwf") &&
+                            aframe && aframe.model.state.nodes[nodeID]) {
 
 
-                    let audioGUI = {
-                        $type: "div",
-                        class: "propGrid mdc-layout-grid max-width mdc-layout-grid--align-left",
-                        $components: [
-                            {
+                            return {
 
                                 $type: "div",
-                                class: "mdc-layout-grid__inner",
+                                class: "propGrid mdc-layout-grid max-width mdc-layout-grid--align-left",
                                 $components: [
                                     {
+
                                         $type: "div",
-                                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
+                                        class: "mdc-layout-grid__inner",
                                         $components: [
                                             {
+                                                $type: "div",
+                                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
+                                                $components: [
+                                                    {
 
 
-                                                $type: "span",
-                                                $text: "Sound: "
+                                                        $type: "span",
+                                                        $text: "Edit: ",
+
+                                                    }
+                                                ]
+                                            },
+                                            {
+                                                $type: "div",
+                                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-3",
+                                                $components: [
+                                                    self.widgets.switch({
+                                                        'id': 'editnode',
+                                                        'init': function () {
+                                                            //vwf_view.kernel.getProperty(this._currentNode, 'edit');
+                                                            //let nodeID = document.querySelector('#currentNode')._currentNode;
+                                                            let viewNode = document.querySelector("[id='" + this._currentNode + "']");
+                                                            let gizmo = viewNode.getAttribute('gizmo')
+
+                                                            const myEl = document.querySelector('#editnode');//this;
+                                                            if (myEl) {
+                                                                var editorSwitch = new mdc.switchControl.MDCSwitch(this);
+                                                                editorSwitch.checked = gizmo ? true : false;
+                                                                myEl.addEventListener('change',
+
+                                                                    function (e) {
+
+                                                                        //let gizmo = viewNode.getAttribute('gizmo')
+
+                                                                        //let nodeID = document.querySelector('#currentNode')._currentNode;
+                                                                        if (editorSwitch) {
+                                                                            let viewNode = document.querySelector("[id='" + this._currentNode + "']");
+                                                                            let chkAttr = editorSwitch.checked;//this.getAttribute('checked');
+                                                                            if (chkAttr) {
+                                                                                //self.kernel.setProperty(this._currentNode, 'edit', true);
+                                                                                viewNode.setAttribute('gizmo', {});
+                                                                                let inter = viewNode.getAttribute('interpolation');
+                                                                                if (inter) {
+                                                                                    // let viewDriver = vwf.views["/drivers/view/aframeComponent"];
+                                                                                    //viewDriver.interpolateView = false;
+                                                                                    viewNode.components.interpolation.node.viewEdit = true;
+
+
+                                                                                }
+
+
+                                                                            } else {
+                                                                                //self.kernel.setProperty(this._currentNode, 'edit', false);
+
+                                                                                viewNode.removeAttribute('gizmo');
+                                                                                let inter = viewNode.getAttribute('interpolation');
+                                                                                if (inter) {
+                                                                                    // let viewDriver = vwf.views["/drivers/view/aframeComponent"];
+                                                                                    // viewDriver.interpolateView = true;
+                                                                                    viewNode.components.interpolation.node.viewEdit = false;
+
+                                                                                }
+                                                                            }
+
+                                                                            //vwf_view.kernel.callMethod(nodeID, "createEditTool");
+                                                                            //vwf_view.kernel.callMethod(nodeID, "showCloseGizmo");
+
+                                                                        }
+                                                                    }
 
+                                                                );
+
+                                                            }
+                                                        }
+                                                    }
+                                                    )
+                                                ]
+                                            },
+                                            {
+                                                $type: "div",
+                                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
+                                                $components: [
+
+                                                    self.widgets.imageButton({
+                                                        imgSrc: "/drivers/view/editor/images/ui/icons/translate.png",
+                                                        styleClass: "editButton",
+                                                        onclickfunc: function (e) {
+                                                            let viewNode = document.querySelector("[id='" + this._currentNode + "']");
+                                                            let gizmo = viewNode.getAttribute('gizmo');
+                                                            gizmo ? viewNode.setAttribute('gizmo', { mode: 'translate' }) : null;
+                                                            // vwf_view.kernel.callMethod(this._currentNode, "setGizmoMode", ['translate'])
+                                                        }
+                                                    })
+                                                ]
+                                            },
+                                            {
+                                                $type: "div",
+                                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
+                                                $components: [
+
+                                                    self.widgets.imageButton({
+                                                        imgSrc: "/drivers/view/editor/images/ui/icons/rotate.png",
+                                                        styleClass: "editButton",
+                                                        onclickfunc: function (e) {
+                                                            let viewNode = document.querySelector("[id='" + this._currentNode + "']");
+                                                            let gizmo = viewNode.getAttribute('gizmo');
+                                                            gizmo ? viewNode.setAttribute('gizmo', { mode: 'rotate' }) : null;
+                                                            //vwf_view.kernel.callMethod(this._currentNode, "setGizmoMode", ['rotate'])
+                                                        }
+                                                    })
+                                                ]
+                                            },
+                                            {
+                                                $type: "div",
+                                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
+                                                $components: [
+
+                                                    self.widgets.imageButton({
+                                                        imgSrc: "/drivers/view/editor/images/ui/icons/scale.png",
+                                                        styleClass: "editButton",
+                                                        onclickfunc: function (e) {
+                                                            let viewNode = document.querySelector("[id='" + this._currentNode + "']");
+                                                            let gizmo = viewNode.getAttribute('gizmo');
+                                                            gizmo ? viewNode.setAttribute('gizmo', { mode: 'scale' }) : null;
+                                                            //vwf_view.kernel.callMethod(this._currentNode, "setGizmoMode", ['scale'])
+                                                        }
+                                                    })
+                                                ]
+                                            },
+                                            {
+                                                $type: "div",
+                                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-1",
+                                                $components: []
                                             }
                                         ]
-                                    },
-                                    {
-                                        $type: "div",
-                                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
-                                        $components: [
-                                            self.widgets.icontoggle({
-                                                'id': "soundStopStartSwitch",
-                                                'label': 'play',
-                                                'on': JSON.stringify({ "content": "pause", "label": "stop" }),
-                                                'off': JSON.stringify({ "content": "play_arrow", "label": "play" }),
-                                                'state': false,
-                                                'init': function () {
-                                                    var nodeID = this._currentNode;
+                                    }
 
-                                                    this._comp = new mdc.iconButtonToggle.MDCIconButtonToggle(this);
+                                ]
+                            }
 
-                                                    this.setAttribute('id', "soundStopStartSwitch-" + nodeID);
-                                                    let isPlaying = vwf.getProperty(nodeID, 'isPlaying');
-                                                    //mdc.iconToggle.MDCIconToggle.attachTo(this);
-                                                    this._comp.on = isPlaying;
+                        } else {
+                            return {}
+                        }
 
 
-                                                    this.addEventListener('MDCIconButtonToggle:change', (e) => {
+                    }
 
-                                                        // let avatarID = 'avatar-'+ vwf.moniker_;
-                                                        // let avatarNode = self.nodes['avatar-'+ vwf.moniker_];
-                                                        // let mode = JSON.parse(avatarNode.properties.selectMode.getValue());
+                    function pasteGUI() {
+                        let nodeID = document.querySelector('#currentNode')._currentNode;
 
-                                                        var nodeID = document.querySelector('#currentNode')._currentNode;
-                                                        let isPlaying = vwf.getProperty(nodeID, 'isPlaying');
+                        if (self.copyBuffer == null) return {}
 
-                                                        if (isPlaying) {
+                        let node = self.nodes[nodeID];
+                        let nodeProtos = LCSEditor.getPrototypes.call(self, self.kernel, node.extendsID);
 
-                                                            console.log("stop");
-                                                            vwf_view.kernel.callMethod(nodeID, "pauseSound");
+                        let nodeDef = self.copyBuffer;
+                        let newNodeProtos = LCSEditor.getPrototypes.call(self, self.kernel, nodeDef.extends);
 
-                                                        } else {
+                        if (nodeProtos.includes("proxy/aframe/componentNode.vwf") ||
+                            (nodeID == self.kernel.application() && newNodeProtos.includes("proxy/aframe/componentNode.vwf"))
+                        ) return {}
 
-                                                            console.log("play")
-                                                            vwf_view.kernel.callMethod(nodeID, "playSound");
-                                                        }
 
-                                                    });
+                        return self.widgets.floatActionButton({
+                            label: "content_paste",
+                            styleClass: "mdc-fab--mini",
+                            id: "pasteButton",
+                            tooltip: "Paste",
+                            onclickfunc: function () {
+                                //let nodeID = document.querySelector('#currentNode')._currentNode;
+                                //let node = self.nodes[nodeID];
+                                if (self.copyBuffer) {
+                                    let newNodeID = self.helpers.GUID();
+                                    let newName = self.helpers.randId();
 
-                                                }
-                                            })
-                                        ]
-                                    },
+                                    if (newNodeProtos.includes('proxy/aframe/componentNode.vwf') || newNodeProtos.includes('proxy/ohm/node.vwf')) {
+
+                                        vwf_view.kernel.callMethod(nodeID, "createChildComponent", [newName, nodeDef]);
+
+
+                                    } else {
+
+                                        if (nodeID !== self.kernel.application()) {
+                                            nodeDef.properties.position = [0, 0, 0];
+                                            nodeDef.properties.rotation = [0, 0, 0];
+                                            nodeDef.properties.scale = [1, 1, 1];
+                                        }
+
+                                        nodeDef.id = newNodeID;
+                                        vwf_view.kernel.callMethod(nodeID, "createChild", [newName, nodeDef]);
+                                    }
+
+
+                                    //self.copyBuffer = null;
+                                }
+
+
+
+                            }
+                        })
+
+                    }
+
+
+                    function audioGUI() {
+                        let nodeID = document.querySelector('#currentNode')._currentNode;
+                        let node = self.nodes[nodeID];
+                        let nodeProtos = LCSEditor.getPrototypes.call(self, self.kernel, node.extendsID);
+                        if (nodeID !== self.kernel.application() && nodeProtos.includes('proxy/aframe/a-sound-component.vwf')) {
+                            return {
+                                $type: "div",
+                                class: "propGrid mdc-layout-grid max-width mdc-layout-grid--align-left",
+                                $components: [
                                     {
+
                                         $type: "div",
-                                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
+                                        class: "mdc-layout-grid__inner",
                                         $components: [
                                             {
                                                 $type: "div",
-                                                style: "padding: 12px",
+                                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
                                                 $components: [
-                                                    self.widgets.iconButton({
-                                                        'label': 'stop',
-                                                        onclickfunc: function () {
+                                                    {
+
+
+                                                        $type: "span",
+                                                        $text: "Sound: "
+
+                                                    }
+                                                ]
+                                            },
+                                            {
+                                                $type: "div",
+                                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
+                                                $components: [
+                                                    self.widgets.icontoggle({
+                                                        'id': "soundStopStartSwitch",
+                                                        'label': 'play',
+                                                        'on': JSON.stringify({ "content": "pause", "label": "stop" }),
+                                                        'off': JSON.stringify({ "content": "play_arrow", "label": "play" }),
+                                                        'state': false,
+                                                        'init': function () {
                                                             var nodeID = this._currentNode;
-                                                            vwf_view.kernel.callMethod(nodeID, "stopSound");
-                                                        }
 
+                                                            this._comp = mdc.iconButton.MDCIconButtonToggle.attachTo(this);
+
+                                                            this.setAttribute('id', "soundStopStartSwitch-" + nodeID);
+                                                            let isPlaying = vwf.getProperty(nodeID, 'isPlaying');
+                                                            //mdc.iconToggle.MDCIconToggle.attachTo(this);
+                                                            this._comp.on = isPlaying;
+
+
+                                                            this.addEventListener('MDCIconButtonToggle:change', (e) => {
+
+                                                                // let avatarID = 'avatar-'+ vwf.moniker_;
+                                                                // let avatarNode = self.nodes['avatar-'+ vwf.moniker_];
+                                                                // let mode = JSON.parse(avatarNode.properties.selectMode.getValue());
+
+                                                                var nodeID = document.querySelector('#currentNode')._currentNode;
+                                                                let isPlaying = vwf.getProperty(nodeID, 'isPlaying');
+
+                                                                if (isPlaying) {
+
+                                                                    console.log("stop");
+                                                                    vwf_view.kernel.callMethod(nodeID, "pauseSound");
+
+                                                                } else {
+
+                                                                    console.log("play")
+                                                                    vwf_view.kernel.callMethod(nodeID, "playSound");
+                                                                }
+
+                                                            });
+
+                                                        }
                                                     })
                                                 ]
+                                            },
+                                            {
+                                                $type: "div",
+                                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
+                                                $components: [
+                                                    {
+                                                        $type: "div",
+                                                        style: "padding: 12px",
+                                                        $components: [
+                                                            self.widgets.iconButton({
+                                                                'label': 'stop',
+                                                                "styleClass": "mdc-button--outlined",
+                                                                "onclick": function () {
+                                                                    let nodeID = this._currentNode;
+                                                                    vwf_view.kernel.callMethod(nodeID, "stopSound");
+                                                                }
+
+                                                            })
+                                                        ]
+                                                    }
+                                                ]
                                             }
-                                        ]
-                                    }
 
 
-                                    // {
-                                    //     $type: "div",
-                                    //     class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-3",
-                                    //     $components: [
-                                    //         widgets.switch({
-                                    //         'id': 'editnode', 
-                                    //         'init': function(){
-                                    //             vwf_view.kernel.getProperty(this._currentNode, 'edit');
-                                    //         },
-                                    //         'onchange': function(e){
-
-                                    //             var nodeID = document.querySelector('#currentNode')._currentNode;
-                                    //             let chkAttr = this.getAttribute('checked');
-                                    //             if (chkAttr == "") {
-                                    //                 self.kernel.setProperty(this._currentNode, 'edit', false);
-
-                                    //             } else {
-                                    //                 self.kernel.setProperty(this._currentNode, 'edit', true);
-                                    //             }
-
-                                    //             vwf_view.kernel.callMethod(nodeID, "showCloseGizmo");
-                                    //         }
-                                    //     }
-                                    //     )
-                                    //     ]
-                                    // }
+                                            // {
+                                            //     $type: "div",
+                                            //     class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-3",
+                                            //     $components: [
+                                            //         widgets.switch({
+                                            //         'id': 'editnode', 
+                                            //         'init': function(){
+                                            //             vwf_view.kernel.getProperty(this._currentNode, 'edit');
+                                            //         },
+                                            //         'onchange': function(e){
+
+                                            //             var nodeID = document.querySelector('#currentNode')._currentNode;
+                                            //             let chkAttr = this.getAttribute('checked');
+                                            //             if (chkAttr == "") {
+                                            //                 self.kernel.setProperty(this._currentNode, 'edit', false);
+
+                                            //             } else {
+                                            //                 self.kernel.setProperty(this._currentNode, 'edit', true);
+                                            //             }
+
+                                            //             vwf_view.kernel.callMethod(nodeID, "showCloseGizmo");
+                                            //         }
+                                            //     }
+                                            //     )
+                                            //     ]
+                                            // }
+                                        ]
+                                    }
                                 ]
                             }
-                        ]
+                        } else {
+                            return {}
+                        }
+
                     }
 
                     var saveGUI = {};
@@ -2166,287 +2390,150 @@ class LCSEditor extends Fabric {
                         })
                     }
 
-                    let gizmoEdit = {
+                    function copyGUI() {
+                        let nodeID = document.querySelector('#currentNode')._currentNode;
+                        let node = self.nodes[nodeID];
+                        let nodeProtos = LCSEditor.getPrototypes.call(self, self.kernel, node.extendsID);
 
-                        $type: "div",
-                        class: "propGrid mdc-layout-grid max-width mdc-layout-grid--align-left",
-                        $components: [
-                            {
+                        if (nodeID && nodeID !== self.kernel.application()) {
 
-                                $type: "div",
-                                class: "mdc-layout-grid__inner",
-                                $components: [
-                                    {
-                                        $type: "div",
-                                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
-                                        $components: [
-                                            {
+                            var dublicate = {}
+                            if (!nodeProtos.includes("proxy/aframe/componentNode.vwf")) {
+                                dublicate = self.widgets.floatActionButton({
+                                    label: "content_copy",
+                                    styleClass: "mdc-fab--mini",
+                                    id: "dublicateButton",
+                                    tooltip: "Dublicate",
+                                    onclickfunc: function () {
+                                        //var nodeID = document.querySelector('#currentNode')._currentNode;
+                                        let nodeDef = self.helpers.getNodeDef(nodeID);
+                                        let newName = self.helpers.randId();
+                                        let newNodeID = self.helpers.GUID();
+                                        nodeDef.id = newNodeID;
+                                        //let node = self.nodes[nodeID];
+                                        vwf_view.kernel.callMethod(node.parentID, "createChild", [newName, nodeDef]);
 
+                                    }
+                                })
+                            }
 
-                                                $type: "span",
-                                                $text: "Edit: ",
+                            return {
 
-                                            }
-                                        ]
-                                    },
+                                $type: "div",
+                                class: "propGrid mdc-layout-grid max-width mdc-layout-grid--align-left",
+                                $components: [
                                     {
+
                                         $type: "div",
-                                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-3",
+                                        class: "mdc-layout-grid__inner",
                                         $components: [
-                                            self.widgets.switch({
-                                                'id': 'editnode',
-                                                'init': function () {
-                                                    //vwf_view.kernel.getProperty(this._currentNode, 'edit');
-                                                    //let nodeID = document.querySelector('#currentNode')._currentNode;
-                                                    let viewNode = document.querySelector("[id='" + this._currentNode + "']");
-                                                    let gizmo = viewNode.getAttribute('gizmo')
-
-                                                    const myEl = document.querySelector('#editnode');//this;
-                                                    if (myEl) {
-                                                        var editorSwitch = new mdc.switchControl.MDCSwitch(this);
-                                                        editorSwitch.checked = gizmo ? true : false;
-                                                        myEl.addEventListener('change',
 
-                                                            function (e) {
-
-                                                                //let gizmo = viewNode.getAttribute('gizmo')
-
-                                                                //let nodeID = document.querySelector('#currentNode')._currentNode;
-                                                                if (editorSwitch) {
-                                                                    let viewNode = document.querySelector("[id='" + this._currentNode + "']");
-                                                                    let chkAttr = editorSwitch.checked;//this.getAttribute('checked');
-                                                                    if (chkAttr) {
-                                                                        //self.kernel.setProperty(this._currentNode, 'edit', true);
-                                                                        viewNode.setAttribute('gizmo', {});
-                                                                        let inter = viewNode.getAttribute('interpolation');
-                                                                        if (inter) {
-                                                                            // let viewDriver = vwf.views["/drivers/view/aframeComponent"];
-                                                                            //viewDriver.interpolateView = false;
-                                                                            viewNode.components.interpolation.node.viewEdit = true;
+                                            {
+                                                $type: "div",
+                                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
+                                                $components: [
+                                                    dublicate
+                                                ]
+                                            },
+                                            {
+                                                $type: "div",
+                                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
+                                                $components: [
+                                                    // self.widgets.tooltip({
+                                                    //     id:"copy-",
+                                                    //     text:"Copy"
+                                                    // }),
+                                                    self.widgets.floatActionButton({
+                                                        label: "file_copy",
+                                                        styleClass: "mdc-fab--mini",
+                                                        id: "copyButton",
+                                                        tooltip: "Copy",
+                                                        onclickfunc: function () {
+                                                            //var nodeID = document.querySelector('#currentNode')._currentNode;
+                                                            let nodeDef = self.helpers.getNodeDef(nodeID);
 
+                                                            if (nodeProtos.includes("proxy/aframe/componentNode.vwf")) {
 
-                                                                        }
+                                                                if (!nodeDef.properties) nodeDef.properties = {}
 
+                                                                nodeDef.properties.displayName = node.name;
+                                                                nodeDef.type = "component";
+                                                            }
 
-                                                                    } else {
-                                                                        //self.kernel.setProperty(this._currentNode, 'edit', false);
+                                                            self.copyBuffer = nodeDef
+                                                        }
+                                                    })
+                                                ]
+                                            },
+                                            {
+                                                $type: "div",
+                                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
+                                                $components: [
 
-                                                                        viewNode.removeAttribute('gizmo');
-                                                                        let inter = viewNode.getAttribute('interpolation');
-                                                                        if (inter) {
-                                                                            // let viewDriver = vwf.views["/drivers/view/aframeComponent"];
-                                                                            // viewDriver.interpolateView = true;
-                                                                            viewNode.components.interpolation.node.viewEdit = false;
+                                                    self.widgets.floatActionButton({
+                                                        label: "content_cut",
+                                                        styleClass: "mdc-fab--mini",
+                                                        id: "cutButton",
+                                                        tooltip: "Cut",
+                                                        onclickfunc: function () {
+                                                            //var nodeID = document.querySelector('#currentNode')._currentNode;
+                                                            let nodeDef = self.helpers.getNodeDef(nodeID);
 
-                                                                        }
-                                                                    }
+                                                            if (nodeProtos.includes("proxy/aframe/componentNode.vwf")) {
 
-                                                                    //vwf_view.kernel.callMethod(nodeID, "createEditTool");
-                                                                    //vwf_view.kernel.callMethod(nodeID, "showCloseGizmo");
+                                                                if (!nodeDef.properties) nodeDef.properties = {}
 
-                                                                }
+                                                                nodeDef.properties.displayName = node.name;
                                                             }
 
-                                                        );
-
-                                                    }
-                                                }
-                                            }
-                                            )
-                                        ]
-                                    },
-                                    {
-                                        $type: "div",
-                                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
-                                        $components: [
-
-                                            self.widgets.imageButton({
-                                                imgSrc: "/drivers/view/editor/images/ui/icons/translate.png",
-                                                styleClass: "editButton",
-                                                onclickfunc: function (e) {
-                                                    let viewNode = document.querySelector("[id='" + this._currentNode + "']");
-                                                    let gizmo = viewNode.getAttribute('gizmo');
-                                                    gizmo ? viewNode.setAttribute('gizmo', { mode: 'translate' }) : null;
-                                                    // vwf_view.kernel.callMethod(this._currentNode, "setGizmoMode", ['translate'])
-                                                }
-                                            })
-                                        ]
-                                    },
-                                    {
-                                        $type: "div",
-                                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
-                                        $components: [
-
-                                            self.widgets.imageButton({
-                                                imgSrc: "/drivers/view/editor/images/ui/icons/rotate.png",
-                                                styleClass: "editButton",
-                                                onclickfunc: function (e) {
-                                                    let viewNode = document.querySelector("[id='" + this._currentNode + "']");
-                                                    let gizmo = viewNode.getAttribute('gizmo');
-                                                    gizmo ? viewNode.setAttribute('gizmo', { mode: 'rotate' }) : null;
-                                                    //vwf_view.kernel.callMethod(this._currentNode, "setGizmoMode", ['rotate'])
-                                                }
-                                            })
-                                        ]
-                                    },
-                                    {
-                                        $type: "div",
-                                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
-                                        $components: [
 
-                                            self.widgets.imageButton({
-                                                imgSrc: "/drivers/view/editor/images/ui/icons/scale.png",
-                                                styleClass: "editButton",
-                                                onclickfunc: function (e) {
-                                                    let viewNode = document.querySelector("[id='" + this._currentNode + "']");
-                                                    let gizmo = viewNode.getAttribute('gizmo');
-                                                    gizmo ? viewNode.setAttribute('gizmo', { mode: 'scale' }) : null;
-                                                    //vwf_view.kernel.callMethod(this._currentNode, "setGizmoMode", ['scale'])
-                                                }
-                                            })
-                                        ]
-                                    },
-                                    {
-                                        $type: "div",
-                                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-1",
-                                        $components: []
-                                    },
-                                    {
-                                        $type: "div",
-                                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2 tooltip",
-                                        $components: [
-                                            {
-                                                class: "tooltiptext",
-                                                $type: "span",
-                                                $text: "Dublicate"
-                                            },
-                                            self.widgets.floatActionButton({
-                                                label: "content_copy",
-                                                styleClass: "mdc-fab--mini",
-                                                onclickfunc: function () {
-                                                    var nodeID = document.querySelector('#currentNode')._currentNode;
-                                                    let nodeDef = self.helpers.getNodeDef(nodeID);
-                                                    let newName = self.helpers.randId();
-                                                    let newNodeID = self.helpers.GUID();
-                                                    nodeDef.id = newNodeID;
-                                                    let node = self.nodes[nodeID];
-                                                    vwf_view.kernel.callMethod(node.parentID, "createChild", [newName, nodeDef]);
+                                                            self.copyBuffer = nodeDef;
+                                                            vwf_view.kernel.deleteNode(nodeID);
 
-                                                }
-                                            })
-                                        ]
-                                    },
-                                    {
-                                        $type: "div",
-                                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2 tooltip",
-                                        $components: [
-                                            {
-                                                class: "tooltiptext",
-                                                $type: "span",
-                                                $text: "Copy"
-                                            },
-                                            self.widgets.floatActionButton({
-                                                label: "file_copy",
-                                                styleClass: "mdc-fab--mini",
-                                                onclickfunc: function () {
-                                                    var nodeID = document.querySelector('#currentNode')._currentNode;
-                                                    let nodeDef = self.helpers.getNodeDef(nodeID);
-                                                    self.copyBuffer = nodeDef
-                                                }
-                                            })
-                                        ]
-                                    },
-                                    {
-                                        $type: "div",
-                                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2 tooltip",
-                                        $components: [
-                                            {
-                                                class: "tooltiptext",
-                                                $type: "span",
-                                                $text: "Cut"
+                                                        }
+                                                    })
+                                                ]
                                             },
-                                            self.widgets.floatActionButton({
-                                                label: "content_cut",
-                                                styleClass: "mdc-fab--mini",
-                                                onclickfunc: function () {
-                                                    var nodeID = document.querySelector('#currentNode')._currentNode;
-                                                    let nodeDef = self.helpers.getNodeDef(nodeID);
-                                                    self.copyBuffer = nodeDef;
-                                                    vwf_view.kernel.deleteNode(nodeID);
 
-                                                }
-                                            })
-                                        ]
-                                    },
-                                    {
-                                        $type: "div",
-                                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2 tooltip",
-                                        $components: [
                                             {
-                                                class: "tooltiptext",
-                                                $type: "span",
-                                                $text: "Paste"
-                                            },
-                                            self.widgets.floatActionButton({
-                                                label: "content_paste",
-                                                styleClass: "mdc-fab--mini",
-                                                onclickfunc: function () {
-                                                    var nodeID = document.querySelector('#currentNode')._currentNode;
-                                                    if (self.copyBuffer) {
-                                                        let newNodeID = self.helpers.GUID();
-                                                        let newName = self.helpers.randId();
-                                                        let nodeDef = self.copyBuffer;
-                                                        nodeDef.properties.position = [0, 0, 0];
-                                                        nodeDef.properties.rotation = [0, 0, 0];
-                                                        nodeDef.properties.scale = [1, 1, 1];
-                                                        nodeDef.id = newNodeID;
-                                                        vwf_view.kernel.callMethod(nodeID, "createChild", [newName, nodeDef]);
-                                                        self.copyBuffer = null;
-                                                    }
-
+                                                $type: "div",
+                                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
+                                                $components: [
 
+                                                    self.widgets.floatActionButton({
+                                                        label: "delete_forever",
+                                                        styleClass: "mdc-fab--mini",
+                                                        id: "deleteButton",
+                                                        tooltip: "Delete",
+                                                        onclickfunc: function () {
+                                                            vwf_view.kernel.deleteNode(nodeID);
+                                                        }
+                                                    }),
 
-                                                }
-                                            })
-                                        ]
-                                    },
-                                    {
-                                        $type: "div",
-                                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2 tooltip",
-                                        $components: [
-                                            {
-                                                class: "tooltiptext",
-                                                $type: "span",
-                                                $text: "Delete"
+                                                ]
                                             },
-                                            self.widgets.floatActionButton({
-                                                label: "delete_forever",
-                                                styleClass: "mdc-fab--mini",
-                                                onclickfunc: function () {
-                                                    var nodeID = document.querySelector('#currentNode')._currentNode;
-                                                    let node = self.nodes[nodeID];
-                                                    //vwf_view.kernel.deleteChild(node.parentID, node.name);
-                                                    //vwf_view.kernel.removeChild(node.parentID, nodeID);
-                                                    vwf_view.kernel.deleteNode(nodeID);
-                                                    //vwf_view.kernel.callMethod(node.parentID, "deleteNode", [node.name])
-                                                }
-                                            }),
-
-                                        ]
-                                    },
-                                    {
-                                        $type: "div",
-                                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
-                                        $components: [
-                                            saveGUI
+                                            {
+                                                $type: "div",
+                                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
+                                                $components: [
+                                                    //saveGUI
+                                                ]
+                                            }
                                         ]
-                                    },
+                                    }
+
                                 ]
                             }
 
-                        ]
+                        } else {
+                            return {}
+                        }
+
                     }
 
+
+                    //let gizmoEditOld = 
+
                     let nodesCell = {
 
                         $cell: true,
@@ -2518,19 +2605,24 @@ class LCSEditor extends Fabric {
                             var propsActions = {};
                             var propsActionsCell = {};
 
-                            var gizmoCell = {};
-                            if (this._currentNode !== self.kernel.application()) {
-                                if (nodeProtos.includes('proxy/aframe/componentNode.vwf')) {
-                                    //gizmoCell = {};
-                                    if (nodeProtos.includes('proxy/aframe/a-sound-component.vwf')) {
-                                        //console.log("sound gui")
-                                        gizmoCell = audioGUI
-                                    }
+                            let gizmoCell = gizmoEdit();
+                            let audioCell = audioGUI();
+                            let copyCell = copyGUI();
 
-                                } else {
-                                    gizmoCell = gizmoEdit
-                                }
-                            }
+
+                            // if (this._currentNode !== self.kernel.application()) {
+                            //     if (nodeProtos.includes('proxy/aframe/componentNode.vwf') || nodeProtos.includes('proxy/ohm/node.vwf') ) {
+                            //             gizmoCell = compEdit;
+
+                            //         if (nodeProtos.includes('proxy/aframe/a-sound-component.vwf')) {
+                            //             //console.log("sound gui")
+                            //             gizmoCell = audioGUI
+                            //         }
+
+                            //     } else {
+                            //         gizmoCell = gizmoEdit
+                            //     }
+                            // }
 
                             if (node !== undefined) {
 
@@ -2710,7 +2802,7 @@ class LCSEditor extends Fabric {
                                                     class: "mdc-list-item__text mdc-typography--headline6"
                                                     //<h1 class="mdc-typography--display4">Big header</h1>
                                                 },
-                                               
+
                                                 self.widgets.icontoggle({
                                                     'styleClass': "", //mdc-top-app-bar__action-item
                                                     'id': "selectNodeSwitch",
@@ -2741,11 +2833,13 @@ class LCSEditor extends Fabric {
                                                         });
 
                                                     }
-                                                })
+                                                }),
+
+                                                pasteGUI()
 
                                             ]
                                         },
-                                        pasteToScene(),
+
                                         listDivider,
                                         {
                                             // $cell: true,
@@ -2794,6 +2888,10 @@ class LCSEditor extends Fabric {
                                             ]
                                         },
                                         gizmoCell,
+                                        audioCell,
+                                        listDivider,
+
+                                        copyCell,
                                         listDivider,
                                         {
                                             $type: "li",
@@ -4352,7 +4450,9 @@ class LCSEditor extends Fabric {
                 },
 
                 deletedNode: function (nodeID) {
-                    var node = this.nodes[nodeID];
+                    let node = this.nodes[nodeID];
+                    if (!node) return
+
                     node.parent.children.splice(node.parent.children.indexOf(node), 1);
                     delete this.nodes[nodeID];
 

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.css

@@ -372,7 +372,6 @@
   text-transform: uppercase;
   /* @alternate */
   text-transform: var(--mdc-typography-button-text-transform, uppercase);
-  padding: 0 8px 0 8px;
   /* @alternate */
   position: relative;
   display: inline-flex;
@@ -391,10 +390,6 @@
   -webkit-appearance: none;
   overflow: visible;
   vertical-align: middle;
-  border-radius: 4px;
-  /* @alternate */
-  border-radius: var(--mdc-shape-small, 4px);
-  height: 36px;
 }
 .mdc-button .mdc-elevation-overlay {
   width: 100%;
@@ -417,17 +412,6 @@
   cursor: default;
   pointer-events: none;
 }
-.mdc-button .mdc-button__ripple {
-  border-radius: 4px;
-  /* @alternate */
-  border-radius: var(--mdc-shape-small, 4px);
-}
-.mdc-button:not(:disabled) {
-  background-color: transparent;
-}
-.mdc-button:disabled {
-  background-color: transparent;
-}
 .mdc-button .mdc-button__icon {
   /* @noflip */
   margin-left: 0;
@@ -454,14 +438,6 @@
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
 }
-.mdc-button:not(:disabled) {
-  color: #6200ee;
-  /* @alternate */
-  color: var(--mdc-theme-primary, #6200ee);
-}
-.mdc-button:disabled {
-  color: rgba(0, 0, 0, 0.38);
-}
 
 .mdc-button__label + .mdc-button__icon {
   /* @noflip */
@@ -522,70 +498,6 @@ svg.mdc-button__icon {
   margin-bottom: 6px;
 }
 
-.mdc-button--raised,
-.mdc-button--unelevated {
-  padding: 0 16px 0 16px;
-}
-.mdc-button--raised:not(:disabled),
-.mdc-button--unelevated:not(:disabled) {
-  background-color: #6200ee;
-  /* @alternate */
-  background-color: var(--mdc-theme-primary, #6200ee);
-}
-.mdc-button--raised:not(:disabled),
-.mdc-button--unelevated:not(:disabled) {
-  color: #fff;
-  /* @alternate */
-  color: var(--mdc-theme-on-primary, #fff);
-}
-.mdc-button--raised:disabled,
-.mdc-button--unelevated:disabled {
-  background-color: rgba(0, 0, 0, 0.12);
-}
-.mdc-button--raised:disabled,
-.mdc-button--unelevated:disabled {
-  color: rgba(0, 0, 0, 0.38);
-}
-
-.mdc-button--raised {
-  /* @alternate */
-  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-.mdc-button--raised:hover, .mdc-button--raised:focus {
-  /* @alternate */
-  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
-}
-.mdc-button--raised:active {
-  /* @alternate */
-  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
-}
-.mdc-button--raised:disabled {
-  /* @alternate */
-  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
-}
-
-.mdc-button--outlined {
-  padding: 0 15px 0 15px;
-  border-width: 1px;
-  border-style: solid;
-}
-.mdc-button--outlined .mdc-button__ripple {
-  top: -1px;
-  left: -1px;
-  border: 1px solid transparent;
-}
-.mdc-button--outlined .mdc-button__touch {
-  left: -1px;
-  width: calc(100% + 2 * 1px);
-}
-.mdc-button--outlined:not(:disabled) {
-  border-color: rgba(0, 0, 0, 0.12);
-}
-.mdc-button--outlined:disabled {
-  border-color: rgba(0, 0, 0, 0.12);
-}
-
 @-webkit-keyframes mdc-ripple-fg-radius-in {
   from {
     -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -720,6 +632,61 @@ svg.mdc-button__icon {
   width: var(--mdc-ripple-fg-size, 100%);
   height: var(--mdc-ripple-fg-size, 100%);
 }
+.mdc-button .mdc-button__ripple {
+  position: absolute;
+  box-sizing: content-box;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.mdc-button:not(.mdc-button--outlined) .mdc-button__ripple {
+  top: 0;
+  left: 0;
+}
+
+.mdc-button--raised {
+  /* @alternate */
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.mdc-button--raised:hover, .mdc-button--raised:focus {
+  /* @alternate */
+  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+}
+.mdc-button--raised:active {
+  /* @alternate */
+  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+.mdc-button--raised:disabled {
+  /* @alternate */
+  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+}
+
+.mdc-button--outlined {
+  border-style: solid;
+}
+
+.mdc-button {
+  height: 36px;
+  border-radius: 4px;
+  /* @alternate */
+  border-radius: var(--mdc-shape-small, 4px);
+  padding: 0 8px 0 8px;
+}
+.mdc-button:not(:disabled) {
+  background-color: transparent;
+}
+.mdc-button:disabled {
+  background-color: transparent;
+}
+.mdc-button:not(:disabled) {
+  color: #6200ee;
+  /* @alternate */
+  color: var(--mdc-theme-primary, #6200ee);
+}
+.mdc-button:disabled {
+  color: rgba(0, 0, 0, 0.38);
+}
 .mdc-button .mdc-button__ripple::before, .mdc-button .mdc-button__ripple::after {
   background-color: #6200ee;
   /* @alternate */
@@ -749,54 +716,186 @@ svg.mdc-button__icon {
   --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12);
 }
 .mdc-button .mdc-button__ripple {
-  position: absolute;
-  box-sizing: content-box;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-.mdc-button:not(.mdc-button--outlined) .mdc-button__ripple {
-  top: 0;
-  left: 0;
+  border-radius: 4px;
+  /* @alternate */
+  border-radius: var(--mdc-shape-small, 4px);
 }
 
-.mdc-button--raised .mdc-button__ripple::before, .mdc-button--raised .mdc-button__ripple::after,
-.mdc-button--unelevated .mdc-button__ripple::before,
-.mdc-button--unelevated .mdc-button__ripple::after {
+.mdc-button--unelevated {
+  padding: 0 16px 0 16px;
+  height: 36px;
+  border-radius: 4px;
+  /* @alternate */
+  border-radius: var(--mdc-shape-small, 4px);
+}
+.mdc-button--unelevated:not(:disabled) {
+  background-color: #6200ee;
+  /* @alternate */
+  background-color: var(--mdc-theme-primary, #6200ee);
+}
+.mdc-button--unelevated:disabled {
+  background-color: rgba(0, 0, 0, 0.12);
+}
+.mdc-button--unelevated:not(:disabled) {
+  color: #fff;
+  /* @alternate */
+  color: var(--mdc-theme-on-primary, #fff);
+}
+.mdc-button--unelevated:disabled {
+  color: rgba(0, 0, 0, 0.38);
+}
+.mdc-button--unelevated .mdc-button__ripple::before, .mdc-button--unelevated .mdc-button__ripple::after {
   background-color: #fff;
   /* @alternate */
   background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff));
 }
-.mdc-button--raised:hover .mdc-button__ripple::before, .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before,
-.mdc-button--unelevated:hover .mdc-button__ripple::before,
-.mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before {
+.mdc-button--unelevated:hover .mdc-button__ripple::before, .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before {
   opacity: 0.08;
   /* @alternate */
   opacity: var(--mdc-ripple-hover-opacity, 0.08);
 }
-.mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before,
-.mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before,
-.mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before {
+.mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before {
   transition-duration: 75ms;
   opacity: 0.24;
   /* @alternate */
   opacity: var(--mdc-ripple-focus-opacity, 0.24);
 }
-.mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after,
 .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after {
   transition: opacity 150ms linear;
 }
-.mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after,
 .mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after {
   transition-duration: 75ms;
   opacity: 0.24;
   /* @alternate */
   opacity: var(--mdc-ripple-press-opacity, 0.24);
 }
-.mdc-button--raised.mdc-ripple-upgraded,
 .mdc-button--unelevated.mdc-ripple-upgraded {
   --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24);
 }
+.mdc-button--unelevated .mdc-button__ripple {
+  border-radius: 4px;
+  /* @alternate */
+  border-radius: var(--mdc-shape-small, 4px);
+}
+
+.mdc-button--raised {
+  padding: 0 16px 0 16px;
+}
+.mdc-button--raised:not(:disabled) {
+  background-color: #6200ee;
+  /* @alternate */
+  background-color: var(--mdc-theme-primary, #6200ee);
+}
+.mdc-button--raised:not(:disabled) {
+  color: #fff;
+  /* @alternate */
+  color: var(--mdc-theme-on-primary, #fff);
+}
+.mdc-button--raised:disabled {
+  background-color: rgba(0, 0, 0, 0.12);
+}
+.mdc-button--raised:disabled {
+  color: rgba(0, 0, 0, 0.38);
+}
+.mdc-button--raised .mdc-button__ripple::before, .mdc-button--raised .mdc-button__ripple::after {
+  background-color: #fff;
+  /* @alternate */
+  background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff));
+}
+.mdc-button--raised:hover .mdc-button__ripple::before, .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before {
+  opacity: 0.08;
+  /* @alternate */
+  opacity: var(--mdc-ripple-hover-opacity, 0.08);
+}
+.mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before {
+  transition-duration: 75ms;
+  opacity: 0.24;
+  /* @alternate */
+  opacity: var(--mdc-ripple-focus-opacity, 0.24);
+}
+.mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after {
+  transition: opacity 150ms linear;
+}
+.mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after {
+  transition-duration: 75ms;
+  opacity: 0.24;
+  /* @alternate */
+  opacity: var(--mdc-ripple-press-opacity, 0.24);
+}
+.mdc-button--raised.mdc-ripple-upgraded {
+  --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24);
+}
+
+.mdc-button--outlined {
+  height: 36px;
+  border-radius: 4px;
+  /* @alternate */
+  border-radius: var(--mdc-shape-small, 4px);
+  padding: 0 15px 0 15px;
+  border-width: 1px;
+}
+.mdc-button--outlined:not(:disabled) {
+  background-color: transparent;
+}
+.mdc-button--outlined:disabled {
+  background-color: transparent;
+}
+.mdc-button--outlined:not(:disabled) {
+  color: #6200ee;
+  /* @alternate */
+  color: var(--mdc-theme-primary, #6200ee);
+}
+.mdc-button--outlined:disabled {
+  color: rgba(0, 0, 0, 0.38);
+}
+.mdc-button--outlined .mdc-button__ripple::before, .mdc-button--outlined .mdc-button__ripple::after {
+  background-color: #6200ee;
+  /* @alternate */
+  background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee));
+}
+.mdc-button--outlined:hover .mdc-button__ripple::before, .mdc-button--outlined.mdc-ripple-surface--hover .mdc-button__ripple::before {
+  opacity: 0.04;
+  /* @alternate */
+  opacity: var(--mdc-ripple-hover-opacity, 0.04);
+}
+.mdc-button--outlined.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .mdc-button--outlined:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before {
+  transition-duration: 75ms;
+  opacity: 0.12;
+  /* @alternate */
+  opacity: var(--mdc-ripple-focus-opacity, 0.12);
+}
+.mdc-button--outlined:not(.mdc-ripple-upgraded) .mdc-button__ripple::after {
+  transition: opacity 150ms linear;
+}
+.mdc-button--outlined:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after {
+  transition-duration: 75ms;
+  opacity: 0.12;
+  /* @alternate */
+  opacity: var(--mdc-ripple-press-opacity, 0.12);
+}
+.mdc-button--outlined.mdc-ripple-upgraded {
+  --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12);
+}
+.mdc-button--outlined .mdc-button__ripple {
+  border-radius: 4px;
+  /* @alternate */
+  border-radius: var(--mdc-shape-small, 4px);
+}
+.mdc-button--outlined:not(:disabled) {
+  border-color: rgba(0, 0, 0, 0.12);
+}
+.mdc-button--outlined:disabled {
+  border-color: rgba(0, 0, 0, 0.12);
+}
+.mdc-button--outlined .mdc-button__ripple {
+  top: -1px;
+  left: -1px;
+  border: 1px solid transparent;
+}
+.mdc-button--outlined .mdc-button__touch {
+  left: -1px;
+  width: calc(100% + 2 * 1px);
+}
 
 .mdc-card {
   border-radius: 4px;
@@ -4772,6 +4871,8 @@ svg.mdc-button__icon {
 
 .mdc-data-table__pagination-rows-per-page-select {
   min-width: 80px;
+  /* @alternate */
+  min-width: var(--mdc-menu-min-width, 80px);
   margin: 8px 0;
 }
 .mdc-data-table__pagination-rows-per-page-select .mdc-select__anchor {
@@ -5030,9 +5131,13 @@ svg.mdc-button__icon {
 .mdc-dialog .mdc-dialog__content {
   color: rgba(0, 0, 0, 0.6);
 }
-.mdc-dialog.mdc-dialog--scrollable .mdc-dialog__title, .mdc-dialog.mdc-dialog--scrollable .mdc-dialog__actions {
+.mdc-dialog.mdc-dialog--scrollable .mdc-dialog__title, .mdc-dialog.mdc-dialog--scrollable .mdc-dialog__actions, .mdc-dialog.mdc-dialog--scrollable.mdc-dialog-scroll-divider-footer .mdc-dialog__actions {
   border-color: rgba(0, 0, 0, 0.12);
 }
+.mdc-dialog.mdc-dialog-scroll-divider-header.mdc-dialog--fullscreen .mdc-dialog__header {
+  /* @alternate */
+  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+}
 .mdc-dialog .mdc-dialog__content {
   padding: 20px 24px 20px 24px;
 }
@@ -5226,6 +5331,9 @@ svg.mdc-button__icon {
   height: 24px;
   padding: 0px;
 }
+.mdc-dialog--fullscreen.mdc-dialog--scrollable .mdc-dialog__actions {
+  border-top: 1px solid transparent;
+}
 
 .mdc-dialog__content {
   -moz-osx-font-smoothing: grayscale;
@@ -7717,73 +7825,34 @@ svg.mdc-button__icon {
   -webkit-animation: mdc-linear-progress-secondary-indeterminate-scale 2s infinite linear;
           animation: mdc-linear-progress-secondary-indeterminate-scale 2s infinite linear;
 }
-.mdc-linear-progress--reversed .mdc-linear-progress__bar {
-  /* @noflip */
-  right: 0;
-  /* @noflip */
-  -webkit-transform-origin: center right;
-          transform-origin: center right;
-}
-.mdc-linear-progress--reversed.mdc-linear-progress--animation-ready .mdc-linear-progress__primary-bar {
-  -webkit-animation-name: mdc-linear-progress-primary-indeterminate-translate-reverse;
-          animation-name: mdc-linear-progress-primary-indeterminate-translate-reverse;
-}
-.mdc-linear-progress--reversed.mdc-linear-progress--animation-ready .mdc-linear-progress__secondary-bar {
-  -webkit-animation-name: mdc-linear-progress-secondary-indeterminate-translate-reverse;
-          animation-name: mdc-linear-progress-secondary-indeterminate-translate-reverse;
-}
-.mdc-linear-progress--reversed .mdc-linear-progress__buffer-dots {
-  -webkit-animation: mdc-linear-progress-buffering-reverse 250ms infinite linear;
-          animation: mdc-linear-progress-buffering-reverse 250ms infinite linear;
-  -webkit-transform: rotate(0);
-          transform: rotate(0);
-}
-.mdc-linear-progress--reversed.mdc-linear-progress--indeterminate .mdc-linear-progress__primary-bar {
-  /* @noflip */
-  right: -145.166611%;
-  /* @noflip */
-  left: auto;
-}
-.mdc-linear-progress--reversed.mdc-linear-progress--indeterminate .mdc-linear-progress__secondary-bar {
-  /* @noflip */
-  right: -54.888891%;
-  /* @noflip */
-  left: auto;
-}
-.mdc-linear-progress--reversed .mdc-linear-progress__buffer-dots {
-  order: 0;
-}
-.mdc-linear-progress--reversed .mdc-linear-progress__buffer-bar {
-  order: 1;
-}
-[dir=rtl] .mdc-linear-progress .mdc-linear-progress__bar, .mdc-linear-progress[dir=rtl] .mdc-linear-progress__bar {
+[dir=rtl] .mdc-linear-progress:not([dir=ltr]) .mdc-linear-progress__bar, .mdc-linear-progress[dir=rtl]:not([dir=ltr]) .mdc-linear-progress__bar {
   /* @noflip */
   right: 0;
   /* @noflip */
   -webkit-transform-origin: center right;
           transform-origin: center right;
 }
-[dir=rtl] .mdc-linear-progress.mdc-linear-progress--animation-ready .mdc-linear-progress__primary-bar, .mdc-linear-progress[dir=rtl].mdc-linear-progress--animation-ready .mdc-linear-progress__primary-bar {
+[dir=rtl] .mdc-linear-progress:not([dir=ltr]).mdc-linear-progress--animation-ready .mdc-linear-progress__primary-bar, .mdc-linear-progress[dir=rtl]:not([dir=ltr]).mdc-linear-progress--animation-ready .mdc-linear-progress__primary-bar {
   -webkit-animation-name: mdc-linear-progress-primary-indeterminate-translate-reverse;
           animation-name: mdc-linear-progress-primary-indeterminate-translate-reverse;
 }
-[dir=rtl] .mdc-linear-progress.mdc-linear-progress--animation-ready .mdc-linear-progress__secondary-bar, .mdc-linear-progress[dir=rtl].mdc-linear-progress--animation-ready .mdc-linear-progress__secondary-bar {
+[dir=rtl] .mdc-linear-progress:not([dir=ltr]).mdc-linear-progress--animation-ready .mdc-linear-progress__secondary-bar, .mdc-linear-progress[dir=rtl]:not([dir=ltr]).mdc-linear-progress--animation-ready .mdc-linear-progress__secondary-bar {
   -webkit-animation-name: mdc-linear-progress-secondary-indeterminate-translate-reverse;
           animation-name: mdc-linear-progress-secondary-indeterminate-translate-reverse;
 }
-[dir=rtl] .mdc-linear-progress .mdc-linear-progress__buffer-dots, .mdc-linear-progress[dir=rtl] .mdc-linear-progress__buffer-dots {
+[dir=rtl] .mdc-linear-progress:not([dir=ltr]) .mdc-linear-progress__buffer-dots, .mdc-linear-progress[dir=rtl]:not([dir=ltr]) .mdc-linear-progress__buffer-dots {
   -webkit-animation: mdc-linear-progress-buffering-reverse 250ms infinite linear;
           animation: mdc-linear-progress-buffering-reverse 250ms infinite linear;
   -webkit-transform: rotate(0);
           transform: rotate(0);
 }
-[dir=rtl] .mdc-linear-progress.mdc-linear-progress--indeterminate .mdc-linear-progress__primary-bar, .mdc-linear-progress[dir=rtl].mdc-linear-progress--indeterminate .mdc-linear-progress__primary-bar {
+[dir=rtl] .mdc-linear-progress:not([dir=ltr]).mdc-linear-progress--indeterminate .mdc-linear-progress__primary-bar, .mdc-linear-progress[dir=rtl]:not([dir=ltr]).mdc-linear-progress--indeterminate .mdc-linear-progress__primary-bar {
   /* @noflip */
   right: -145.166611%;
   /* @noflip */
   left: auto;
 }
-[dir=rtl] .mdc-linear-progress.mdc-linear-progress--indeterminate .mdc-linear-progress__secondary-bar, .mdc-linear-progress[dir=rtl].mdc-linear-progress--indeterminate .mdc-linear-progress__secondary-bar {
+[dir=rtl] .mdc-linear-progress:not([dir=ltr]).mdc-linear-progress--indeterminate .mdc-linear-progress__secondary-bar, .mdc-linear-progress[dir=rtl]:not([dir=ltr]).mdc-linear-progress--indeterminate .mdc-linear-progress__secondary-bar {
   /* @noflip */
   right: -54.888891%;
   /* @noflip */
@@ -10626,6 +10695,8 @@ a.mdc-evolution-list-item {
 
 .mdc-menu {
   min-width: 112px;
+  /* @alternate */
+  min-width: var(--mdc-menu-min-width, 112px);
 }
 .mdc-menu .mdc-list-item__meta {
   color: rgba(0, 0, 0, 0.87);
@@ -10705,7 +10776,11 @@ a.mdc-evolution-list-item {
   position: absolute;
   box-sizing: border-box;
   max-width: calc(100vw - 32px);
+  /* @alternate */
+  max-width: var(--mdc-menu-max-width, calc(100vw - 32px));
   max-height: calc(100vh - 32px);
+  /* @alternate */
+  max-height: var(--mdc-menu-max-height, calc(100vh - 32px));
   margin: 0;
   padding: 0;
   -webkit-transform: scale(1);
@@ -14580,6 +14655,10 @@ a.mdc-evolution-list-item {
   display: none;
 }
 
+.mdc-tooltip-wrapper--rich {
+  position: relative;
+}
+
 .mdc-tooltip--shown,
 .mdc-tooltip--showing,
 .mdc-tooltip--hide {
@@ -14594,6 +14673,7 @@ a.mdc-evolution-list-item {
   border-radius: 8px;
   left: -320px;
   padding: 8px 8px;
+  position: absolute;
 }
 .mdc-tooltip--shown.mdc-tooltip--rich .mdc-tooltip__surface,
 .mdc-tooltip--showing.mdc-tooltip--rich .mdc-tooltip__surface,

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'

public/lib/ui/widgets.js

@@ -572,11 +572,27 @@ class Widgets {
             addClass = obj.styleClass;
         }
 
+        if(obj.tooltip){
+            obj.init = function(){
+                let el = document.querySelector('#'+obj.id);
+                if(el)
+                tippy('#'+obj.id, {
+                    content: obj.tooltip,
+                    appendTo: document.body,
+                  });
+            }
+        } else {
+            obj.init = function(){}
+        }
+
         return {
             $cell: true,
+            id: obj.id,
             $type: "button",
             class: "mdc-fab material-icons " + addClass,
+            //"aria-describedby": obj.tooltip ? obj.tooltip: null,
             onclick: obj.onclickfunc,
+            $init: obj.init,
             $components: [
                 {
                     $cell: true,
@@ -651,15 +667,28 @@ class Widgets {
 
 
     gridListItemWithIco(obj) {
+
+        let objID = obj.title.toLowerCase();
+        let init = function(){
+            
+                let el = document.querySelector('#'+ objID);
+                if(el)
+                tippy('#'+obj.id, {
+                    content: obj.title,
+                    appendTo: document.body,
+                  });
+            
+        }
+
         return {
             $type: "div",
-            class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2 tooltip " + obj.styleClass,
+            class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2 " + obj.styleClass, // tooltip
             $components: [
-                {
-                    class: "tooltiptext",
-                    $type: "span",
-                    $text: obj.title
-                },
+                // {
+                //     class: "tooltiptext",
+                //     $type: "span",
+                //     $text: obj.title
+                // },
                 // {
 
                 //     $type: "button",
@@ -679,6 +708,8 @@ class Widgets {
                     style: "background-color: transparent;",
                     $components: [
                         {
+                            id: objID,
+                            $init: init,
                             $type: "i",
                             class: "material-icons mdc-list-item__graphic",
                             'aria-hidden': "true",
@@ -692,21 +723,66 @@ class Widgets {
         }
     }
 
-    gridListItem(obj) {
+    tooltip(obj){
+
         return {
+            $cell: true,
+            id: obj.id,
             $type: "div",
-            class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2 tooltip " + obj.styleClass,
+            class: "mdc-tooltip",
+            role: "tooltip",
+            "aria-hidden": true,
+            $init: function(){
+                this._tooltip = mdc.tooltip.MDCTooltip(this);
+            },
             $components: [
                 {
-                    class: "tooltiptext",
-                    $type: "span",
-                    $text: obj.title
-                },
+                    $type: "div",
+                    class: "mdc-tooltip__surface",
+                    $text: obj.text
+                }
+            ]
+        }
+//         <div id="tooltip-id" class="mdc-tooltip" role="tooltip" aria-hidden="true">
+//   <div class="mdc-tooltip__surface">
+//     lorem ipsum dolor
+//   </div>
+// </div>
+
+    }
+
+    gridListItem(obj) {
+
+        let objID = obj.title.toLowerCase().replace(/\s+/g, '');
+        let init = function(){
+            
+                let el = document.querySelector('#'+ objID);
+                if(el)
+                tippy('#'+objID, {
+                    content: obj.title,
+                    appendTo: document.body,
+                  });
+            
+        }
+
+
+        return {
+            $type: "div",
+            class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2 " + obj.styleClass, // tooltip
+            $components: [
+                // {
+                //     class: "tooltiptext",
+                //     $type: "span",
+                //     $text: obj.title
+                // },
                 {
                     $type: "div",
                     style: "background-color: transparent;",
                     $components: [
                         {
+                            $cell: true,
+                            id: objID,
+                            $init: init,
                             class: "",
                             $type: "div",
                             'aria-label': obj.title,
@@ -820,28 +896,33 @@ class Widgets {
                 _app.widgets.switch({
                     'id': 'forceDebug6DoF',
                     'init': function () {
-                        this._switch = new mdc.switchControl.MDCSwitch(this);
+
                         let config = localStorage.getItem('lcs_config');
+                        this._switch = new mdc.switchControl.MDCSwitch(this);
                         this._switch.checked = JSON.parse(config).d6DoF;
 
-                        // this._replaceSwitch = this._switch;
+                        this.addEventListener('change',
+                            function (e) {
 
-                    },
-                    'onchange': function (e) {
-
-                        if (this._switch) {
-                            let chkAttr = this._switch.checked;//this.getAttribute('checked');
-                            if (chkAttr) {
-                                let config = JSON.parse(localStorage.getItem('lcs_config'));
-                                config.d6DoF = true;
-                                localStorage.setItem('lcs_config', JSON.stringify(config));
-                                //this._switch.checked = false;
-                            } else {
-                                let config = JSON.parse(localStorage.getItem('lcs_config'));
-                                config.d6DoF = false;
-                                localStorage.setItem('lcs_config', JSON.stringify(config));
+                                if (this._switch) {
+                                    let chkAttr = this._switch.checked;//this.getAttribute('checked');
+                                    if (chkAttr) {
+                                        let config = JSON.parse(localStorage.getItem('lcs_config'));
+                                        config.d6DoF = true;
+                                        localStorage.setItem('lcs_config', JSON.stringify(config));
+                                        //this._switch.checked = false;
+                                    } else {
+                                        let config = JSON.parse(localStorage.getItem('lcs_config'));
+                                        config.d6DoF = false;
+                                        localStorage.setItem('lcs_config', JSON.stringify(config));
+                                    }
+                                }
                             }
-                        }
+                        )
+
+
+                        // this._replaceSwitch = this._switch;
+
                     }
                 }
                 ),
@@ -868,29 +949,33 @@ class Widgets {
                 _app.widgets.switch({
                     'id': 'forceDebug3DoF',
                     'init': function () {
-                        this._switch = new mdc.switchControl.MDCSwitch(this);
+
                         let config = localStorage.getItem('lcs_config');
+                        this._switch = new mdc.switchControl.MDCSwitch(this);
                         this._switch.checked = JSON.parse(config).d3DoF;
 
                         // this._replaceSwitch = this._switch;
-
-                    },
-                    'onchange': function (e) {
-
-                        if (this._switch) {
-                            let chkAttr = this._switch.checked;//this.getAttribute('checked');
-                            if (chkAttr) {
-                                let config = JSON.parse(localStorage.getItem('lcs_config'));
-                                config.d3DoF = true;
-                                localStorage.setItem('lcs_config', JSON.stringify(config));
-                                //this._switch.checked = false;
-                            } else {
-                                let config = JSON.parse(localStorage.getItem('lcs_config'));
-                                config.d3DoF = false;
-                                localStorage.setItem('lcs_config', JSON.stringify(config));
+                        this.addEventListener('change',
+                            function (e) {
+                                if (this._switch) {
+                                    let chkAttr = this._switch.checked;//this.getAttribute('checked');
+                                    if (chkAttr) {
+                                        let config = JSON.parse(localStorage.getItem('lcs_config'));
+                                        config.d3DoF = true;
+                                        localStorage.setItem('lcs_config', JSON.stringify(config));
+                                        //this._switch.checked = false;
+                                    } else {
+                                        let config = JSON.parse(localStorage.getItem('lcs_config'));
+                                        config.d3DoF = false;
+                                        localStorage.setItem('lcs_config', JSON.stringify(config));
+                                    }
+                                }
+                                
                             }
-                        }
+                        )
+
                     }
+                    
                 }
                 ),
                 {