feat: enhance conveyor collider functionality and improve scene visibility toggle

app/src/components/layout/sidebarRight/SideBarRight.tsx

@@ -168,7 +168,7 @@ const SideBarRight: React.FC = () => {
         }
 
         setDisplayComponent("none");
-    }, [viewVersionHistory, activeModule, subModule, isVersionSaved, selectedFloorItem, selectedWall, selectedFloor, selectedAisle, toolMode, selectedDecal]);
+    }, [viewVersionHistory, activeModule, subModule, isVersionSaved, selectedFloorItem, selectedWall, selectedFloor, selectedAisle, toolMode, selectedDecal, selectedCollider]);
 
     const renderComponent = () => {
         switch (displayComponent) {

app/src/modules/builder/asset/models/model/model.tsx

@@ -232,7 +232,7 @@ function Model({ asset, isRendered, loader }: { readonly asset: Asset, isRendere
                             asset={asset}
                         /> */}
 
-                    {asset.eventData && asset.eventData.type === 'Conveyor' && fieldData &&
+                    {asset.eventData && asset.eventData.type === 'Conveyor' && fieldData && activeModule === 'simulation' &&
                         <RibbonCollider
                             key={asset.modelUuid}
                             boundingBox={boundingBox}

app/src/modules/scene/helpers/StatsHelper.tsx

@@ -19,5 +19,5 @@ export default function StatsHelper() {
         return () => window.removeEventListener("keydown", handleKeyDown);
     }, []);
 
-    return visible ? <Perf  position="bottom-left" className="scene-performance-stats"/> : null;
+    return visible ? <Perf position="bottom-left" className="scene-performance-stats" /> : null;
 }

app/src/modules/scene/physics/conveyor/types/curvedConveyorCollider.tsx

@@ -335,6 +335,7 @@ function CurvedConveyorCollider({
                                 side={THREE.DoubleSide}
                                 transparent
                                 opacity={0.7}
+                                visible={false}
                             />
                         </mesh>
                     ))}
@@ -354,6 +355,7 @@ function CurvedConveyorCollider({
                             key={`highlight-${index}`}
                             geometry={geometry}
                             position={[0, 0.002, 0]} // Slightly above conveyor
+                        // visible={false}
                         >
                             <meshBasicMaterial
                                 color={forward ? "#00ff0044" : "#ff000044"}

app/src/modules/scene/physics/conveyor/types/normalConveyorCollider.tsx

@@ -20,7 +20,7 @@ function NormalConveyorCollider({ points, boundingBox, asset, forward, isPaused,
     const conveyorSpeed = 2;
     const lastClickTime = useRef(0);
     const [hoverState, setHoverState] = useState(false);
-    const[localForward,setLocalForward]=useState()
+    const [localForward, setLocalForward] = useState()
 
     useEffect(() => {
         const handleClick = (e: MouseEvent) => {
@@ -215,6 +215,7 @@ function NormalConveyorCollider({ points, boundingBox, asset, forward, isPaused,
                             side={THREE.DoubleSide}
                             transparent
                             opacity={0.5}
+                            visible={false}
                         />
                     </mesh>
                 </RigidBody>
@@ -231,6 +232,7 @@ function NormalConveyorCollider({ points, boundingBox, asset, forward, isPaused,
                             key={`highlight-${index}`}
                             geometry={geometry}
                             position={[0, 0.002, 0]}
+                        // visible={false}
                         >
                             <meshBasicMaterial
                                 color={forward ? "#00ff0044" : "#ff000044"}

app/src/modules/scene/physics/conveyor/types/ySplitConveyorCollider.tsx

@@ -214,6 +214,7 @@ function YSplitConveyorCollider({ points, boundingBox, asset, forward, isPaused,
                             side={THREE.DoubleSide}
                             transparent
                             opacity={0.5}
+                            visible={false}
                         />
                     </mesh>
                 </RigidBody>
@@ -230,6 +231,7 @@ function YSplitConveyorCollider({ points, boundingBox, asset, forward, isPaused,
                             key={`highlight-${index}`}
                             geometry={geometry}
                             position={[0, 0.002, 0]}
+                        // visible={false}
                         >
                             <meshBasicMaterial
                                 color={forward ? "green" : "red"}

app/src/modules/scene/scene.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Canvas } from "@react-three/fiber";
 import { Physics } from "@react-three/rapier";
 import { Color, SRGBColorSpace } from "three";
@@ -8,7 +8,6 @@ import Builder from "../builder/builder";
 import Visualization from "../visualization/visualization";
 import Setup from "./setup/setup";
 import Simulation from "../simulation/simulation";
-import PhysicsSimulator from "./physics/physicsSimulator";
 import Collaboration from "../collaboration/collaboration";
 import useModuleStore from "../../store/useModuleStore";
 import { useParams } from "react-router-dom";
@@ -19,6 +18,7 @@ import { useLoadingProgress, useSocketStore } from "../../store/builder/store";
 import { compressImage } from "../../utils/compressImage";
 
 export default function Scene({ layout }: { readonly layout: "Main Layout" | "Comparison Layout"; }) {
+    const [visible, setVisible] = useState(false);
     const map = useMemo(() => [
         { name: "forward", keys: ["ArrowUp", "w", "W"] },
         { name: "backward", keys: ["ArrowDown", "s", "S"] },
@@ -58,6 +58,18 @@ export default function Scene({ layout }: { readonly layout: "Main Layout" | "Co
         // eslint-disable-next-line
     }, [activeModule, assets, loadingProgress]);
 
+    useEffect(() => {
+        const handleKeyDown = (event: KeyboardEvent) => {
+            if (event.key === "F1") {
+                event.preventDefault();
+                setVisible(prev => !prev);
+            }
+        };
+
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, []);
+
     return (
         <KeyboardControls map={map}>
             <Canvas
@@ -72,11 +84,9 @@ export default function Scene({ layout }: { readonly layout: "Main Layout" | "Co
             >
                 <Setup />
                 <Collaboration />
-                <Physics gravity={[0, -9.81, 0]} allowedLinearError={50} numSolverIterations={50} debug >
+                <Physics gravity={[0, -9.81, 0]} allowedLinearError={50} numSolverIterations={50} debug={visible} >
                     <Builder />
-                    {/* <Physics gravity={[0, -9.81, 0]} allowedLinearError={50} numSolverIterations={50}  > */}
                     <Simulation />
-                    <PhysicsSimulator />
                 </Physics>
                 <Visualization />
             </Canvas>

app/src/modules/simulation/simulation.tsx

@@ -13,6 +13,7 @@ import Products from './products/products';
 import Trigger from './triggers/trigger';
 import useModuleStore from '../../store/useModuleStore';
 import SimulationAnalysis from './analysis/simulationAnalysis';
+import PhysicsSimulator from '../scene/physics/physicsSimulator';
 import { useSceneContext } from '../scene/sceneContext';
 
 function Simulation() {
@@ -62,6 +63,8 @@ function Simulation() {
 
                     <SimulationAnalysis />
 
+                    <PhysicsSimulator />
+
                 </>
 
             }