malty/ca-grow-ops-manager
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: Finalize 3D view with HTML labels
Some checks are pending
Test / backend-test (push) Waiting to run
Details
Test / frontend-test (push) Waiting to run
Details

Browse source
This commit is contained in:
fullsizemalt 2025-12-27 17:21:31 -08:00
parent dc2f491fa9
commit 15ab32a75a
1 changed files with 19 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
frontend/src/components/facility3d/RoomObject.tsx
View file

@ -1,5 +1,5 @@
import { useMemo } from 'react';
import { Text } from '@react-three/drei';
import { Html } from '@react-three/drei';
import * as THREE from 'three';
import type { Room3D } from '../../lib/layoutApi';
import { PlantPosition, VisMode, COLORS } from './types';
@ -94,31 +94,29 @@ export function RoomObject({ room, visMode, onPlantClick, highlightedTags, dimMo
position={[actualRoom.posX + actualRoom.width / 2, 6, actualRoom.posY + actualRoom.height / 2]}
/>
{/* Room label - positioned above the actual content area */}
<Text
position={[actualRoom.posX + actualRoom.width / 2, 0.05, actualRoom.posY + actualRoom.height / 2]}
rotation={[-Math.PI / 2, 0, 0]}
fontSize={Math.min(actualRoom.width, actualRoom.height) / 8}
color="#f8fafc"
fillOpacity={0.5}
anchorX="center"
anchorY="middle"
{/* Room label - HTML Overlay for clear readability */}
<Html
position={[actualRoom.posX + actualRoom.width / 2, 0, actualRoom.posY + actualRoom.height / 2]}
center
zIndexRange={[100, 0]}
>
<div className="px-3 py-1.5 bg-slate-900/80 backdrop-blur-sm border border-white/10 rounded-lg text-white font-medium text-sm whitespace-nowrap shadow-xl pointer-events-none select-none transform transition-transform">
{room.name}
</Text>
</div>
</Html>
{(visMode === 'TEMP' || visMode === 'HUMIDITY') && (
<Text
<Html
position={[actualRoom.posX + actualRoom.width / 2, 4, actualRoom.posY + actualRoom.height / 2]}
rotation={[-Math.PI / 4, 0, 0]}
fontSize={Math.min(4, actualRoom.width / 4)}
color="#fff"
outlineColor="#000"
outlineWidth={0.15}
anchorX="center"
center
>
<div className={cn(
"px-2 py-1 rounded text-xs font-bold text-white shadow-lg pointer-events-none",
visMode === 'TEMP' ? "bg-orange-500" : "bg-blue-500"
)}>
{visMode === 'TEMP' ? `${env.temp}°F` : `${env.humidity}%`}
</Text>
</div>
</Html>
)}
{/* Room floor - use calculated bounds */}