From 8866341a8f522601ec7b48e3fb6b44fdfbb12179 Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Sat, 27 Dec 2025 18:39:57 -0800
Subject: [PATCH] fix: Finalize AUTO-FIT implementation in JSX

---
 .../components/facility3d/Room3DViewer.tsx    | 52 ++++++++++++-------
 1 file changed, 33 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/facility3d/Room3DViewer.tsx b/frontend/src/components/facility3d/Room3DViewer.tsx
index fe75f54..6a73d2d 100644
--- a/frontend/src/components/facility3d/Room3DViewer.tsx
+++ b/frontend/src/components/facility3d/Room3DViewer.tsx
@@ -61,32 +61,46 @@ export function Room3DViewer({ room, visMode = 'STANDARD', onPlantClick }: Room3
     }, [room]);
 
     return (
-        <div className="w-full h-[600px] bg-gradient-to-br from-slate-900 to-slate-950 rounded-2xl overflow-hidden border border-[var(--color-border-subtle)] relative">
+        <div className="w-full h-[600px] bg-slate-950 rounded-2xl overflow-hidden border border-[var(--color-border-subtle)] relative">
             <Canvas
                 shadows
                 orthographic
-                camera={{ position: [200, 200, 200], zoom: 30, near: -500, far: 1500 }}
+                camera={{ position: [100, 100, 100], zoom: 40, near: -500, far: 2000 }}
                 className="w-full h-full"
             >
                 <ambientLight intensity={0.7} />
                 <directionalLight position={[10, 50, 20]} intensity={1.5} castShadow />
 
-                <group position={[0, -5, 0]}>
-                    <RoomObject
-                        room={room3DData}
-                        visMode={visMode}
-                        onPlantClick={onPlantClick || (() => { })}
-                        highlightedTags={[]}
-                        dimMode={false}
-                        hierarchy={{
-                            facility: 'Main',
-                            building: 'A',
-                            floor: '1',
-                        }}
-                    />
-                </group>
+                {/* Grid Floor for context */}
+                <Grid
+                    infiniteGrid
+                    fadeDistance={200}
+                    sectionColor="#10b981"
+                    cellColor="#059669"
+                    sectionThickness={1}
+                    cellThickness={0.5}
+                    opacity={0.15}
+                    position={[0, -0.1, 0]}
+                    args={[10.5, 10.5]}
+                />
+
+                <Bounds fit clip observe margin={1.2}>
+                    <group position={[0, 0, 0]}>
+                        <RoomObject
+                            room={room3DData}
+                            visMode={visMode}
+                            onPlantClick={onPlantClick || (() => { })}
+                            highlightedTags={[]}
+                            dimMode={false}
+                            hierarchy={{
+                                facility: 'Main',
+                                building: 'A',
+                                floor: '1',
+                            }}
+                        />
+                    </group>
+                </Bounds>
 
-                <ContactShadows position={[0, -5.01, 0]} opacity={0.3} scale={60} blur={2} far={20} />
                 <Environment preset="city" />
                 <OrbitControls
                     makeDefault
@@ -96,8 +110,8 @@ export function Room3DViewer({ room, visMode = 'STANDARD', onPlantClick }: Room3
                 />
             </Canvas>
 
-            <div className="absolute bottom-4 right-4 bg-slate-900/90 backdrop-blur-md px-3 py-1.5 rounded-md border border-white/20 text-xs font-mono text-emerald-400 pointer-events-none shadow-xl">
-                VIEW: ISOMETRIC // FIXED
+            <div className="absolute bottom-4 right-4 bg-slate-900/90 backdrop-blur-md px-3 py-1.5 rounded-md border border-emerald-500/20 text-xs font-mono text-emerald-400 pointer-events-none shadow-xl">
+                VIEW: ISOMETRIC // FIXED // AUTO-FIT
             </div>
         </div>
     );