fix issue with pen not drawing until second primary_grab; fix spawn_pen-hover...

fix issue with pen not drawing until second primary_grab; fix spawn_pen-hover icon; enable spawning pen from in-world-hud; re-enable personal space bubble as default

src/components/in-world-hud.js

@@ -11,23 +11,23 @@ AFRAME.registerComponent("in-world-hud", {
   init() {
     this.mic = this.el.querySelector(".mic");
     this.freeze = this.el.querySelector(".freeze");
-    this.bubble = this.el.querySelector(".bubble");
+    this.pen = this.el.querySelector(".pen");
     this.background = this.el.querySelector(".bg");
     const renderOrder = window.APP.RENDER_ORDER;
     this.mic.object3DMap.mesh.renderOrder = renderOrder.HUD_ICONS;
     this.freeze.object3DMap.mesh.renderOrder = renderOrder.HUD_ICONS;
-    this.bubble.object3DMap.mesh.renderOrder = renderOrder.HUD_ICONS;
+    this.pen.object3DMap.mesh.renderOrder = renderOrder.HUD_ICONS;
     this.background.object3DMap.mesh.renderORder = renderOrder.HUD_BACKGROUND;
 
     this.updateButtonStates = () => {
       this.mic.setAttribute("icon-button", "active", this.el.sceneEl.is("muted"));
       this.freeze.setAttribute("icon-button", "active", this.el.sceneEl.is("frozen"));
-      this.bubble.setAttribute("icon-button", "active", this.el.sceneEl.is("spacebubble"));
+      this.pen.setAttribute("icon-button", "active", this.el.sceneEl.is("pen"));
     };
     this.updateButtonStates();
 
     this.onStateChange = evt => {
-      if (!(evt.detail === "muted" || evt.detail === "frozen" || evt.detail === "spacebubble")) return;
+      if (!(evt.detail === "muted" || evt.detail === "frozen" || evt.detail === "pen")) return;
       this.updateButtonStates();
     };
 
@@ -39,8 +39,8 @@ AFRAME.registerComponent("in-world-hud", {
       this.el.emit("action_freeze");
     };
 
-    this.onBubbleClick = () => {
-      this.el.emit("action_space_bubble");
+    this.onPenClick = () => {
+      this.el.emit("spawn_pen");
     };
   },
 
@@ -50,7 +50,7 @@ AFRAME.registerComponent("in-world-hud", {
 
     this.mic.addEventListener("click", this.onMicClick);
     this.freeze.addEventListener("click", this.onFreezeClick);
-    this.bubble.addEventListener("click", this.onBubbleClick);
+    this.pen.addEventListener("click", this.onPenClick);
   },
 
   pause() {
@@ -59,6 +59,6 @@ AFRAME.registerComponent("in-world-hud", {
 
     this.mic.removeEventListener("click", this.onMicClick);
     this.freeze.removeEventListener("click", this.onFreezeClick);
-    this.bubble.removeEventListener("click", this.onBubbleClick);
+    this.pen.removeEventListener("click", this.onPenClick);
   }
 });

src/hub.html

@@ -27,7 +27,7 @@
         physics="gravity: -6; debug: false;"
         mute-mic="eventSrc: a-scene; toggleEvents: action_mute"
         freeze-controller="toggleEvent: action_freeze"
-        personal-space-bubble="enabled: false; debug: false;"
+        personal-space-bubble="debug: false;"
         vr-mode-ui="enabled: false"
         pinch-to-move
         input-configurator="
@@ -56,6 +56,8 @@
             <img id="freeze-off-hover" crossorigin="anonymous" src="./assets/hud/freeze_off-hover.png">
             <img id="freeze-on" crossorigin="anonymous" src="./assets/hud/freeze_on.png">
             <img id="freeze-on-hover" crossorigin="anonymous" src="./assets/hud/freeze_on-hover.png">
+            <img id="spawn-pen" crossorigin="anonymous" src="./assets/hud/spawn_pen.png">
+            <img id="spawn-pen-hover" crossorigin="anonymous" src="./assets/hud/spawn_pen-hover.png">
 
             <a-asset-item id="botdefault" response-type="arraybuffer" src="https://asset-bundles-prod.reticulum.io/bots/BotDefault_Avatar-9f71f8ff22.gltf"></a-asset-item>
             <a-asset-item id="botbobo" response-type="arraybuffer" src="https://asset-bundles-prod.reticulum.io/bots/BotBobo_Avatar-f9740a010b.gltf"></a-asset-item>
@@ -315,7 +317,7 @@
               <a-rounded height="0.13" width="0.48" color="#000000" position="-0.24 -0.065 0" radius="0.065" opacity="0.35" class="hud bg"></a-rounded>
               <a-image icon-button="tooltip: #hud-tooltip; tooltipText: Mute Mic; activeTooltipText: Unmute Mic; image: #mute-off; hoverImage: #mute-off-hover; activeImage: #mute-on; activeHoverImage: #mute-on-hover" scale="0.1 0.1 0.1" position="-0.17 0 0.001" class="ui hud mic" material="alphaTest:0.1;"></a-image>
               <a-image icon-button="tooltip: #hud-tooltip; tooltipText: Pause; activeTooltipText: Resume; image: #freeze-off; hoverImage: #freeze-off-hover; activeImage: #freeze-on; activeHoverImage: #freeze-on-hover" scale="0.2 0.2 0.2" position="0 0 0.005" class="ui hud freeze"></a-image>
-              <a-image icon-button="tooltip: #hud-tooltip; tooltipText: Enable Bubble; activeTooltipText: Disable Bubble; image: #bubble-off; hoverImage: #bubble-off-hover; activeImage: #bubble-on; activeHoverImage: #bubble-on-hover" scale="0.1 0.1 0.1" position="0.17 0 0.001" class="ui hud bubble" material="alphaTest:0.1;"></a-image>
+              <a-image icon-button="tooltip: #hud-tooltip; tooltipText: Spawn Pen; activeTooltipText: Spawn Pen; image: #spawn-pen; hoverImage: #spawn-pen-hover; activeImage: #spawn-pen; activeHoverImage: #spawn-pen-hover" scale="0.1 0.1 0.1" position="0.17 0 0.001" class="ui hud pen" material="alphaTest:0.1;"></a-image>
               <a-rounded visible="false" id="hud-tooltip" height="0.08" width="0.3" color="#000000" position="-0.15 -0.2 0" rotation="-20 0 0" radius="0.025" opacity="0.35" class="hud bg">
                 <a-entity text="value: Mute Mic; align:center;" position="0.15 0.04 0.001" ></a-entity>
               </a-rounded>
@@ -327,7 +329,7 @@
               class="camera"
               camera
               position="0 1.6 0"
-              personal-space-bubble="enabled: false; radius: 0.4;"
+              personal-space-bubble="radius: 0.4;"
               pitch-yaw-rotator
           >
             <a-entity

src/utils/action-event-handler.js

@@ -112,6 +112,7 @@ export default class ActionEventHandler {
     event = event || e.type;
     const superHand = e.target.components["super-hands"];
     const isCursorHand = this.isHandThatAlsoDrivesCursor(e.target);
+    this.isCursorInteracting = this.cursor.isInteracting();
     if (isCursorHand && !this.isCursorInteracting) {
       if (superHand.state.has("hover-start") || superHand.state.get("grab-start")) {
         e.target.emit(event);
@@ -132,7 +133,7 @@ export default class ActionEventHandler {
       //need to check both grab-start and hover-start in the case that the spawner is being grabbed this frame
       if (this.isToggle(this.cursorHand.state.get("grab-start") || this.cursorHand.state.get("hover-start"))) {
         this.cursorHand.el.emit(event);
-        this.isCursorInteracting = !!this.cursorHand.state.get("grab-start");
+        this.isCursorInteracting = this.cursor.isInteracting();
       } else {
         this.isCursorInteracting = false;
         this.cursor.endInteraction();