gpt-engineer-app[bot]
129 lines
4.2 KiB
TypeScript
129 lines
4.2 KiB
TypeScript
import { useNavigate } from 'react-router-dom';
|
|
import { ArrowLeft, Glasses, Box, Ruler, FileText } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { useModelStore } from '@/stores/useModelStore';
|
|
import { ModelViewerCanvas } from '@/components/three/ModelViewer';
|
|
import { ViewerControls } from '@/components/ViewerControls';
|
|
import { InspectionChecklist } from '@/components/InspectionChecklist';
|
|
import { FineTuningControls } from '@/components/FineTuningControls';
|
|
import { MeasurementsList } from '@/components/MeasurementsList';
|
|
import { ScreenshotGallery } from '@/components/ScreenshotGallery';
|
|
import { useEffect } from 'react';
|
|
import { toast } from 'sonner';
|
|
import { ScrollArea } from '@/components/ui/scroll-area';
|
|
import { Separator } from '@/components/ui/separator';
|
|
|
|
const Viewer = () => {
|
|
const navigate = useNavigate();
|
|
const { model, xrSupported } = useModelStore();
|
|
|
|
useEffect(() => {
|
|
if (!model) {
|
|
navigate('/');
|
|
}
|
|
}, [model, navigate]);
|
|
|
|
if (!model) return null;
|
|
|
|
const handleEnterXR = async () => {
|
|
if (!xrSupported) {
|
|
toast.error('WebXR não é suportado neste navegador. Use o navegador do Meta Quest 3.');
|
|
return;
|
|
}
|
|
navigate('/xr');
|
|
};
|
|
|
|
return (
|
|
<div className="flex h-screen flex-col bg-background">
|
|
{/* Top bar */}
|
|
<header className="flex items-center justify-between border-b bg-card px-4 py-3">
|
|
<div className="flex items-center gap-3">
|
|
<Button variant="ghost" size="icon" onClick={() => navigate('/')}>
|
|
<ArrowLeft className="h-5 w-5" />
|
|
</Button>
|
|
<div className="flex items-center gap-2">
|
|
<Box className="h-5 w-5 text-primary" />
|
|
<h1 className="font-mono text-sm font-semibold text-foreground">
|
|
TrackkSteel<span className="text-primary">XR</span>
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<Button
|
|
className="gap-2 glow-primary"
|
|
disabled={!xrSupported}
|
|
onClick={handleEnterXR}
|
|
>
|
|
<Glasses className="h-4 w-4" />
|
|
Entrar em Modo XR
|
|
</Button>
|
|
</header>
|
|
|
|
<div className="flex flex-1 overflow-hidden">
|
|
{/* 3D Canvas with floating controls */}
|
|
<div className="relative flex-1">
|
|
<ModelViewerCanvas url={model.url} />
|
|
<ViewerControls />
|
|
</div>
|
|
|
|
{/* Side panel */}
|
|
<aside className="w-80 shrink-0 border-l bg-card">
|
|
<ScrollArea className="h-full">
|
|
<div className="p-4 space-y-5">
|
|
<div>
|
|
<h2 className="mb-3 font-mono text-xs font-semibold uppercase tracking-widest text-muted-foreground">
|
|
Informações do Modelo
|
|
</h2>
|
|
<div className="space-y-3">
|
|
<InfoItem icon={FileText} label="Arquivo" value={model.fileName} />
|
|
<InfoItem
|
|
icon={Box}
|
|
label="Tamanho"
|
|
value={`${(model.fileSize / (1024 * 1024)).toFixed(2)} MB`}
|
|
/>
|
|
<InfoItem icon={Ruler} label="Escala" value="1:1 (mm)" />
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<FineTuningControls />
|
|
|
|
<Separator />
|
|
|
|
<MeasurementsList />
|
|
|
|
<Separator />
|
|
|
|
<InspectionChecklist />
|
|
|
|
<Separator />
|
|
|
|
<ScreenshotGallery />
|
|
<div className="rounded-lg border bg-muted/50 p-3">
|
|
<p className="font-mono text-xs text-muted-foreground">
|
|
Use o mouse para orbitar, scroll para zoom. Controle a opacidade e o modo de renderização nos controles flutuantes.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</ScrollArea>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
function InfoItem({ icon: Icon, label, value }: { icon: any; label: string; value: string }) {
|
|
return (
|
|
<div className="flex items-start gap-3">
|
|
<Icon className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
|
|
<div className="min-w-0">
|
|
<p className="text-xs text-muted-foreground">{label}</p>
|
|
<p className="truncate font-mono text-sm text-foreground">{value}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Viewer;
|