add erase, undo and exit vr, all actions finally work

index.html

@@ -29,6 +29,8 @@
     <!-- <script src="https://rawgit.com/fernandojsg/aframe-teleport-controls/master/dist/aframe-teleport-controls.min.js"></script> -->
     <script src="https://rawgit.com/kfarr/aframe-teleport-controls/master/dist/aframe-teleport-controls.min.js"></script>
 
+    <script src="https://unpkg.com/aframe-controller-cursor-component@0.2.7/dist/aframe-controller-cursor-component.min.js"></script>
+
     <script src="https://rawgit.com/kfarr/aframe-select-bar-component/master/dist/aframe-select-bar-component.js"></script>
 
     <script src="https://www.gstatic.com/firebasejs/3.7.3/firebase.js"></script>
@@ -132,13 +134,13 @@
         <a-entity id="menuActions" select-bar="controllerID: leftController" scale="0.7 0.7 0.7" position="0 0.05 0.08" rotation="-85 0 0">
 
           <optgroup label="Actions" value="actions">
-            <option value="teleport" src="assets/environment/icon_teleport.png" selected>Teleport</option>
+            <option value="undo" src="assets/environment/icon_undo.png" selected>Undo</option>
+            <option value="teleport" src="assets/environment/icon_teleport.png">Teleport</option>
             <option value="saveAs" src="assets/environment/icon_saveAs.png">Save As</option>
             <option value="save" src="assets/environment/icon_save.png">Save</option>
             <option value="new" src="assets/environment/icon_new.png">New</option>
-            <option value="erase" src="assets/environment/icon_erase.png">Coming soon</option>
-            <option value="inspect" src="assets/environment/icon_inspect.png">Coming soon</option>
-            <option value="exit" src="assets/environment/icon_exit.png">Coming soon</option>
+            <option value="exit" src="assets/environment/icon_exit.png">Exit VR</option>
+            <option value="erase" src="assets/environment/icon_erase.png">Erase</option>
           </optgroup>
 
         </a-entity>

lib/action-controls.js

@@ -55,6 +55,7 @@ AFRAME.registerComponent('action-controls', {
     // what is the action
     var menuEl = document.getElementById(this.data.menuID);
 
+
     // get currently selected action
     var optionValue = menuEl.components['select-bar'].selectedOptionValue;
     // console.log("onActionSelect triggered; current optionValue:\n");
@@ -79,6 +80,16 @@ AFRAME.registerComponent('action-controls', {
         document.getElementById("title").setAttribute("text__cityname", "value", "#NewCity")
         document.title = "aframe.city";
         return;
+      case "undo":
+        // find element with "builder-controls" attribute
+        // fire the onUndo event
+        document.querySelectorAll('a-entity[builder-controls]')[0].components['builder-controls'].onUndo();
+//        var menuEl = document.getElementById(this.data.menuID);
+//        var undoResult = menuEl.components['select-bar'].selectedOptionValue;
+        return;
+      case "exit":
+        document.querySelector('a-scene').exitVR();
+        return;
     }
   },
 
@@ -121,31 +132,63 @@ AFRAME.registerComponent('action-controls', {
 
   handleActionStart: function(optionValue) {
     this.previousAction = optionValue;
+    var controlEl = this.el;
 
     // for given optionValue, do something
     switch (optionValue) {
+
       case "teleport":        // add teleport component to the control element that is the parent of this menu
         console.log("teleportStart");
-        var controlEl = this.el;
-        // console.log("controlEl:");
-        // console.log(controlEl);
+
         // Add attribute from this html: teleport-controls="button: trigger; collisionEntities: #ground"
         controlEl.setAttribute("teleport-controls", "button: trigger; collisionEntities: #ground");
-        return; // without this return the other cases are fired - weird!
+        return;
+      case "erase":
+        console.log("eraseStart");
+        // add attribute for raycaster cursor for selecting object to delete https://github.com/bryik/aframe-controller-cursor-component
+        controlEl.setAttribute("controller-cursor", "color: red");
+        controlEl.setAttribute("raycaster", "objects: .object");
+
+        // create listener for mouse down event on this element:
+        controlEl.addEventListener('click', function (evt) {
+          // console.log('I was clicked at: ', evt.detail.intersection.point);
+          // console.log(evt.detail);
+          console.log("erase requested (click event fired on controlEl)");
+//          console.log(evt.detail.intersectedEl);
+          // evt.detail.intersectedEl.setAttribute("visible", "false");
+          evt.detail.intersectedEl.parentNode.removeChild(evt.detail.intersectedEl);
+
+        });
+        return;
+
+        controlEl.addEventListener('mouseenter', function (evt) {
+          // console.log('I was clicked at: ', evt.detail.intersection.point);
+          // console.log(evt.detail);
+          // NOTE: this does not appear to be firing
+          console.log("MOUSEENTER event fired on controlEl");
+          console.log(evt.detail.intersectedEl);
+          evt.detail.intersectedEl.setAttribute("material", "color", "red");
+        });
+        // monitor for event when the controlEl cursor emits:
+        return;
     }
   },
 
   handleActionEnd: function(optionValue) {
+    var controlEl = this.el;
+
     // for given optionValue, do something
     switch (optionValue) {
-      case "teleport":        // add teleport component to the control element that is the parent of this menu
+      case "teleport":        // remove teleport component
         console.log("teleportEnd");
-        var controlEl = this.el;
-        // console.log("controlEl:");
-        // console.log(controlEl);
-        // Add attribute from this html: teleport-controls="button: trigger; collisionEntities: #ground"
         controlEl.removeAttribute("teleport-controls");
-        return; // without this return the other cases are fired - weird!
+        return;
+      case "erase":
+        controlEl.removeAttribute("raycaster");
+        controlEl.removeAttribute("controller-cursor");
+        console.log("eraseEnd");
+        controlEl.removeEventListener('click', function () {} );
+        return;
     }
   }
 });