Fix inspecting focus issues

Hubs-Foundation · Jan 23, 2024 · 3e17530 · 3e17530
1 parent 4bfbcbd
commit 3e17530
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 29 deletions.
diff --git a/src/bit-components.js b/src/bit-components.js
@@ -100,9 +100,8 @@ export const PenActive = defineComponent();
 export const PenUpdated = defineComponent();
 export const HoverMenuChild = defineComponent();
 export const Static = defineComponent();
-export const Inspectable = defineComponent({
-  fireChangeEvent: Types.ui8
-});
+export const Inspectable = defineComponent();
+export const InspectTargetChanged = defineComponent();
 export const Inspected = defineComponent();
 export const PreventAudioBoost = defineComponent();
 export const IgnoreSpaceBubble = defineComponent();

diff --git a/src/bit-systems/inspect-system.ts b/src/bit-systems/inspect-system.ts
@@ -1,18 +1,19 @@
-import { defineQuery, enterQuery, exitQuery } from "bitecs";
+import { defineQuery, enterQuery, exitQuery, hasComponent, removeComponent } from "bitecs";
 import { HubsWorld } from "../app";
-import { Inspectable, Inspected } from "../bit-components";
+import { InspectTargetChanged, Inspected } from "../bit-components";
 import { CameraSystem } from "../systems/camera-system";
+import { anyEntityWith } from "../utils/bit-utils";
 
 const inspectedQuery = defineQuery([Inspected]);
 const inspectedEnterQuery = enterQuery(inspectedQuery);
 const inspectedExitQuery = exitQuery(inspectedQuery);
 export function inspectSystem(world: HubsWorld, cameraSystem: CameraSystem) {
-  inspectedEnterQuery(world).forEach(eid => {
-    const obj = world.eid2obj.get(eid);
-    cameraSystem.inspect(obj, 1.5, Boolean(Inspectable.fireChangeEvent[eid]));
-  });
   inspectedExitQuery(world).forEach(eid => {
+    cameraSystem.uninspect(hasComponent(world, InspectTargetChanged, eid));
+    removeComponent(world, InspectTargetChanged, eid);
+  });
+  inspectedEnterQuery(world).forEach(eid => {
     const obj = world.eid2obj.get(eid);
-    cameraSystem.uninspect(Boolean(Inspectable.fireChangeEvent[eid]));
+    cameraSystem.inspect(obj, 1.5, hasComponent(world, InspectTargetChanged, eid));
   });
 }
diff --git a/src/bit-systems/object-menu.ts b/src/bit-systems/object-menu.ts
@@ -23,7 +23,8 @@ import {
   MediaMirrored,
   Inspected,
   Inspectable,
-  Deletable
+  Deletable,
+  InspectTargetChanged
 } from "../bit-components";
 import {
   anyEntityWith,
@@ -225,7 +226,7 @@ function handleHeldEnter(world: HubsWorld, eid: EntityID, menuEid: EntityID) {
       if (!hasComponent(world, Inspected, ObjectMenu.targetRef[menuEid])) {
         ObjectMenu.flags[menuEid] &= ~ObjectMenuFlags.Visible;
         addComponent(world, Inspected, ObjectMenu.targetRef[menuEid]);
-        Inspectable.fireChangeEvent[ObjectMenu.targetRef[menuEid]] = 1;
+        addComponent(world, InspectTargetChanged, ObjectMenu.targetRef[menuEid]);
       }
       break;
   }
@@ -245,7 +246,7 @@ function handleHeldExit(world: HubsWorld, eid: EntityID, menuEid: EntityID) {
       if (hasComponent(world, Inspected, ObjectMenu.targetRef[menuEid])) {
         ObjectMenu.flags[menuEid] |= ObjectMenuFlags.Visible;
         removeComponent(world, Inspected, ObjectMenu.targetRef[menuEid]);
-        Inspectable.fireChangeEvent[ObjectMenu.targetRef[menuEid]] = 1;
+        addComponent(world, InspectTargetChanged, ObjectMenu.targetRef[menuEid]);
       }
       break;
   }

diff --git a/src/react-components/room/hooks/useObjectList.js b/src/react-components/room/hooks/useObjectList.js
@@ -1,9 +1,9 @@
 import React, { useState, useEffect, useContext, createContext, useCallback, Children, cloneElement } from "react";
 import PropTypes from "prop-types";
 import { mediaSort, mediaSortAframe, getMediaType, getMediaTypeAframe } from "../../../utils/media-sorting.js";
-import { shouldUseNewLoader } from "../../../utils/bit-utils";
+import { anyEntityWith, shouldUseNewLoader } from "../../../utils/bit-utils";
 import { addComponent, defineQuery, hasComponent, removeComponent } from "bitecs";
-import { Inspectable, Inspected, MediaInfo } from "../../../bit-components.js";
+import { Inspected, MediaInfo } from "../../../bit-components.js";
 
 function getUrl(eid) {
   return hasComponent(APP.world, MediaInfo, eid) ? APP.getString(MediaInfo.accessibleUrl[eid]) : "";
@@ -57,11 +57,12 @@ function handleInspect(scene, object, callback) {
   callback(object);
 
   if (shouldUseNewLoader()) {
-    if (hasComponent(APP.world, Inspected, object.eid)) {
-      removeComponent(APP.world, Inspected, object.eid);
-    } else {
+    const inspected = anyEntityWith(APP.world, Inspected);
+    if (inspected != object.eid) {
+      if (inspected) {
+        removeComponent(APP.world, Inspected, inspected);
+      }
       addComponent(APP.world, Inspected, object.eid);
-      Inspectable.fireChangeEvent[object.eid] = 0;
     }
   } else {
     if (object.el.object3D !== cameraSystem.inspectable) {
@@ -80,16 +81,18 @@ function handleDeselect(scene, object, callback) {
   callback(null);
 
   if (shouldUseNewLoader()) {
+    const inspected = anyEntityWith(APP.world, Inspected);
+    if (inspected) {
+      removeComponent(APP.world, Inspected, inspected);
+    }
     if (object) {
-      removeComponent(APP.world, Inspected, object.eid);
-      Inspectable.fireChangeEvent[object.eid] = 0;
+      addComponent(APP.world, Inspected, object.eid);
     }
   } else {
     cameraSystem.uninspect(false);
 
     if (object) {
-      const object3D = shouldUseNewLoader() ? APP.world.eid2obj.get(object.eid) : object.el.object3D;
-      cameraSystem.inspect(object3D, 1.5, false);
+      cameraSystem.inspect(object.el.object3D, 1.5, false);
     }
   }
 }

diff --git a/src/systems/camera-system.js b/src/systems/camera-system.js
@@ -8,9 +8,21 @@ import { qsGet } from "../utils/qs_truthy";
 const customFOV = qsGet("fov");
 const enableThirdPersonMode = qsTruthy("thirdPerson");
 import { Layers } from "../camera-layers";
-import { HoveredRemoteRight, Inspectable, LocalAvatar, RemoteAvatar } from "../bit-components";
-import { findAncestorWithAnyComponent, findAncestorWithComponent, shouldUseNewLoader } from "../utils/bit-utils";
-import { defineQuery } from "bitecs";
+import {
+  HoveredRemoteRight,
+  InspectTargetChanged,
+  Inspectable,
+  Inspected,
+  LocalAvatar,
+  RemoteAvatar
+} from "../bit-components";
+import {
+  anyEntityWith,
+  findAncestorWithAnyComponent,
+  findAncestorWithComponent,
+  shouldUseNewLoader
+} from "../utils/bit-utils";
+import { addComponent, defineQuery, removeComponent } from "bitecs";
 
 function getInspectableInHierarchy(eid) {
   let inspectable = findAncestorWithComponent(APP.world, Inspectable, eid);
@@ -460,8 +472,8 @@ export class CameraSystem {
         if (shouldUseNewLoader()) {
           if (hoveredQuery(APP.world).length) {
             const hovered = hoveredQuery(APP.world)[0];
-            const obj = APP.world.eid2obj.get(hovered);
-            this.inspect(obj, 1.5);
+            addComponent(APP.world, Inspected, hovered);
+            addComponent(APP.world, InspectTargetChanged, hovered);
           }
         } else {
           const hoverEl = this.interaction.state.rightRemote.hovered || this.interaction.state.leftRemote.hovered;
@@ -472,7 +484,14 @@ export class CameraSystem {
         }
       } else if (this.mode === CAMERA_MODE_INSPECT && this.userinput.get(paths.actions.stopInspecting)) {
         scene.emit("uninspect");
-        this.uninspect();
+        if (shouldUseNewLoader()) {
+          const inspected = anyEntityWith(APP.world, Inspected);
+          if (inspected) {
+            removeComponent(APP.world, Inspected, inspected);
+          }
+        } else {
+          this.uninspect();
+        }
       }
 
       if (this.userinput.get(paths.actions.nextCameraMode)) {