random other fixes

kscalelabs · Nov 7, 2024 · 6924c3d · 6924c3d
1 parent e814836
commit 6924c3d
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 96 deletions.
diff --git a/frontend/src/components/files/URDFRenderer.tsx b/frontend/src/components/files/URDFRenderer.tsx
@@ -53,7 +53,6 @@ const URDFRenderer = ({
   const [showControls, setShowControls] = useState(true);
   const [isCycling, setIsCycling] = useState(false);
   const animationRef = useRef<number | null>(null);
-  const [isInStartPosition, setIsInStartPosition] = useState(true);
   const [urdfInfo, setUrdfInfo] = useState<URDFInfo | null>(null);
   const [orientation, setOrientation] = useState<Orientation>("Z-up");
   const [isFullScreen, setIsFullScreen] = useState(false);
@@ -65,30 +64,19 @@ const URDFRenderer = ({
   const wireframeStateRef = useRef<boolean>(showWireframe);
   const [theme, setTheme] = useState<Theme>(() => supportedThemes[0]);
   const themeRef = useRef<Theme>("default");
+  const cameraRef = useRef<THREE.PerspectiveCamera | null>(null);
+  const controlsRef = useRef<OrbitControls | null>(null);
 
   useEffect(() => {
     const handleFullScreenChange = () => {
       const isNowFullScreen = !!document.fullscreenElement;
-
-      if (isNowFullScreen) {
-        setIsFullScreen(true);
-      } else {
-        jointPositionsRef.current = jointControls.map((joint) => ({
-          name: joint.name,
-          value: joint.value,
-        }));
-        wireframeStateRef.current = isWireframe;
-        themeRef.current = theme;
-
-        setIsFullScreen(false);
-        setForceRerender((prev) => prev + 1);
-      }
+      setIsFullScreen(isNowFullScreen);
     };
 
     document.addEventListener("fullscreenchange", handleFullScreenChange);
     return () =>
       document.removeEventListener("fullscreenchange", handleFullScreenChange);
-  }, [jointControls, isWireframe, theme]);
+  }, []);
 
   const getThemeColors = useCallback(() => {
     switch (theme) {
@@ -121,14 +109,18 @@ const URDFRenderer = ({
       0.1,
       1000,
     );
+    cameraRef.current = camera;
+
     const renderer = new THREE.WebGLRenderer({ antialias: true });
+    rendererRef.current = renderer;
     renderer.setSize(
       containerRef.current.clientWidth,
       containerRef.current.clientHeight,
     );
     containerRef.current.appendChild(renderer.domElement);
 
     const controls = new OrbitControls(camera, renderer.domElement);
+    controlsRef.current = controls;
     controls.enableDamping = true;
     controls.dampingFactor = 0.25;
 
@@ -252,7 +244,12 @@ const URDFRenderer = ({
     animate();
 
     const handleResize = () => {
-      if (!containerRef.current) return;
+      if (!containerRef.current || !rendererRef.current || !cameraRef.current)
+        return;
+
+      const camera = cameraRef.current;
+      const renderer = rendererRef.current;
+
       camera.aspect =
         containerRef.current.clientWidth / containerRef.current.clientHeight;
       camera.updateProjectionMatrix();
@@ -285,12 +282,23 @@ const URDFRenderer = ({
 
     updateOrientation(orientation);
 
+    // Add fullscreen change handler that just triggers a resize
+    const handleFullScreenChange = () => {
+      const isNowFullScreen = !!document.fullscreenElement;
+      setIsFullScreen(isNowFullScreen);
+      requestAnimationFrame(handleResize);
+    };
+
+    document.addEventListener("fullscreenchange", handleFullScreenChange);
+
     return () => {
       if (containerRef.current) {
         containerRef.current.removeChild(renderer.domElement);
       }
       window.removeEventListener("resize", handleResize);
       updateOrientation("Z-up"); // Reset orientation on unmount
+      rendererRef.current = null;
+      document.removeEventListener("fullscreenchange", handleFullScreenChange);
     };
   }, [urdfContent, files, orientation, forceRerender, getThemeColors]);
 
@@ -311,8 +319,6 @@ const URDFRenderer = ({
         }
       });
     }
-
-    setIsInStartPosition(false);
   };
 
   const cycleAllJoints = useCallback(() => {
@@ -321,7 +327,7 @@ const URDFRenderer = ({
 
     const startPositions = jointControls.map((joint) => joint.value);
     const startTime = Date.now();
-    const duration = 10000; // 10 seconds
+    const duration = 3000; // Changed from 10000 to 3000 (3 seconds)
 
     const animate = () => {
       const elapsedTime = Date.now() - startTime;
@@ -358,13 +364,6 @@ const URDFRenderer = ({
     };
   }, []);
 
-  const resetJoints = useCallback(() => {
-    jointControls.forEach((joint, index) => {
-      handleJointChange(index, (joint.max + joint.min) / 2);
-    });
-    setIsInStartPosition(true);
-  }, [jointControls, handleJointChange]);
-
   const toggleOrientation = useCallback(() => {
     setOrientation((prev) => {
       const newOrientation =
@@ -373,6 +372,9 @@ const URDFRenderer = ({
         const robot = robotRef.current;
         robot.rotation.set(0, 0, 0);
 
+        // Store current wireframe state
+        const currentWireframe = isWireframe;
+
         switch (newOrientation) {
           case "Y-up":
             robot.rotateX(-Math.PI / 2);
@@ -382,76 +384,34 @@ const URDFRenderer = ({
             break;
           // 'Z-up' is the default, no rotation needed
         }
+
+        // Reapply wireframe state to all meshes
+        robot.traverse((child) => {
+          if (child instanceof THREE.Mesh) {
+            const material = new THREE.MeshStandardMaterial({
+              color: child.userData.originalColor || child.material.color,
+              metalness: 0.4,
+              roughness: 0.6,
+              wireframe: currentWireframe,
+            });
+            child.material = material;
+            child.material.needsUpdate = true;
+          }
+        });
       }
       return newOrientation;
     });
-  }, []);
-
-  const resetViewerState = useCallback(() => {
-    if (
-      !containerRef.current ||
-      !robotRef.current ||
-      !sceneRef.current ||
-      !rendererRef.current
-    )
-      return;
-
-    const renderer = rendererRef.current;
-    renderer.setSize(
-      containerRef.current.clientWidth,
-      containerRef.current.clientHeight,
-    );
-
-    const camera = new THREE.PerspectiveCamera(
-      50,
-      containerRef.current.clientWidth / containerRef.current.clientHeight,
-      0.1,
-      1000,
-    );
-    const distance = 10;
-    camera.position.set(0, distance / 2, -distance);
-    camera.lookAt(0, 0, 0);
-
-    const robot = robotRef.current;
-    const box = new THREE.Box3().setFromObject(robot);
-    const center = box.getCenter(new THREE.Vector3());
-    const size = box.getSize(new THREE.Vector3());
-    const maxDim = Math.max(size.x, size.y, size.z);
-    const scale = 5 / maxDim;
-    robot.scale.setScalar(scale);
-    robot.position.sub(center.multiplyScalar(scale));
-
-    renderer.render(sceneRef.current, camera);
-  }, []);
-
-  useEffect(() => {
-    const handleFullScreenChange = () => {
-      const isNowFullScreen = !!document.fullscreenElement;
-      setIsFullScreen(isNowFullScreen);
-
-      if (!isNowFullScreen) {
-        setTimeout(() => {
-          resetViewerState();
-        }, 100);
-      }
-    };
-
-    document.addEventListener("fullscreenchange", handleFullScreenChange);
-    return () =>
-      document.removeEventListener("fullscreenchange", handleFullScreenChange);
-  }, [resetViewerState]);
+  }, [isWireframe]);
 
   const toggleFullScreen = useCallback(() => {
-    if (!parentRef.current || isCycling) return;
+    if (!parentRef.current) return;
 
     if (!document.fullscreenElement) {
       parentRef.current.requestFullscreen();
-      setIsFullScreen(true);
     } else {
       document.exitFullscreen();
-      setIsFullScreen(false);
     }
-  }, [isCycling]);
+  }, []);
 
   const cycleTheme = useCallback(() => {
     if (sceneRef.current && supportedThemes.length > 1) {
@@ -512,17 +472,16 @@ const URDFRenderer = ({
           </button>
           <button
             onClick={toggleFullScreen}
-            disabled={isCycling}
             className={
-              "bg-purple-500 hover:bg-purple-600 text-white font-bold w-8 h-8 rounded-full shadow-md flex items-center justify-center disabled:opacity-50"
+              "bg-purple-500 hover:bg-purple-600 text-white font-bold w-8 h-8 rounded-full shadow-md flex items-center justify-center"
             }
           >
             {isFullScreen ? <FaCompress /> : <FaExpand />}
           </button>
           <button
             onClick={() => setIsWireframe(!isWireframe)}
             className={
-              "bg-purple-500 hover:bg-purple-600 text-white font-bold w-8 h-8 rounded-full shadow-md flex items-center justify-center disabled:opacity-50"
+              "bg-purple-500 hover:bg-purple-600 text-white font-bold w-8 h-8 rounded-full shadow-md flex items-center justify-center"
             }
           >
             {isWireframe ? "S" : "W"}
@@ -554,9 +513,8 @@ const URDFRenderer = ({
                   {isCycling ? "Cycling..." : "Cycle All Joints"}
                 </button>
                 <button
-                  onClick={resetJoints}
-                  disabled={isCycling || isInStartPosition}
-                  className="w-full bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded disabled:opacity-50"
+                  onClick={() => setShowControls(false)}
+                  className="w-full bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded"
                 >
                   <FaUndo className="inline-block mr-2" />
                   Reset Joints

diff --git a/frontend/src/components/terminal/TerminalRobotModel.tsx b/frontend/src/components/terminal/TerminalRobotModel.tsx
@@ -1,13 +1,12 @@
 import { useEffect, useState } from "react";
 
 import { parseTar } from "@/components/files/Tarfile";
+import URDFRenderer from "@/components/files/URDFRenderer";
 import Spinner from "@/components/ui/Spinner";
 import { useAlertQueue } from "@/hooks/useAlertQueue";
 import { useAuthentication } from "@/hooks/useAuth";
 import pako from "pako";
 
-import URDFRenderer from "../files/URDFRenderer";
-
 interface Props {
   listingId: string;
 }
@@ -97,6 +96,7 @@ const TerminalRobotModel = ({ listingId }: Props) => {
       urdfContent={new TextDecoder().decode(urdfFile.content)}
       files={files}
       supportedThemes={["dark"]}
+      showWireframe={true}
       useControls={false}
     />
   );

diff --git a/frontend/src/components/terminal/TerminalSingleRobot.tsx b/frontend/src/components/terminal/TerminalSingleRobot.tsx
@@ -5,10 +5,9 @@ import { useNavigate } from "react-router-dom";
 import "@/components/terminal/Terminal.css";
 
 import AudioIcon from "@/components/icons/AudioIcon";
+import TerminalRobotModel from "@/components/terminal/TerminalRobotModel";
 import { SingleRobotResponse } from "@/components/terminal/types";
 
-import TerminalRobotModel from "./TerminalRobotModel";
-
 interface Props {
   robot: SingleRobotResponse;
   onUpdateRobot: (