Add delete button to images while in freeze mode

src/components/sticky-object.js

 /* 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"],
 

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;
+  }
+});

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;