gpt-engineer-app[bot]
122 lines
4.1 KiB
TypeScript
122 lines
4.1 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">
|
|
TrackSteel<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;
|