Merge pull request voxel51#4226 from voxel51/refactor/looker-3d-impro…

…vements looker 3d improvements
jainanisha90 · Apr 5, 2024 · 6b7468a · 6b7468a
2 parents 81b2545 + 4e57db0
commit 6b7468a
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 9 deletions.
diff --git a/app/packages/looker-3d/src/action-bar/FullScreenToggler.tsx b/app/packages/looker-3d/src/action-bar/FullScreenToggler.tsx
@@ -0,0 +1,39 @@
+import { fullscreen, fullscreenExit } from "@fiftyone/looker/src/icons";
+import * as fos from "@fiftyone/state";
+import { IconButton } from "@mui/material";
+import { useCallback, useEffect, useRef } from "react";
+import { useRecoilState } from "recoil";
+import { ActionItem } from "../containers";
+
+const FullScreenIcon = ({ exit }: { exit: boolean }) => {
+  const ref = useRef<HTMLDivElement>();
+
+  useEffect(() => {
+    if (ref) {
+      ref.current.innerHTML = "";
+      ref.current.appendChild(exit ? fullscreenExit : fullscreen);
+    }
+  }, [exit]);
+
+  return <div style={{ display: "flex" }} ref={ref} />;
+};
+
+export const FullScreenToggler = () => {
+  const [isFullScreen, setIsFullScreen] = useRecoilState(fos.fullscreen);
+
+  const toggleFullScreen = useCallback(() => {
+    setIsFullScreen((prev) => !prev);
+  }, []);
+
+  return (
+    <ActionItem title="Toggle Fullscreen">
+      <IconButton onClick={toggleFullScreen} sx={{ fontSize: 24, padding: 0 }}>
+        {isFullScreen ? (
+          <FullScreenIcon exit />
+        ) : (
+          <FullScreenIcon exit={false} />
+        )}
+      </IconButton>
+    </ActionItem>
+  );
+};
diff --git a/app/packages/looker-3d/src/action-bar/ViewHelp.tsx b/app/packages/looker-3d/src/action-bar/ViewHelp.tsx
@@ -3,7 +3,7 @@ import { useHelpPanel } from "@fiftyone/state";
 import { ActionItem } from "../containers";
 import { ACTION_VIEW_HELP } from "../constants";
 
-const LOOKER3D_HELP_ITEMS = [
+export const LOOKER3D_HELP_ITEMS = [
   { shortcut: "Wheel", title: "Zoom", detail: "Zoom in and out" },
   { shortcut: "Drag", title: "Rotate", detail: "Rotate the camera" },
   {
@@ -13,7 +13,10 @@ const LOOKER3D_HELP_ITEMS = [
   },
   { shortcut: "T", title: "Top-down", detail: "Reset camera to top-down view" },
   { shortcut: "E", title: "Ego-view", detail: "Reset the camera to ego view" },
+  { shortcut: "B", title: "Background", detail: "Toggle background" },
   { shortcut: "C", title: "Controls", detail: "Toggle controls" },
+  { shortcut: "G", title: "Grid", detail: "Toggle grid" },
+  { shortcut: "F", title: "Full-screen", detail: "Toggle full-screen" },
   { shortcut: "?", title: "Display help", detail: "Display this help window" },
   { shortcut: "ESC", title: "Escape ", detail: "Escape the current context" },
 ];

diff --git a/app/packages/looker-3d/src/action-bar/index.tsx b/app/packages/looker-3d/src/action-bar/index.tsx
@@ -15,6 +15,7 @@ import {
 import { ActionBarContainer, ActionsBar } from "../containers";
 import { actionRenderListAtomFamily } from "../state";
 import { ChooseColorSpace } from "./ColorSpace";
+import { FullScreenToggler } from "./FullScreenToggler";
 import { SetPointSizeButton } from "./PointSize";
 import { SetViewButton } from "./SetViewButton";
 import { SliceSelector } from "./SliceSelector";
@@ -133,7 +134,10 @@ export const ActionBar = ({
       onMouseLeave={onMouseLeave}
     >
       {isSliceSelectorOn && <SliceSelector />}
-      <ActionsBar>{componentsToRender}</ActionsBar>
+      <ActionsBar>
+        {componentsToRender}
+        <FullScreenToggler />
+      </ActionsBar>
     </ActionBarContainer>
   );
 };
diff --git a/app/packages/looker-3d/src/constants.ts b/app/packages/looker-3d/src/constants.ts
@@ -35,10 +35,10 @@ export const SHADE_BY_CHOICES: { label: string; value: ShadeBy }[] = [
   { label: "None", value: SHADE_BY_NONE },
 ];
 
-export const PANEL_ORDER_VISIBILITY = 9;
+export const PANEL_ORDER_VISIBILITY = -1;
+export const PANEL_ORDER_ANIMATIONS = 1;
 export const PANEL_ORDER_PCD_CONTROLS = 1;
-export const PANEL_ORDER_LIGHTS = 10;
-export const PANEL_ORDER_ANIMATIONS = 3;
+export const PANEL_ORDER_LIGHTS = 999;
 export const PANEL_ORDER_SETTINGS = 1000;
 
 export const COLOR_POOL = [

diff --git a/app/packages/looker-3d/src/containers.ts b/app/packages/looker-3d/src/containers.ts
@@ -79,10 +79,10 @@ export const Container = styled.div`
   justify-content: center;
 `;
 
-export const LevaContainer = styled.div`
+export const LevaContainer = styled.div<{ isSidebarVisible: boolean }>`
   position: absolute;
-  bottom: 30vh;
-  left: 2.5vw;
+  top: 12vh;
+  right: ${(props) => (props.isSidebarVisible ? "23vw" : "3vw")};
   z-index: 1000;
   height: 0;
 `;

diff --git a/app/packages/looker-3d/src/fo3d/Leva.tsx b/app/packages/looker-3d/src/fo3d/Leva.tsx
@@ -1,16 +1,19 @@
 import { useFont, useTheme } from "@fiftyone/components";
+import * as fos from "@fiftyone/state";
 import { Leva as LevaOptions } from "leva";
 import { createPortal } from "react-dom";
+import { useRecoilValue } from "recoil";
 import { LevaContainer } from "../containers";
 
 function Leva() {
   const theme = useTheme();
   const font = useFont();
+  const isSidebarVisible = useRecoilValue(fos.sidebarVisible(true));
 
   return (
     <>
       {createPortal(
-        <LevaContainer>
+        <LevaContainer isSidebarVisible={isSidebarVisible}>
           <LevaOptions
             theme={{
               colors: {