interpolation work progress

public/aframe2/index.vwf.yaml

@@ -32,6 +32,15 @@ children:
       value: "Project by Krestianstvo.org"
       color: "#aaa"
       position: [1, 3, -4]
+  boxAnim:
+    extends: http://vwf.example.com/aframe/abox.vwf
+    properties:
+      position: [0, 0, -3]
+      rotation: [0, 0, 0]
+      color: "#3c7249"
+      depth: 2
+      height: 1
+      width: 1
   box:
     extends: http://vwf.example.com/aframe/abox.vwf
     properties:

public/plane/index.vwf.yaml

@@ -0,0 +1,48 @@
+# Copyright 2012 United States Government, as represented by the Secretary of Defense, Under
+# Secretary of Defense (Personnel & Readiness).
+# 
+# Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+# in compliance with the License. You may obtain a copy of the License at
+# 
+#   http://www.apache.org/licenses/LICENSE-2.0
+# 
+# Unless required by applicable law or agreed to in writing, software distributed under the License
+# is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+# or implied. See the License for the specific language governing permissions and limitations under
+# the License.
+
+--- 
+extends: http://vwf.example.com/scene.vwf
+children:
+  plane:
+    extends: plane.vwf
+    scripts:
+    - |
+      this.initialize = function() {
+        var initNode = function( nd ) { 
+          if ( Object.getPrototypeOf( nd ).children ) { 
+            Object.getPrototypeOf( nd ).children.forEach( function( child ) { 
+              this.children.create( child.name, { extends: child.id }, function( newNode ) {
+                initNode( newNode );
+              } );
+            }, nd );
+          }
+        }; 
+        initNode( this );
+      } //@ sourceURL=plane.initialize.vwf
+  sceneCenter:
+    extends: http://vwf.example.com/node3.vwf  
+  dir1:
+    extends: http://vwf.example.com/directionallight.vwf
+    properties:
+      distance: 2000
+      intensity: 0.9
+      color: [ 255, 255, 255 ]
+      position: [ 0, -1, 0 ]
+      rotation: [ 0, 0, 1, 90 ]
+scripts:
+- |
+    this.initialize = function(){
+      this.camera.translation = [ 0, -30, 0 ];
+      this.dir1.translation = [ 0, -100, 0 ];
+    }

public/plane/plane.vwf.yaml

@@ -0,0 +1,47 @@
+# Copyright 2012 United States Government, as represented by the Secretary of Defense, Under
+# Secretary of Defense (Personnel & Readiness).
+# 
+# Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+# in compliance with the License. You may obtain a copy of the License at
+# 
+#   http://www.apache.org/licenses/LICENSE-2.0
+# 
+# Unless required by applicable law or agreed to in writing, software distributed under the License
+# is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+# or implied. See the License for the specific language governing permissions and limitations under
+# the License.
+
+--- 
+extends: http://vwf.example.com/node3.vwf
+implements:
+- http://vwf.example.com/sway-on-click.vwf
+source: seymourplane_triangulate.dae
+type: model/vnd.collada+xml
+properties:
+  rotation: [ 0, 0, 1, -90 ]
+  # sway-on-click configuration parameters
+  sway-axis: [ 1, 0, 0 ]
+children:
+  plane: 
+    extends: http://vwf.example.com/node3.vwf 
+    children: 
+      prop:
+        extends: http://vwf.example.com/node3.vwf
+        # # 1: Uncomment to apply the spin-on-click behavior to the prop
+        # # ... located in public/types/spin-on-click.vwf.yaml
+        properties:
+          spin-rate: 23
+        implements:
+        - http://vwf.example.com/spin-on-click.vwf
+        # # 2: Uncomment to enable/disable sway and rotate the prop on click
+scripts:
+- |
+  this.pointerClick = function() {
+    if ( this["sway-swaying"] ) {
+      this["sway-swaying"] = false;
+      this.plane.prop["spin-spinning"] = false;
+    } else {
+      this["sway-swaying"] = true;
+      this.plane.prop["spin-spinning"] = true;
+    }
+  }

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

@@ -507,6 +507,47 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                          }
                      }
 
+
+                     if (value === undefined && aframeObject.nodeName == "A-ANIMATION") {
+                         value = propertyValue;
+                         switch (propertyName) {
+
+                             // attribute:
+                             // dur:
+                             // from:
+                             // to:
+                             // repeat:
+
+                             case "dur":
+                                 aframeObject.setAttribute('dur', propertyValue);
+                                 break;
+
+                             case "from":
+                                 aframeObject.setAttribute('from', propertyValue);
+                                 break;
+
+                             case "to":
+                                 aframeObject.setAttribute('to', propertyValue);
+                                 break;
+
+                             case "repeat":
+                                 aframeObject.setAttribute('repeat', propertyValue);
+                                 break;
+                            
+                            case "attribute":
+                                 aframeObject.setAttribute('attribute', propertyValue);
+                                 break;
+                            
+                            case "begin":
+                                 aframeObject.setAttribute('begin', propertyValue);
+                                 break;
+
+                             default:
+                                 value = undefined;
+                                 break;
+                         }
+                     }
+
                         if (value === undefined && aframeObject.nodeName == "A-CAMERA") {
                          value = propertyValue;
                           switch (propertyName) {
@@ -553,7 +594,7 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                     switch ( propertyName ) { 
 
                          case "enabled":
-                                        aframeObject.setAttribute('wasd-controls', 'enabled', propertyValue);
+                                        aframeObject.gettAttribute('wasd-controls', 'enabled');
                                         break;
 
                     }
@@ -729,6 +770,47 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                                 }
                 }
 
+
+                if ( value === undefined && aframeObject.nodeName == "A-ANIMATION" ) {
+                    
+
+                     switch (propertyName) {
+
+                        case "attribute":
+                        value = aframeObject.getAttribute('attribute');
+                        break;
+            
+               
+                    case "dur":
+                        value = aframeObject.getAttribute('dur');
+                        break;
+                
+
+               
+                    case "from":
+                        value = aframeObject.getAttribute('from');
+                        break;
+                
+
+                
+                    case "to":
+                        value = aframeObject.getAttribute('to');
+                        break;
+                
+
+             
+                    case "repeat":
+                        value = aframeObject.getAttribute('repeat');
+                        break;
+                    
+                
+                
+                    case "begin":
+                        value = aframeObject.getAttribute('begin');
+                        break;
+                }      
+                }
+
                  if ( value === undefined && aframeObject.nodeName == "A-CAMERA" ) {
         
 
@@ -804,6 +886,8 @@ function createAFrameObject(node, config) {
         aframeObj = document.createElement('a-collada-model');
     } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/asphere.vwf")) {
         aframeObj = document.createElement('a-sphere');
+    } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/aanimation.vwf")) {
+        aframeObj = document.createElement('a-animation');
     } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/aentity.vwf")) {
         aframeObj = document.createElement('a-entity');
     }

support/client/lib/vwf/model/aframe/addon/aframe-interpolation 2.js

@@ -0,0 +1,190 @@
+/* Interpolate component for A-Frame VR. https://github.com/scenevr/aframe-interpolate-component.git
+
+The MIT License (MIT)
+
+Copyright (c) 2015 Kevin Ngo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+
+/* globals AFRAME, performance, THREE */
+
+if (typeof AFRAME === 'undefined') {
+  throw new Error('Component attempted to register before AFRAME was available.');
+}
+
+function getMillis () {
+  return new Date().getTime();
+}
+
+function PositionInterpolator (timestep, entity) {
+  var time = getMillis();
+  var previous;
+  var next;
+
+  entity.el.addEventListener('componentchanged', function (event) {
+    if (getTime() < 0.5) {
+      // fixme - ignore multiple calls
+      return;
+    }
+
+    if (event.detail.name === 'position') {
+      if (!previous) {
+        previous = new THREE.Vector3();
+        next = new THREE.Vector3();
+      }
+
+      time = getMillis();
+      previous.copy(next);
+      next.copy(event.detail.newData);
+    }
+  });
+
+  function getTime () {
+    return (getMillis() - time) / timestep;
+  }
+
+  this.active = function () {
+    return previous && next && (getTime() < 1);
+  };
+
+  var v = new THREE.Vector3();
+
+  this.get = function () {
+    return v.lerpVectors(previous, next, getTime());
+  };
+}
+
+function radians(degrees) {
+ // return degrees * Math.PI / 180.0;
+ return THREE.Math.degToRad(degrees)
+}
+
+function RotationInterpolator (timestep, entity) {
+  var time = getMillis();
+  var previous;
+  var next;
+
+  entity.el.addEventListener('componentchanged', function (event) {
+    if (getTime() < 0.5) {
+      // fixme - ignore multiple calls
+      return;
+    }
+
+    if (event.detail.name === 'rotation') {
+      if (!previous) {
+        previous = new THREE.Quaternion();
+        next = new THREE.Quaternion();
+      }
+
+      time = getMillis();
+      previous.copy(next);
+      next.setFromEuler(new THREE.Euler(
+        radians(event.detail.newData.x),
+        radians(event.detail.newData.y),
+        radians(event.detail.newData.z),'YXZ'
+      ));
+    }
+  });
+
+  // var data = this.data;
+  // var object3D = this.el.object3D;
+  // object3D.rotation.set(degToRad(data.x), degToRad(data.y), degToRad(data.z));
+  // object3D.rotation.order = 'YXZ';
+
+
+
+  function getTime () {
+    return (getMillis() - time) / timestep;
+  }
+
+  this.active = function () {
+    return previous && next && (getTime() < 1);
+  };
+
+  var e = new THREE.Euler();
+  var q = new THREE.Quaternion();
+  this.get = function () {
+    THREE.Quaternion.slerp(previous, next, q, getTime());
+    return e.setFromQuaternion(q);
+  };
+}
+
+/**
+ * Interpolate component for A-Frame.
+ */
+AFRAME.registerComponent('interpolation-old', {
+  schema: {
+    duration: { default: 50 }
+  },
+
+  /**
+   * Called once when component is attached. Generally for initial setup.
+   */
+  init: function () {
+
+       // Set up the tick throttling.
+       this.tick = AFRAME.utils.throttleTick(this.throttledTick, 10, this);
+
+  },
+
+  /**
+   * Called when component is attached and when component data changes.
+   * Generally modifies the entity based on the data.
+   */
+  update: function (oldData) {
+    if (!this.interpolation) {
+      var timestep = parseInt(this.data.duration, 10);
+
+      this.positionInterpolator = new PositionInterpolator(timestep, this);
+      this.rotationInterpolator = new RotationInterpolator(timestep, this);
+    }
+  },
+
+  /**
+   * Called when a component is removed (e.g., via removeAttribute).
+   * Generally undoes all modifications to the entity.
+   */
+  remove: function () { },
+
+  /**
+   * Called on each scene tick.
+   */
+  throttledTick: function (t, dt) {
+    if (this.positionInterpolator && this.positionInterpolator.active()) {
+      this.el.object3D.position.copy(this.positionInterpolator.get());
+    }
+
+    if (this.rotationInterpolator && this.rotationInterpolator.active()) {
+      this.el.object3D.rotation.copy(this.rotationInterpolator.get());
+    }
+  },
+
+  /**
+   * Called when entity pauses.
+   * Use to stop or remove any dynamic or background behavior such as events.
+   */
+  pause: function () { },
+
+  /**
+   * Called when entity resumes.
+   * Use to continue or add any dynamic or background behavior such as events.
+   */
+  play: function () { },
+});

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

@@ -30,7 +30,8 @@ if (typeof AFRAME === 'undefined') {
 }
 
 function getMillis () {
-  return new Date().getTime();
+  //return new Date().getTime();
+  return performance.now()
 }
 
 function PositionInterpolator (timestep, entity) {
@@ -39,7 +40,8 @@ function PositionInterpolator (timestep, entity) {
   var next;
 
   entity.el.addEventListener('componentchanged', function (event) {
-    if (getTime() < 0.5) {
+
+    if (getTime() < 0.5 || getTime() == 0) {
       // fixme - ignore multiple calls
       return;
     }
@@ -61,7 +63,7 @@ function PositionInterpolator (timestep, entity) {
   }
 
   this.active = function () {
-    return previous && next && (getTime() < 1.0);
+    return previous && next && (getTime() < 1);
   };
 
   var v = new THREE.Vector3();
@@ -72,7 +74,8 @@ function PositionInterpolator (timestep, entity) {
 }
 
 function radians(degrees) {
-  return degrees * Math.PI / 180.0;
+ // return degrees * Math.PI / 180.0;
+ return THREE.Math.degToRad(degrees)
 }
 
 function RotationInterpolator (timestep, entity) {
@@ -81,7 +84,7 @@ function RotationInterpolator (timestep, entity) {
   var next;
 
   entity.el.addEventListener('componentchanged', function (event) {
-    if (getTime() < 0.5) {
+    if (getTime() < 0.5 || getTime() == 0) {
       // fixme - ignore multiple calls
       return;
     }
@@ -102,12 +105,19 @@ function RotationInterpolator (timestep, entity) {
     }
   });
 
+  // var data = this.data;
+  // var object3D = this.el.object3D;
+  // object3D.rotation.set(degToRad(data.x), degToRad(data.y), degToRad(data.z));
+  // object3D.rotation.order = 'YXZ';
+
+
+
   function getTime () {
     return (getMillis() - time) / timestep;
   }
 
   this.active = function () {
-    return previous && next && (getTime() < 1.0);
+    return previous && next && (getTime() < 1);
   };
 
   var e = new THREE.Euler();
@@ -123,15 +133,27 @@ function RotationInterpolator (timestep, entity) {
  */
 AFRAME.registerComponent('interpolation', {
   schema: {
-    duration: { default: 200 }
+    duration: { default: 50 }
   },
 
   /**
    * Called once when component is attached. Generally for initial setup.
    */
   init: function () {
+
+       // Set up the tick throttling.
+       this.tick = AFRAME.utils.throttleTick(this.throttledTick, 0, this);
+
+       var el = this.el;
+       this.lastPosition = el.getAttribute('position');
+       this.lastRotation = el.getAttribute('rotation');
+
   },
 
+  // throttledTick: function (time, deltaTime) {
+
+  // },
+
   /**
    * Called when component is attached and when component data changes.
    * Generally modifies the entity based on the data.
@@ -154,7 +176,7 @@ AFRAME.registerComponent('interpolation', {
   /**
    * Called on each scene tick.
    */
-  tick: function (t) {
+  throttledTick: function (t, dt) {
     if (this.positionInterpolator && this.positionInterpolator.active()) {
       this.el.object3D.position.copy(this.positionInterpolator.get());
     }

support/client/lib/vwf/model/aframe/addon/aframe-lerp-component.js

@@ -0,0 +1,237 @@
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, exports, __webpack_require__) {
+
+	/* global AFRAME THREE */
+
+	if (typeof AFRAME === 'undefined') {
+	  throw new Error('Component attempted to register before AFRAME was available.');
+	}
+
+	var degToRad = THREE.Math.degToRad;
+	var almostEqual = __webpack_require__(1);
+	/**
+	 * Linear Interpolation component for A-Frame.
+	 */
+	AFRAME.registerComponent('lerp', {
+	  schema: {
+	    properties: { default: ['position', 'rotation', 'scale']},
+	  },
+
+	  /**
+	   * Called once when component is attached. Generally for initial setup.
+	   */
+	  init: function () {
+	    var el = this.el;
+	    this.lastPosition = el.getAttribute('position');
+	    this.lastRotation = el.getAttribute('rotation');
+	    this.lastScale = el.getAttribute('scale');
+
+	    this.lerpingPosition = false;
+	    this.lerpingRotation = false;
+	    this.lerpingScale = false;
+
+	    this.timeOfLastUpdate = 0;
+	  },
+
+	  /**
+	   * Called on each scene tick.
+	   */
+	  tick: function (time, deltaTime) {
+	    var progress;
+	    var now = this.now();
+	    var obj3d = this.el.object3D;
+
+	    this.checkForComponentChanged();
+
+	    // Lerp position
+	    if (this.lerpingPosition) {
+	      progress = (now - this.startLerpTimePosition) / this.duration;
+	      obj3d.position.lerpVectors(this.startPosition, this.targetPosition, progress);
+	      // console.log("new position", obj3d.position);
+	      if (progress >= 1) {
+	        this.lerpingPosition = false;
+	      }
+	    }
+
+	    // Slerp rotation
+	    if (this.lerpingRotation) {
+	      progress = (now - this.startLerpTimeRotation) / this.duration;
+	      THREE.Quaternion.slerp(this.startRotation, this.targetRotation, obj3d.quaternion, progress);
+	      if (progress >= 1) {
+	        this.lerpingRotation = false;
+	      }
+	    }
+
+	    // Lerp scale
+	    if (this.lerpingScale) {
+	      progress = (now - this.startLerpTimeScale) / this.duration;
+	      obj3d.scale.lerpVectors(this.startScale, this.targetScale, progress);
+	      if (progress >= 1) {
+	        this.lerpingScale = false;
+	      }
+	    }
+	  },
+
+	  checkForComponentChanged: function() {
+	    var el = this.el;
+
+	    var hasChanged = false;
+
+	    var newPosition = el.getAttribute('position');
+	    if (this.isLerpable('position') && !this.almostEqualVec3(this.lastPosition, newPosition)) {
+	      this.toPosition(this.lastPosition, newPosition);
+	      this.lastPosition = newPosition;
+	      hasChanged = true;
+	    }
+
+	    var newRotation = el.getAttribute('rotation');
+	    if (this.isLerpable('rotation') && !this.almostEqualVec3(this.lastRotation, newRotation)) {
+	      this.toRotation(this.lastRotation, newRotation);
+	      this.lastRotation = newRotation;
+	      hasChanged = true;
+	    }
+
+	    var newScale = el.getAttribute('scale');
+	    if (this.isLerpable('scale') && !this.almostEqualVec3(this.lastScale, newScale)) {
+	      this.toScale(this.lastScale, newScale);
+	      this.lastScale = newScale;
+	      hasChanged = true;
+	    }
+
+	    if (hasChanged) {
+	      this.updateDuration();
+	    }
+	  },
+
+	  isLerpable: function(name) {
+	    return this.data.properties.indexOf(name) != -1
+	  },
+
+	  updateDuration: function() {
+	    var now = this.now();
+	    this.duration = now - this.timeOfLastUpdate;
+	    this.timeOfLastUpdate = now;
+	  },
+
+	  /**
+	   * Start lerp to position (vec3)
+	   */
+	  toPosition: function (from, to) {
+	    this.lerpingPosition = true;
+	    this.startLerpTimePosition = this.now();
+	    this.startPosition = new THREE.Vector3(from.x, from.y, from.z);
+	    this.targetPosition = new THREE.Vector3(to.x, to.y, to.z);
+	  },
+
+	  /**
+	   * Start lerp to euler rotation (vec3,'YXZ')
+	   */
+	  toRotation: function (from, to) {
+	    this.lerpingRotation = true;
+	    this.startLerpTimeRotation = this.now();
+	    this.startRotation = new THREE.Quaternion();
+	    this.startRotation.setFromEuler(
+	        new THREE.Euler(degToRad(from.x), degToRad(from.y), degToRad(from.z), 'YXZ'));
+	    this.targetRotation = new THREE.Quaternion();
+	    this.targetRotation.setFromEuler(
+	        new THREE.Euler(degToRad(to.x), degToRad(to.y), degToRad(to.z), 'YXZ'));
+	  },
+
+	  /**
+	   * Start lerp to scale (vec3)
+	   */
+	  toScale: function (from, to) {
+	    this.lerpingScale = true;
+	    this.startLerpTimeScale = this.now();
+	    this.startScale = new THREE.Vector3(from.x, from.y, from.z);
+	    this.targetScale = new THREE.Vector3(to.x, to.y, to.z);
+	  },
+
+	  almostEqualVec3: function(a, b) {
+	    return almostEqual(a.x, b.x) && almostEqual(a.y, b.y) && almostEqual(a.z, b.z);
+	  },
+
+	  /**
+	   * Returns the current time in milliseconds (ms)
+	   */
+	  now: function() {
+	    return Date.now();
+	  }
+	});
+
+
+/***/ }),
+/* 1 */
+/***/ (function(module, exports) {
+
+	"use strict"
+
+	var abs = Math.abs
+	  , min = Math.min
+
+	function almostEqual(a, b, absoluteError, relativeError) {
+	  var d = abs(a - b)
+	  
+	  if (absoluteError == null) absoluteError = almostEqual.DBL_EPSILON;
+	  if (relativeError == null) relativeError = absoluteError;
+	  
+	  if(d <= absoluteError) {
+	    return true
+	  }
+	  if(d <= relativeError * min(abs(a), abs(b))) {
+	    return true
+	  }
+	  return a === b
+	}
+
+	almostEqual.FLT_EPSILON = 1.19209290e-7
+	almostEqual.DBL_EPSILON = 2.2204460492503131e-16
+
+	module.exports = almostEqual
+
+
+/***/ })
+/******/ ]);

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

@@ -73489,7 +73489,7 @@ var Component = module.exports.Component = function (el, attrValue, id) {
       newData: self.data,
       oldData: oldData
     }, false);
-  }, 0);
+  }, 200);
   this.updateProperties(attrValue);
 };
 

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

@@ -22,15 +22,18 @@
 /// @requires vwf/view
 
 define(["module", "vwf/view", "jquery", "jquery-ui"], function (module, view, $) {
+    var self;
 
     return view.load(module, {
 
         // == Module Definition ====================================================================
 
         initialize: function (options) {
-            var self = this;
+            self = this;
             this.nodes = {};
 
+            this.state.appInitialized = false;
+
             if (typeof options == "object") {
 
                 this.rootSelector = options["application-root"];
@@ -59,6 +62,11 @@ define(["module", "vwf/view", "jquery", "jquery-ui"], function (module, view, $)
                 document.body.append(scene);
                 createAvatarControl(scene);
                 createAvatar(childID);
+               // this.state.appInitialized  = true;
+            }
+
+            if(this.state.nodes[childID] && this.state.nodes[childID].aframeObj.object3D instanceof THREE.Object3D) {
+                this.nodes[childID] = {id:childID,extends:childExtendsID};
             }
 
         },
@@ -82,7 +90,7 @@ define(["module", "vwf/view", "jquery", "jquery-ui"], function (module, view, $)
         },
 
         satProperty: function (nodeId, propertyName, propertyValue) {
-            var self = this;
+            var selfs = this;
 
              var node = this.state.nodes[ nodeId ];
 
@@ -95,7 +103,7 @@ define(["module", "vwf/view", "jquery", "jquery-ui"], function (module, view, $)
                 case "clickable":
                     if (propertyValue) {
                         aframeObject.addEventListener('click', function (evt) {
-                            let cursorID = 'cursor-avatar-'+self.kernel.moniker();
+                            let cursorID = 'cursor-avatar-'+selfs.kernel.moniker();
                            if (evt.detail.cursorEl.id == cursorID) {
                                 vwf_view.kernel.fireEvent(nodeId, "clickEvent")
                            }
@@ -120,15 +128,35 @@ define(["module", "vwf/view", "jquery", "jquery-ui"], function (module, view, $)
         },
 
         ticked: function (vwfTime) {
+
+            updateAvatarPosition();
+           
+            //lerpTick ()
         }
 
+
     });
 
+
+    function updateAvatarPosition() {
+
+        let avatarName = 'avatar-' + self.kernel.moniker();
+        let el = document.querySelector('#avatarControl');
+        if (el !== undefined) {
+            let postion = el.getAttribute('position');
+            let rotation = el.getAttribute('rotation');
+
+            vwf_view.kernel.setProperty(avatarName, "position", [postion.x, postion.y, postion.z]);
+            vwf_view.kernel.setProperty(avatarName, "rotation", [rotation.x, rotation.y, rotation.z]);
+        }
+    }
+
     function createAvatarControl(aScene) {
 
         let avatarName = 'avatar-' + self.kernel.moniker();
 
         let controlEl = document.createElement('a-camera');
+       // controlEl.setAttribute('avatar', '');
         controlEl.setAttribute('id', 'avatarControl');
         controlEl.setAttribute('wasd-controls', {});
         controlEl.setAttribute('look-controls', {});
@@ -140,19 +168,22 @@ define(["module", "vwf/view", "jquery", "jquery-ui"], function (module, view, $)
         cursorEl.setAttribute('raycaster', {objects: '.intersectable'});
         controlEl.appendChild(cursorEl);
 
+        
+
        
-        controlEl.addEventListener('componentchanged', function (evt) {
-        if (evt.detail.name === 'position') {
-            var eventParameters = evt.detail.newData;
-             vwf_view.kernel.setProperty(avatarName, "position", [eventParameters.x, eventParameters.y, eventParameters.z]);
-        }
+    //     controlEl.addEventListener('componentchanged', function (evt) {
+    //     if (evt.detail.name === 'position') {
+    //         var eventParameters = evt.detail.newData;
+    //          vwf_view.kernel.setProperty(avatarName, "position", [eventParameters.x, eventParameters.y, eventParameters.z]);
+    //     }
 
-         if (evt.detail.name === 'rotation') {
-            var eventParameters = evt.detail.newData;
-               vwf_view.kernel.setProperty(avatarName, "rotation", [eventParameters.x, eventParameters.y, eventParameters.z]);
-        }
+    //      if (evt.detail.name === 'rotation') {
+    //         var eventParameters = evt.detail.newData;
+    //            vwf_view.kernel.setProperty(avatarName, "rotation", [eventParameters.x, eventParameters.y, eventParameters.z]);
+    //     }
+
+    // });
 
-    });
     }
 
     function createAvatar(nodeID) {
@@ -169,4 +200,7 @@ define(["module", "vwf/view", "jquery", "jquery-ui"], function (module, view, $)
         vwf_view.kernel.createChild(nodeID, nodeName, newNode);
         vwf_view.kernel.callMethod(nodeName, "createAvatarBody");
     }
+
+    
+
 });

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

@@ -77,7 +77,7 @@ define([
 
             $(document.head).append('<style type="text/css" media="screen"> #editorlive { height: 500px; width: 800px; } </style>');
             document.querySelector('head').innerHTML += '<link rel="stylesheet" href="vwf/view/lib/editorLive.css">';
-
+            $(document.head).append('<meta name="viewport" content="width=device-width, initial-scale=1">');
 
 
             // $('body').append('<script>mdc.autoInit()</script>');
@@ -121,15 +121,57 @@ define([
 
 
 
-            ["drawer", "toolbar", "propWindow", "clientsWindow", "codeEditorWindow", "viewSettings"].forEach(item => {
+            ["drawer", "toolbar", "sideBar", "propWindow", "clientsWindow", "codeEditorWindow", "viewSettings", "viewSceneProps"].forEach(item => {
                 let el = document.createElement("div");
                 el.setAttribute("id", item);
                 document.body.appendChild(el);
             }
             );
 
+
+            let  avatarSettings = 
+            {
+              $cell: true,
+              $type: "div",
+                  class: "propGrid max-width mdc-layout-grid mdc-layout-grid--align-left",
+                  $components:[
+                      {
+                          $cell: true,
+                          $type: "div",
+                          class: "mdc-layout-grid__inner",
+                          $components: [
+                              {
+                                  $cell: true,
+                                  $type: "div",
+                                  class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
+                                  $components: [
+                                      {
+                                          $cell: true,
+                                          $type: "button",
+                                          class: "mdc-button mdc-button--raised",
+                                          $text: "Reset camera view",
+                                          onclick: function (e) {
+                                              //document.querySelector('#' + 'viewSettings').style.visibility = 'hidden';
+                                              let controlEl = document.querySelector('#avatarControl');
+                                              controlEl.setAttribute('camera', 'active', true);
+                                          }
+  
+                                      }
+  
+                                  ]
+                              }
+                          ]
+                      }
+                  ]
+              }
+
           let  viewSettings = 
           {
+            $cell: true,
+            $type: "div",
+                class: "propGrid max-width mdc-layout-grid mdc-layout-grid--align-left",
+                $components:[
+                    {
                         $cell: true,
                         $type: "div",
                         class: "mdc-layout-grid__inner",
@@ -143,9 +185,9 @@ define([
                                         $cell: true,
                                         $type: "button",
                                         class: "mdc-button mdc-button--raised",
-                                        $text: "Reset view",
+                                        $text: "Settings",
                                         onclick: function (e) {
-                                            document.querySelector('#' + 'viewSettings').style.visibility = 'hidden';
+                                            //document.querySelector('#' + 'viewSettings').style.visibility = 'hidden';
                                         }
 
                                     }
@@ -154,20 +196,36 @@ define([
                             }
                         ]
                     }
+                ]
+            }
                 
-
-
-            document.querySelector('#' + 'viewSettings').$cell({
+         document.querySelector('#' + 'viewSettings').$cell({
                 $cell: true,
                 $type: "div",
                 id: 'viewSettings',
-                style:'z-index: 10; position: absolute; margin-left: 240px;',
-                class: "propGrid mdc-layout-grid max-width mdc-layout-grid--align-left mdc-toolbar-fixed-adjust",
+                //style:'z-index: 10; position: absolute; margin-left: 240px;',
+                class: "settingsDiv mdc-toolbar-fixed-adjust",
                 $init: function(){
                     this.style.visibility = 'hidden';
                 },
                 $components: [viewSettings]
-            })
+            })        
+            
+            
+            
+
+
+            // document.querySelector('#' + 'viewSettings').$cell({
+            //     $cell: true,
+            //     $type: "div",
+            //     id: 'viewSettings',
+            //     style:'z-index: 10; position: absolute; margin-left: 240px;',
+            //     class: "propGrid mdc-layout-grid max-width mdc-layout-grid--align-left mdc-toolbar-fixed-adjust",
+            //     $init: function(){
+            //         this.style.visibility = 'hidden';
+            //     },
+            //     $components: [viewSettings]
+            // })
 
 
             let protoPropertiesCell = function (m) {
@@ -284,58 +342,6 @@ define([
                     ]
                 }
 
-
-
-
-                // $components: [
-                //     {
-                //     $type: "span",
-                //     class: "mdc-list-item__start-detail grey-bg",
-                //     $components: [
-                //         {
-                //             $type: "i",
-                //             class: "material-icons",
-                //             'aria-hidden': true,
-                //             $text: 'folder'  
-                //     }
-                // ]
-                //     },
-                //     {
-                //         $cell: true,
-                //         $type: "span",
-                //         class: "mdc-list-item__text",
-                //         $text: m.name + ': ',
-                //     },
-                //     {
-                //         class: "mdc-textfield mdc-list-item__start-detail  mdc-textfield--fullwidth",
-                //         $cell: true,
-                //         $type: "span",
-                //         $components: [
-                //             {
-                //             class: "mdc-textfield__input",
-                //             id: "prop-" + m.name,
-                //             $cell: true,
-                //             $type: "input",
-                //             type: "text",
-                //             value: m.getValue(),
-                //             onchange: function(e){
-                //                 let propValue = this.value;
-                //                 try {
-                //                     propValue = JSON.parse(propValue);
-                //                     self.kernel.setProperty(this._currentNode, m.name, propValue);
-
-                //                 } catch (e) {
-                //                     // restore the original value on error
-                //                     this.value = propValue;
-                //                 }
-                //             }
-                //         }]
-
-                //     }
-                // ]
-
-
-
             }
 
 
@@ -392,9 +398,11 @@ define([
                 _currentNode: '',
                 _displayedProperties: {},
                 _setNode: function (aNode) {
-                    this._currentNode = aNode
+                    this._currentNode = aNode;
+                    document.querySelector('#sideBar')._sideCurrentNode = this._currentNode
                 },
                 $init: function () {
+                    this._currentNode = document.querySelector('#sideBar')._sideCurrentNode
 
                     //this._currentNode = vwf_view.kernel.find("", "/")[0];
                     //this._currentNode = '3333';
@@ -897,21 +905,12 @@ define([
             let clientListCell = {
                 $cell: true,
                 $type: "div",
+                class: "mdc-list",
                 id: "clientsList",
                 _watchNodes: [],
-                // _clientNodes: [],
-                // _visClients: [],
-                // _setClientNodes: function (nodes) {
-                //     this._clientNodes = nodes;
-                //     if (this._clientNodes !== undefined) {
-                //         this._visClients = this._clientNodes.children.slice();
-                //     }
-                // },
                 _listElement: function (m) {
                     return {
-                        $type: "li",
-                        class: "mdc-list-item",
-                        $components: [{
+
                             $type: "a",
                             class: "mdc-list-item",
                             $href: "#",
@@ -921,7 +920,6 @@ define([
                                 //self.currentNodeID = m.ID;
                                 //document.querySelector('#currentNode')._setNode(m.ID);
                             }
-                        }]
                     }
                 },
                 $init: function () {
@@ -935,144 +933,263 @@ define([
                 },
                 $update: function () {
                     //this._clientNodes
+                    this.$components = this._watchNodes.map(this._listElement)
+                }
+            }
+
+            //createCellWindow("clientsWindow", clientListCell, "Clients");
+            //createCellWindow("propWindow", propWindow, "Scene");
+            createCellWindow("codeEditorWindow", codeEditorWindow, "Code editor");
+
+
+           
+
+            let viewSceneProps = {
+                $cell: true,
+                $type: "div",
+                    class: "propGrid mdc-layout-grid mdc-layout-grid--align-left",
+                    //style: "overflow-y: scroll; max-height: 500px; overflow-x: hidden;",
+                    $components:[
+                        {
+                            $type: "div",
+                            class: "mdc-layout-grid__inner",
+                            $components: [
+                                {
+                                    $cell: true,
+                                    $type: "div",
+                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
+                                    $components: [
+    
+                                        nodesCell
+    
+                                    ]
+                                }
+                            ]
+                        }
+                    ]
+            }
+
+
+            let sideBar =  {
+                $cell: true,
+                $type: "div",
+                id: 'sideBar',
+                class: "sideBar mdc-toolbar-fixed-adjust",
+                _sideBarComponent: {},
+                _sideCurrentNode: '',
+                $init: function(){
+                    this.style.visibility = 'hidden';
+                },
+                $update: function(){
                     this.$components = [
                         {
                             $cell: true,
-                            $type: "ul",
-                            class: "mdc-list",
-                            $components: this._watchNodes.map(this._listElement)
-                        }
+                            $type: "button",
+                            class: "mdc-button mdc-button--compact",
+                            $text: "X",
+                            onclick: function (e) {
+                                document.querySelector('#sideBar').style.visibility = 'hidden';
+                            }
+
+                        }, 
+                        this._sideBarComponent
                     ]
                 }
+                //$components: [this._sideComponents]
             }
 
-            createCellWindow("clientsWindow", clientListCell, "Clients");
-            createCellWindow("propWindow", propWindow, "Scene");
-            createCellWindow("codeEditorWindow", codeEditorWindow, "Code editor");
+            document.querySelector('#' + 'sideBar').$cell(sideBar)          
+
 
             let drawerCell = {
                 $cell: true,
                 $type: "nav",
-                class: "mdc-persistent-drawer__drawer",
+                class: "mdc-temporary-drawer__drawer",
 
                 $components: [
-
                     {
                         $cell: true,
-                        $type: "div",
-                        class: "mdc-persistent-drawer__toolbar-spacer",
+                        $type: "header",
+                        class: "mdc-temporary-drawer__header",
+                        $components: [
+                            {
+                                $cell: true,
+                                $type: "div",
+                                class: "mdc-temporary-drawer__header-content mdc-theme--primary-bg mdc-theme--text-primary-on-primary",
+                                $text: "Home"
+                            }
+                        ]
                     },
 
-
-
                     {
                         $cell: true,
-                        $type: "div",
-                        class: "mdc-list-group",
-                        $components: [{
-                            $cell: true,
-                            $type: "nav",
-                            class: "mdc-list",
-                            $components: [
-                                {
-                                    $cell: true,
-                                    $type: "a",
-                                    class: "mdc-list-item mdc-persistent-drawer--selected",
-                                    $href: "#",
-                                    onclick: function (e) {
-                                        //self.currentNodeID = m.ID;
-                                        let currentNode = document.querySelector('#currentNode')._currentNode;
-                                        currentNode == '' ? document.querySelector('#currentNode')._setNode(vwf_view.kernel.find("", "/")[0]) :
-                                            document.querySelector('#currentNode')._setNode(currentNode);
+                        $type: "nav",
+                        class: "mdc-temporary-drawer__content mdc-list-group",
+                        $components: [
+                            {
+                                $cell: true,
+                                $type: "div",
+                                class: "mdc-list",
+                                $components: [
+                                    {
+                                        $cell: true,
+                                        $type: "a",
+                                        class: "mdc-list-item",
+                                        $href: "#",
+                                        onclick: function (e) {
+
+                                            let sideBar = document.querySelector('#sideBar');
+                                            sideBar._sideBarComponent = viewSceneProps;
+
+                                            let currentNode = document.querySelector('#sideBar')._sideCurrentNode;
+                                            currentNode == '' ? document.querySelector('#sideBar')._sideCurrentNode = (vwf_view.kernel.find("", "/")[0]) :
+                                                document.querySelector('#sideBar')._sideCurrentNode = currentNode;
 
-                                        document.querySelector('#propWindow').style.visibility = 'visible';
+                                               document.querySelector('#sideBar').style.visibility = 'visible';
+                                               drawer.open = !drawer.open
+                                            // let currentNode = document.querySelector('#currentNode')._currentNode;
+                                            // currentNode == '' ? document.querySelector('#currentNode')._setNode(vwf_view.kernel.find("", "/")[0]) :
+                                            //     document.querySelector('#currentNode')._setNode(currentNode);
+                                              
+                                             
+
+                                            
+                                        },
+                                        $components: [{
+                                            $cell: true,
+                                            $type: "i",
+                                            class: "material-icons mdc-list-item__start-detail",
+                                            $text: "description"
+                                        },
+                                        {
+                                            $text: "Scene"
+                                        }
+                                        ]
+    
                                     },
-                                    $components: [{
+    
+                                    {
                                         $cell: true,
-                                        $type: "i",
-                                        class: "material-icons mdc-list-item__start-detail",
-                                        $text: "description"
+                                        $type: "a",
+                                        class: "mdc-list-item",
+                                        $href: "#",
+                                        onclick: function (e) {
+                                            //self.currentNodeID = m.ID;
+    
+                                            // document.querySelector('#clientsList')._setClientNodes(self.nodes["http://vwf.example.com/clients.vwf"]);
+                                           // document.querySelector('#clientsWindow').style.visibility = 'visible';
+                                           let sideBar = document.querySelector('#sideBar');
+                                           sideBar._sideBarComponent = avatarSettings;
+
+                                           drawer.open = !drawer.open
+                                           document.querySelector('#sideBar').style.visibility = 'visible';
+                                        },
+                                        $components: [{
+                                            $type: "i",
+                                            class: "material-icons mdc-list-item__start-detail",
+                                            'aria-hidden': "true",
+                                            $text: "account_circle"
+                                        },
+                                        {
+                                            $text: "My Avatar"
+                                        }]
+    
                                     },
+                                    
+                                    
                                     {
-                                        $text: "Scene"
-                                    }
-                                    ]
+                                        $cell: true,
+                                        $type: "a",
+                                        class: "mdc-list-item",
+                                        $href: "#",
+                                        onclick: function (e) {
+                                            //self.currentNodeID = m.ID;
+    
+                                            // document.querySelector('#clientsList')._setClientNodes(self.nodes["http://vwf.example.com/clients.vwf"]);
 
-                                },
+                                            let sideBar = document.querySelector('#sideBar');
+                                            sideBar._sideBarComponent = viewSettings;
 
-                                {
-                                    $cell: true,
-                                    $type: "a",
-                                    class: "mdc-list-item mdc-persistent-drawer--selected",
-                                    $href: "#",
-                                    onclick: function (e) {
-                                        // var currentNode = document.querySelector('#currentNode')._currentNode;
-                                        // if (currentNode == '') {
-                                        //     currentNode = vwf_view.kernel.find("", "/")[0];
-                                        // }
-                                        document.querySelector('#liveCodeEditor')._setNode(vwf_view.kernel.find("", "/")[0]);
-                                        //createAceEditor(self, currentNode);
-                                        document.querySelector('#codeEditorWindow').style.visibility = 'visible';
-                                    },
-                                    $components: [{
-                                        $type: "i",
-                                        class: "material-icons mdc-list-item__start-detail",
-                                        'aria-hidden': "true",
-                                        $text: "code"
+                                            drawer.open = !drawer.open
+                                            document.querySelector('#sideBar').style.visibility = 'visible';
+                                        },
+                                        $components: [{
+                                            $type: "i",
+                                            class: "material-icons mdc-list-item__start-detail",
+                                            'aria-hidden': "true",
+                                            $text: "settings"
+                                        },
+                                        {
+                                            $text: "Settings"
+                                        }]
+    
                                     },
                                     {
-                                        $text: "Code editor"
-                                    }]
+                                        $cell: true,
+                                        $type: "a",
+                                        class: "mdc-list-item",
+                                        $href: "#",
+                                        onclick: function (e) {
+                                            // var currentNode = document.querySelector('#currentNode')._currentNode;
+                                            // if (currentNode == '') {
+                                            //     currentNode = vwf_view.kernel.find("", "/")[0];
+                                            // }
+                                            document.querySelector('#liveCodeEditor')._setNode(vwf_view.kernel.find("", "/")[0]);
+                                            //createAceEditor(self, currentNode);
+                                            document.querySelector('#codeEditorWindow').style.visibility = 'visible';
+                                        },
+                                        $components: [{
+                                            $type: "i",
+                                            class: "material-icons mdc-list-item__start-detail",
+                                            'aria-hidden': "true",
+                                            $text: "code"
+                                        },
+                                        {
+                                            $text: "Code editor"
+                                        }]
+    
+                                    }
 
-                                },
-                                {
-                                    $cell: true,
-                                    $type: "a",
-                                    class: "mdc-list-item mdc-persistent-drawer--selected",
-                                    $href: "#",
-                                    onclick: function (e) {
-                                        //self.currentNodeID = m.ID;
+                                ]
+                            },
+                            {
+                                $cell: true,
+                                $type: "hr",
+                                class: "mdc-list-divider",
+                            },
+                            {
+                                $cell: true,
+                                $type: "h3",
+                                class: "userList mdc-list-group__subheader",
+                                $text: "Users online"
+                            },
+                            clientListCell
+                        ]
+                    }
 
-                                        // document.querySelector('#clientsList')._setClientNodes(self.nodes["http://vwf.example.com/clients.vwf"]);
-                                        document.querySelector('#clientsWindow').style.visibility = 'visible';
-                                    },
-                                    $components: [{
-                                        $type: "i",
-                                        class: "material-icons mdc-list-item__start-detail",
-                                        'aria-hidden': "true",
-                                        $text: "people"
-                                    },
-                                    {
-                                        $text: "Users"
-                                    }]
+                    // {
+                    //     $cell: true,
+                    //     $type: "div",
+                    //     class: "mdc-persistent-drawer__toolbar-spacer",
+                    // },
 
-                                },
-                                {
-                                    $cell: true,
-                                    $type: "a",
-                                    class: "mdc-list-item mdc-persistent-drawer--selected",
-                                    $href: "#",
-                                    onclick: function (e) {
-                                        //self.currentNodeID = m.ID;
 
-                                        // document.querySelector('#clientsList')._setClientNodes(self.nodes["http://vwf.example.com/clients.vwf"]);
-                                        document.querySelector('#viewSettings').style.visibility = 'visible';
-                                    },
-                                    $components: [{
-                                        $type: "i",
-                                        class: "material-icons mdc-list-item__start-detail",
-                                        'aria-hidden': "true",
-                                        $text: "star"
-                                    },
-                                    {
-                                        $text: "Settings"
-                                    }]
 
-                                }
+                    // {
+                    //     $cell: true,
+                    //     $type: "div",
+                    //     class: "mdc-list-group",
+                    //     $components: [{
+                    //         $cell: true,
+                    //         $type: "nav",
+                    //         class: "mdc-list",
+                    //         $components: [
+                                
 
-                            ]
-                        }]
-                    }]
+                    //         ]
+                    //     }]
+                    // }
+                ]
 
             };
 
@@ -1084,7 +1201,7 @@ define([
             document.querySelector("#drawer").$cell({
                 $cell: true,
                 $type: "aside",
-                class: "mdc-persistent-drawer",
+                class: "mdc-temporary-drawer",
                 $components: [drawerCell]
             }
             );
@@ -1126,9 +1243,9 @@ define([
             // let drawer = new mdc.drawer.MDCTemporaryDrawer(document.querySelector('.mdc-temporary-drawer'));
             // document.querySelector('.menu').addEventListener('click', () => drawer.open = true);
 
-            var drawerEl = document.querySelector('.mdc-persistent-drawer');
-            var MDCPersistentDrawer = mdc.drawer.MDCPersistentDrawer;
-            var drawer = new MDCPersistentDrawer(drawerEl);
+            var drawerEl = document.querySelector('.mdc-temporary-drawer');
+            var MDCTemporaryDrawer = mdc.drawer.MDCTemporaryDrawer;
+            var drawer = new MDCTemporaryDrawer(drawerEl);
             document.querySelector('.demo-menu').addEventListener('click', function () {
                 //self.currentNodeID = (self.currentNodeID == '') ? (vwf_view.kernel.find("", "/")[0]) : self.currentNodeID; 
 
@@ -1141,10 +1258,10 @@ define([
                 //document.querySelector('#currentNode')._setNode(self.currentNodeID);
                 drawer.open = !drawer.open;
             });
-            drawerEl.addEventListener('MDCPersistentDrawer:open', function () {
+            drawerEl.addEventListener('MDCTemporaryDrawer:open', function () {
                 //console.log('Received MDCPersistentDrawer:open');
             });
-            drawerEl.addEventListener('MDCPersistentDrawer:close', function () {
+            drawerEl.addEventListener('MDCTemporaryDrawer:close', function () {
                 //console.log('Received MDCPersistentDrawer:close');
             });
 
@@ -1322,13 +1439,15 @@ define([
             $('#' + nodeIDAttribute).remove();
             $('#children > div:last').css('border-bottom-width', '3px');
 
-            let nodeCellID = document.querySelector("#currentNode");
-            if (nodeCellID._currentNode !== "") {
-                if (nodeCellID._currentNode !== nodeID && (this.nodes[nodeID] !== undefined)) {
-                    nodeCellID._getChildNodes();
-                } else {
-                    nodeCellID._setNode(vwf_view.kernel.find("", "/")[0]);
-                    nodeCellID._getChildNodes();
+            let nodeCell = document.querySelector("#currentNode");
+            if (nodeCell) {
+                if (nodeCell._currentNode !== "") {
+                    if (nodeCell._currentNode !== nodeID && (this.nodes[nodeID] !== undefined)) {
+                        nodeCell._getChildNodes();
+                    } else {
+                        nodeCell._setNode(vwf_view.kernel.find("", "/")[0]);
+                        nodeCell._getChildNodes();
+                    }
                 }
             }
 

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

@@ -85,7 +85,7 @@
   .codeEditorGrid{
 
     width: 1000px;
-    height: 500px; 
+    height: 520px; 
 
   }
 
@@ -108,4 +108,27 @@
 
       color: black
     
+      }
+
+      .sideBar {
+        padding-left: 16px;
+        overflow-x: hidden;
+        overflow-y: auto;
+        background-color: rgba(247, 247, 247, 0.95);
+        z-index: 3;
+        position: fixed;
+        width: 400px;
+        height: 95%;
+      }
+
+      .settingsDiv {
+        padding-left: 16px;
+        overflow: auto;
+        background-color: rgba(230, 230, 230, 0.95);
+        z-index: 2;
+        position: absolute;
+      }
+
+      .userList {
+        padding-left: 16px;
       }

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

@@ -0,0 +1,10 @@
+--- 
+extends: http://vwf.example.com/aframe/node.vwf
+type: "a-animation"
+properties:
+  attribute:
+  dur:
+  from:
+  to:
+  repeat:
+  begin: