Merge pull request #6447 from mozilla/bitecs-improve-menu-interaction

Improve menu interaction
Hubs-Foundation · Jan 23, 2024 · 494b3bb · 494b3bb
2 parents 1f7c920 + 8545126
commit 494b3bb
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 2 deletions.
diff --git a/src/bit-systems/link-hover-menu.ts b/src/bit-systems/link-hover-menu.ts
@@ -8,7 +8,8 @@ import {
   Interacted,
   LinkHoverMenuItem,
   LinkInitializing,
-  ObjectMenuTransform
+  ObjectMenuTransform,
+  CursorRaycastable
 } from "../bit-components";
 import { findAncestorWithComponent, findChildWithComponent } from "../utils/bit-utils";
 import { hubIdFromUrl } from "../utils/media-url-utils";
@@ -24,6 +25,12 @@ const hoveredLinksQuery = defineQuery([HoveredRemoteRight, Link, Not(LinkInitial
 const hoveredMenuItemQuery = defineQuery([HoveredRemoteRight, LinkHoverMenuItem]);
 const clickedMenuItemQuery = defineQuery([Interacted, LinkHoverMenuItem]);
 
+function setCursorRaycastable(world: HubsWorld, menu: EntityID, enable: boolean) {
+  let change = enable ? addComponent : removeComponent;
+  change(world, CursorRaycastable, menu);
+  change(world, CursorRaycastable, LinkHoverMenu.linkButtonRef[menu]);
+}
+
 function updateLinkMenuTarget(world: HubsWorld, menu: EntityID, sceneIsFrozen: boolean) {
   if (LinkHoverMenu.targetObjectRef[menu] && !entityExists(world, LinkHoverMenu.targetObjectRef[menu])) {
     // Clear the invalid entity reference. (The link entity was removed).
@@ -145,6 +152,8 @@ function flushToObject3Ds(world: HubsWorld, menu: EntityID, frozen: boolean, for
   } else {
     buttonObj.visible = false;
   }
+
+  setCursorRaycastable(world, menu, visible);
 }
 
 export function linkHoverMenuSystem(world: HubsWorld, sceneIsFrozen: boolean) {

diff --git a/src/bit-systems/pdf-menu-system.ts b/src/bit-systems/pdf-menu-system.ts
@@ -1,7 +1,8 @@
-import { addComponent, defineQuery, entityExists, hasComponent } from "bitecs";
+import { addComponent, defineQuery, entityExists, hasComponent, removeComponent } from "bitecs";
 import { Text } from "troika-three-text";
 import type { HubsWorld } from "../app";
 import {
+  CursorRaycastable,
   Deleting,
   EntityStateDirty,
   HoveredRemoteRight,
@@ -19,6 +20,13 @@ import { takeOwnership } from "../utils/take-ownership";
 import { PDFResourcesMap } from "./pdf-system";
 import { ObjectMenuTransformFlags } from "../inflators/object-menu-transform";
 
+function setCursorRaycastable(world: HubsWorld, menu: EntityID, enable: boolean) {
+  let change = enable ? addComponent : removeComponent;
+  change(world, CursorRaycastable, menu);
+  change(world, CursorRaycastable, PDFMenu.prevButtonRef[menu]);
+  change(world, CursorRaycastable, PDFMenu.nextButtonRef[menu]);
+}
+
 function clicked(world: HubsWorld, eid: EntityID) {
   return hasComponent(world, Interacted, eid);
 }
@@ -110,6 +118,8 @@ function flushToObject3Ds(world: HubsWorld, menu: EntityID, frozen: boolean) {
     const numPages = PDFResourcesMap.get(target)!.pdf.numPages;
     (world.eid2obj.get(PDFMenu.pageLabelRef[menu]) as Text).text = `${MediaPDF.pageNumber[target]} / ${numPages}`;
   }
+
+  setCursorRaycastable(world, menu, visible);
 }
 
 const hoveredQuery = defineQuery([HoveredRemoteRight]);

diff --git a/src/bit-systems/video-menu-system.ts b/src/bit-systems/video-menu-system.ts
@@ -36,6 +36,8 @@ function setCursorRaycastable(world: HubsWorld, menu: number, enable: boolean) {
   let change = enable ? addComponent : removeComponent;
   change(world, CursorRaycastable, menu);
   change(world, CursorRaycastable, VideoMenu.trackRef[menu]);
+  change(world, CursorRaycastable, VideoMenu.playIndicatorRef[menu]);
+  change(world, CursorRaycastable, VideoMenu.pauseIndicatorRef[menu]);
 }
 
 const intersectInThePlaneOf = (() => {