diff --git a/src/components/sticky-object.js b/src/components/sticky-object.js index 9ecad8d621b43a6290832167cdde2094de925047..99f93ffafcfcfb2c8e7ff4045d4ac4e758663daa 100644 --- a/src/components/sticky-object.js +++ b/src/components/sticky-object.js @@ -1,4 +1,23 @@ /* global THREE, CANNON, AFRAME */ +AFRAME.registerComponent("remove-object-button", { + init() { + this.onClick = () => { + this.targetEl.parentNode.removeChild(this.targetEl); + }; + NAF.utils.getNetworkedEntity(this.el).then(networkedEl => { + this.targetEl = networkedEl; + }); + }, + + play() { + this.el.addEventListener("click", this.onClick); + }, + + pause() { + this.el.removeEventListener("click", this.onClick); + } +}); + AFRAME.registerComponent("sticky-object", { dependencies: ["body", "super-networked-interactable"], diff --git a/src/components/text-button.js b/src/components/text-button.js index 67af3653dcc4c9e81b59aec376feab6a00eb7fe4..491b482a248099ae8a277ed5cb04dbb638df6f83 100644 --- a/src/components/text-button.js +++ b/src/components/text-button.js @@ -57,3 +57,12 @@ AFRAME.registerComponent("text-button", { this.textEl.setAttribute("text", "color", hovering ? this.data.textHoverColor : this.data.textColor); } }); + +const noop = function() {}; +// TODO: this should ideally be fixed upstream somehow but its pretty tricky since text is just a geometry not a different type of Object3D, and Object3D is what handles raycast checks. +AFRAME.registerComponent("text-raycast-hack", { + dependencies: ["text"], + init() { + this.el.getObject3D("text").raycast = noop; + } +}); diff --git a/src/hub.html b/src/hub.html index 1059db2da8433409594227e3c8780fe9dd213cef..9863b8361c91da6eaf2132597ade00307b14195b 100644 --- a/src/hub.html +++ b/src/hub.html @@ -123,31 +123,8 @@ <a-entity> <a-entity personal-space-invader="radius: 0.2; useMaterial: true;" bone-visibility> </a-entity> <a-entity billboard> - <a-entity - block-button - visible-while-frozen - ui-class-while-frozen - text-button="haptic:#player-right-controller; - textHoverColor: #fff; - textColor: #fff; - backgroundHoverColor: #ea4b54; - backgroundColor: #fff;" - slice9="width: 0.45; - height: 0.2; - left: 53; - top: 53; - right: 10; - bottom: 10; - opacity: 1.3; - src: #tooltip" - position="0 0 .35"> - </a-entity> - <a-entity - visible-while-frozen - text="value:Block; - width:2.5; - align:center;" - position="0 0 0.36"></a-entity> + <a-entity mixin="rounded-text-button" block-button visible-while-frozen ui-class-while-frozen position="0 0 .35"> </a-entity> + <a-entity visible-while-frozen text="value:Block; width:2.5; align:center;" position="0 0 0.36"></a-entity> </a-entity> </a-entity> </template> @@ -207,9 +184,31 @@ image-plus sticky-object="autoLockOnLoad: true; autoLockOnRelease: true;" > + <a-entity visible-while-frozen> + <a-entity mixin="rounded-text-button" remove-object-button position="0 0 .08"> </a-entity> + <a-entity text=" value:Delete; width:2.5; align:center;" text-raycast-hack position="0 0 0.09"></a-entity> + </a-entity> </a-entity> </template> + <a-mixin id="rounded-text-button" + text-button=" + haptic:#player-right-controller; + textHoverColor: #fff; + textColor: #fff; + backgroundHoverColor: #ea4b54; + backgroundColor: #fff;" + slice9=" + width: 0.45; + height: 0.2; + left: 53; + top: 53; + right: 10; + bottom: 10; + opacity: 1.3; + src: #tooltip" + ></a-mixin> + <a-mixin id="controller-super-hands" super-hands=" colliderEvent: collisions; colliderEventProperty: els;