jason
113 lines
3.9 KiB
TypeScript
113 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
// Lightweight wrapper around <StepViewer>. Used anywhere we want a
|
|
// "Show 3D" toggle that reveals the in-browser STEP viewer on demand:
|
|
//
|
|
// - Assembly detail page (admin)
|
|
// - Operator scan page (phone)
|
|
//
|
|
// Keeps the heavy occt / three.js / WASM out of the initial bundle via
|
|
// next/dynamic + ssr:false, and only starts loading when the user taps
|
|
// the toggle.
|
|
//
|
|
// Intentionally does NOT capture thumbnails — the part detail page has
|
|
// its own richer variant for that. Here we just render the model.
|
|
|
|
import dynamic from "next/dynamic";
|
|
import { useState } from "react";
|
|
|
|
const StepViewer = dynamic(() => import("@/components/StepViewer"), {
|
|
ssr: false,
|
|
loading: () => (
|
|
<div className="relative w-full h-[320px] rounded-lg border border-slate-200 bg-slate-50 flex items-center justify-center text-sm text-slate-500">
|
|
Loading viewer…
|
|
</div>
|
|
),
|
|
});
|
|
|
|
interface Props {
|
|
/** FileAsset id whose bytes will be streamed from /api/v1/files/:id/download. */
|
|
fileId: string;
|
|
/** Human-friendly file name shown in the header. */
|
|
fileName: string;
|
|
/** Panel heading, e.g. "3D viewer" or "Assembly 3D". */
|
|
title?: string;
|
|
/** If true, the panel renders already open. Defaults to false — saves the
|
|
* ~2 MB WASM download until the operator actually asks for it, which matters
|
|
* on a phone. */
|
|
defaultOpen?: boolean;
|
|
/** Height of the viewer canvas. Defaults to 360 (good for phones). Admin
|
|
* pages can bump this to 480. */
|
|
height?: number;
|
|
/** Extra tailwind classes for the outer <section>. */
|
|
className?: string;
|
|
}
|
|
|
|
export default function StepViewerPanel({
|
|
fileId,
|
|
fileName,
|
|
title = "3D viewer",
|
|
defaultOpen = false,
|
|
height = 360,
|
|
className,
|
|
}: Props) {
|
|
const [open, setOpen] = useState(defaultOpen);
|
|
const [edges, setEdges] = useState(true);
|
|
const url = `/api/v1/files/${fileId}/download`;
|
|
|
|
return (
|
|
<section className={className}>
|
|
<div className="flex items-center justify-between gap-3 mb-2">
|
|
<h2 className="text-sm font-semibold text-slate-900">{title}</h2>
|
|
<div className="flex items-center gap-3">
|
|
{open ? (
|
|
<label className="flex items-center gap-1.5 text-xs text-slate-600">
|
|
<input
|
|
type="checkbox"
|
|
checked={edges}
|
|
onChange={(e) => setEdges(e.target.checked)}
|
|
/>
|
|
Show edges
|
|
</label>
|
|
) : null}
|
|
<button
|
|
type="button"
|
|
onClick={() => setOpen((v) => !v)}
|
|
className={`rounded-md text-sm font-medium px-3 py-1.5 ${
|
|
open
|
|
? "bg-white border border-slate-300 text-slate-700"
|
|
: "bg-slate-900 text-white"
|
|
}`}
|
|
>
|
|
{open ? "Hide" : "Show 3D"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{open ? (
|
|
<div className="rounded-xl border border-slate-200 bg-white p-3">
|
|
<div className="mb-2 text-[11px] text-slate-500 truncate" title={fileName}>
|
|
Viewing: <code className="font-mono text-slate-700">{fileName}</code>
|
|
</div>
|
|
<div style={{ height }} className="relative w-full rounded-lg border border-slate-200 bg-slate-50 overflow-hidden">
|
|
<StepViewer
|
|
key={`${fileId}-${edges ? "e" : "ne"}`}
|
|
url={url}
|
|
showEdges={edges}
|
|
className="absolute inset-0"
|
|
/>
|
|
</div>
|
|
<p className="mt-2 text-[11px] text-slate-500">
|
|
Drag to rotate · pinch / scroll to zoom · two-finger drag to pan. Rendered in
|
|
your browser — the STEP file isn't downloaded to your device.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<p className="text-xs text-slate-500">
|
|
Interactive 3D preview. Tap <span className="font-medium">Show 3D</span> to load
|
|
(~2 MB of viewer code fetched on first use).
|
|
</p>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|