Spaces:
Running
Running
| import {RotateCcw} from 'lucide-react'; | |
| export type ViewMode='parts'|'materials'|'meshes'; | |
| export type InspectionPart={id:string;name:string;jointId?:string|null}; | |
| export type InspectionInfo={parts:InspectionPart[];triangles:number;meshDetail:'edges'|'wireframe'}; | |
| type Props={mode:ViewMode;amount:number;part:string;busy:boolean;info:InspectionInfo; | |
| onMode:(mode:ViewMode)=>void;onExplode:(value:number)=>void;onPart:(id:string)=>void;onReset:()=>void}; | |
| export default function VisualControls({mode,amount,part,busy,info,onMode,onExplode,onPart,onReset}:Props){ | |
| const modes:ViewMode[]=['parts','materials','meshes']; | |
| return <section className="visual-controls" aria-label="3D appearance"> | |
| <div className="visual-toolbar"> | |
| <div className="view-modes" role="group" aria-label="Rendering mode"> | |
| {modes.map(value=><button key={value} disabled={busy} aria-pressed={mode===value} onClick={()=>onMode(value)}>{value[0].toUpperCase()+value.slice(1)}</button>)} | |
| </div> | |
| <button className="icon-button" aria-label="Reset appearance" title="Reset view, materials and separation" onClick={onReset} disabled={busy}><RotateCcw size={15}/></button> | |
| </div> | |
| <div className="explode-control"> | |
| <label htmlFor="object-explode">Explode</label> | |
| <input id="object-explode" aria-label="Separate parts" type="range" min="0" max="1" step="0.01" value={amount} onChange={e=>onExplode(+e.target.value)} disabled={info.parts.length<2||busy}/> | |
| <output htmlFor="object-explode">{Math.round(amount*100)}%</output> | |
| </div> | |
| <div className="visual-detail"> | |
| <label className="part-picker"><span className="sr-only">Inspect a part</span><select title="Select a part, or tap it on the object" aria-label="Inspect a part" value={part} onChange={e=>onPart(e.target.value)} disabled={busy}> | |
| <option value="">All parts · {info.parts.length.toLocaleString()}</option> | |
| {info.parts.map(p=><option key={p.id} value={p.id}>{p.name}</option>)} | |
| </select></label> | |
| <span className="mesh-count">{busy?'Preparing view…':mode==='meshes'?`${info.triangles.toLocaleString()} triangles${info.meshDetail==='wireframe'?' · wireframe':''}`:''}</span> | |
| </div> | |
| </section>; | |
| } | |