diff --git a/assets/environment/icon_undo.png b/assets/environment/icon_undo.png new file mode 100644 index 0000000..58a2804 Binary files /dev/null and b/assets/environment/icon_undo.png differ diff --git a/assets/environment/icon_undo_large.png b/assets/environment/icon_undo_large.png new file mode 100644 index 0000000..d9689eb Binary files /dev/null and b/assets/environment/icon_undo_large.png differ diff --git a/index.html b/index.html index be00413..fdc22bc 100755 --- a/index.html +++ b/index.html @@ -29,6 +29,8 @@ + + @@ -132,13 +134,13 @@ - + + - - - + + diff --git a/lib/action-controls.js b/lib/action-controls.js index 6326c1c..b68fafa 100644 --- a/lib/action-controls.js +++ b/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; } } });