fix: media thumbnails, product dimensions, inline 3D viewer, GLB export
Bug A: Media Library thumbnails were gray because <img src> cannot send JWT auth headers. Added useAuthBlob() hook (fetch + createObjectURL) in MediaBrowser.tsx. Also fixed publish_asset Celery task to populate product_id + cad_file_id on MediaAsset for thumbnail fallback resolution. Bug B: Product dimensions now shown in Product Details card with Ruler icon and "from CAD" label when cad_mesh_attributes.dimensions_mm exists. Bug C: Replaced 128×128 CAD thumbnail with InlineCadViewer component. Queries gltf_geometry MediaAssets, fetches GLB via auth fetch → blob URL → Three.js Canvas with OrbitControls. Falls back to thumbnail + "Load 3D Model" button. Polling when GLB generation is in progress. Bug D: trimesh was in [cad] optional extra but Dockerfile only installed [dev]. Changed to pip install -e ".[dev,cad]" — trimesh now available in backend container, GLB + Colors export works. Also added bbox extraction (STL-first numpy parsing) in render_step_thumbnail and admin "Re-extract CAD Metadata" bulk endpoint. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -86,6 +86,13 @@ export default function AdminPage() {
|
||||
smtp_user: string
|
||||
smtp_password: string
|
||||
smtp_from_address: string
|
||||
gltf_scale_factor: number
|
||||
gltf_smooth_normals: boolean
|
||||
viewer_max_distance: number
|
||||
viewer_min_distance: number
|
||||
gltf_material_quality: string
|
||||
gltf_pbr_roughness: number
|
||||
gltf_pbr_metallic: number
|
||||
}
|
||||
|
||||
const { data: settings } = useQuery({
|
||||
@@ -106,6 +113,9 @@ export default function AdminPage() {
|
||||
const [blenderDraft, setBlenderDraft] = useState<Partial<Settings>>({})
|
||||
const blender = { ...settings, ...blenderDraft } as Settings
|
||||
|
||||
const [viewerDraft, setViewerDraft] = useState<Partial<Settings>>({})
|
||||
const viewer3d = { ...settings, ...viewerDraft } as Settings
|
||||
|
||||
const { data: rendererStatus, refetch: refetchStatus } = useQuery({
|
||||
queryKey: ['renderer-status'],
|
||||
queryFn: async () => {
|
||||
@@ -157,6 +167,14 @@ export default function AdminPage() {
|
||||
onError: (e: any) => toast.error(e.response?.data?.detail || 'Failed'),
|
||||
})
|
||||
|
||||
const reextractMetadataMut = useMutation({
|
||||
mutationFn: () => api.post('/admin/settings/reextract-metadata'),
|
||||
onSuccess: (res) => {
|
||||
toast.success(res.data.message || 'Metadata re-extraction queued')
|
||||
},
|
||||
onError: (e: any) => toast.error(e.response?.data?.detail || 'Failed'),
|
||||
})
|
||||
|
||||
const seedWorkflowsMut = useMutation({
|
||||
mutationFn: () => api.post('/admin/settings/seed-workflows'),
|
||||
onSuccess: (res) => {
|
||||
@@ -698,6 +716,18 @@ export default function AdminPage() {
|
||||
</button>
|
||||
<p className="text-xs text-content-muted">Generates low + high STL files for completed STEP files missing them.</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<button
|
||||
onClick={() => reextractMetadataMut.mutate()}
|
||||
disabled={reextractMetadataMut.isPending}
|
||||
className="btn-secondary text-sm w-full justify-start"
|
||||
title="Re-extract OCC bounding box and sharp-edge data for all completed CAD files"
|
||||
>
|
||||
<RefreshCw size={14} className={reextractMetadataMut.isPending ? 'animate-spin' : ''} />
|
||||
{reextractMetadataMut.isPending ? 'Queueing…' : 'Re-extract CAD Metadata'}
|
||||
</button>
|
||||
<p className="text-xs text-content-muted">Updates dimensions and edge data for existing files (no re-render).</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<button
|
||||
onClick={() => seedWorkflowsMut.mutate()}
|
||||
@@ -961,6 +991,150 @@ export default function AdminPage() {
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* ------------------------------------------------------------------ */}
|
||||
{/* 3D Viewer & GLB Export Settings */}
|
||||
{/* ------------------------------------------------------------------ */}
|
||||
<div className="card">
|
||||
<div className="p-4 border-b border-border-default">
|
||||
<h2 className="font-semibold text-content">3D Viewer & GLB Export</h2>
|
||||
<p className="text-sm text-content-muted mt-0.5">
|
||||
Settings for the 3D viewer and GLB geometry export
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-4 space-y-4">
|
||||
{/* Scale Factor */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="text-sm font-medium text-content-muted block mb-1">
|
||||
GLB Scale Factor (mm→m)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.0001"
|
||||
min="0.0001"
|
||||
max="1"
|
||||
value={viewer3d.gltf_scale_factor ?? 0.001}
|
||||
onChange={e => setViewerDraft(d => ({ ...d, gltf_scale_factor: parseFloat(e.target.value) }))}
|
||||
className="input w-full"
|
||||
/>
|
||||
<p className="text-xs text-content-muted mt-0.5">Default 0.001 converts mm to meters</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-medium text-content-muted block mb-1">
|
||||
Smooth Normals
|
||||
</label>
|
||||
<label className="flex items-center gap-2 mt-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={viewer3d.gltf_smooth_normals ?? true}
|
||||
onChange={e => setViewerDraft(d => ({ ...d, gltf_smooth_normals: e.target.checked }))}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<span className="text-sm text-content">Apply Laplacian smoothing on export</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Camera / Zoom Limits */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="text-sm font-medium text-content-muted block mb-1">
|
||||
Max Zoom-Out Distance
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
step="1"
|
||||
min="1"
|
||||
max="10000"
|
||||
value={viewer3d.viewer_max_distance ?? 50}
|
||||
onChange={e => setViewerDraft(d => ({ ...d, viewer_max_distance: parseFloat(e.target.value) }))}
|
||||
className="input w-full"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-medium text-content-muted block mb-1">
|
||||
Min Zoom-In Distance
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.001"
|
||||
min="0.0001"
|
||||
max="1"
|
||||
value={viewer3d.viewer_min_distance ?? 0.001}
|
||||
onChange={e => setViewerDraft(d => ({ ...d, viewer_min_distance: parseFloat(e.target.value) }))}
|
||||
className="input w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* PBR Material Quality */}
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label className="text-sm font-medium text-content-muted block mb-1">
|
||||
GLB Material Mode
|
||||
</label>
|
||||
<select
|
||||
value={viewer3d.gltf_material_quality ?? 'pbr_colors'}
|
||||
onChange={e => setViewerDraft(d => ({ ...d, gltf_material_quality: e.target.value }))}
|
||||
className="input w-full"
|
||||
>
|
||||
<option value="none">None (geometry only)</option>
|
||||
<option value="pbr_colors">PBR Colors (from part colors)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-medium text-content-muted block mb-1">
|
||||
PBR Roughness (0–1)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.05"
|
||||
min="0"
|
||||
max="1"
|
||||
value={viewer3d.gltf_pbr_roughness ?? 0.4}
|
||||
onChange={e => setViewerDraft(d => ({ ...d, gltf_pbr_roughness: parseFloat(e.target.value) }))}
|
||||
className="input w-full"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-sm font-medium text-content-muted block mb-1">
|
||||
PBR Metallic (0–1)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.05"
|
||||
min="0"
|
||||
max="1"
|
||||
value={viewer3d.gltf_pbr_metallic ?? 0.6}
|
||||
onChange={e => setViewerDraft(d => ({ ...d, gltf_pbr_metallic: parseFloat(e.target.value) }))}
|
||||
className="input w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
updateSettingsMut.mutate(viewerDraft)
|
||||
setViewerDraft({})
|
||||
}}
|
||||
disabled={Object.keys(viewerDraft).length === 0 || updateSettingsMut.isPending}
|
||||
className="btn-primary disabled:opacity-40"
|
||||
>
|
||||
Save 3D Settings
|
||||
</button>
|
||||
{Object.keys(viewerDraft).length > 0 && (
|
||||
<button
|
||||
onClick={() => setViewerDraft({})}
|
||||
className="btn-secondary"
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ------------------------------------------------------------------ */}
|
||||
{/* Material Library link */}
|
||||
{/* ------------------------------------------------------------------ */}
|
||||
|
||||
@@ -21,7 +21,7 @@ export default function CadPreviewPage() {
|
||||
// Poll every 3s while generating so it appears automatically
|
||||
const { data: gltfAssets, isLoading: gltfLoading } = useQuery({
|
||||
queryKey: ['media-assets', id, 'gltf_geometry'],
|
||||
queryFn: () => getMediaAssets({ cad_file_id: id!, asset_type: 'gltf_geometry' }),
|
||||
queryFn: () => getMediaAssets({ cad_file_id: id!, asset_types: ['gltf_geometry'] }),
|
||||
enabled: !!id,
|
||||
staleTime: 5_000,
|
||||
refetchInterval: generating ? 3_000 : false,
|
||||
@@ -30,7 +30,7 @@ export default function CadPreviewPage() {
|
||||
// Load production GLB if available
|
||||
const { data: productionAssets } = useQuery({
|
||||
queryKey: ['media-assets', id, 'gltf_production'],
|
||||
queryFn: () => getMediaAssets({ cad_file_id: id!, asset_type: 'gltf_production' }),
|
||||
queryFn: () => getMediaAssets({ cad_file_id: id!, asset_types: ['gltf_production'] }),
|
||||
enabled: !!id,
|
||||
staleTime: 30_000,
|
||||
})
|
||||
@@ -38,7 +38,7 @@ export default function CadPreviewPage() {
|
||||
// Load blend assets for download
|
||||
const { data: blendAssets } = useQuery({
|
||||
queryKey: ['media-assets', id, 'blend_production'],
|
||||
queryFn: () => getMediaAssets({ cad_file_id: id!, asset_type: 'blend_production' }),
|
||||
queryFn: () => getMediaAssets({ cad_file_id: id!, asset_types: ['blend_production'] }),
|
||||
enabled: !!id,
|
||||
staleTime: 30_000,
|
||||
})
|
||||
|
||||
@@ -1,14 +1,54 @@
|
||||
import { useState } from 'react'
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import {
|
||||
LayoutGrid, LayoutList, Download, Archive, Image, Film, Box, FileCode2, Layers,
|
||||
ChevronLeft, ChevronRight, Search, ChevronDown, ChevronUp,
|
||||
ChevronLeft, ChevronRight, Search, ChevronDown, ChevronUp, Trash2, ArrowUpDown,
|
||||
Loader2,
|
||||
} from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
import {
|
||||
getMediaAssets, zipDownloadAssets, archiveMediaAsset,
|
||||
getMediaAssets, zipDownloadAssets, archiveMediaAsset, deleteMediaAssetPermanent,
|
||||
} from '../api/media'
|
||||
import type { MediaAsset, MediaAssetType, MediaFilter } from '../api/media'
|
||||
import { useAuthStore } from '../store/auth'
|
||||
|
||||
// ── useAuthBlob ───────────────────────────────────────────────────────────────
|
||||
|
||||
function useAuthBlob(url: string | null | undefined, enabled: boolean): string | null {
|
||||
const token = useAuthStore(s => s.token)
|
||||
const [blobUrl, setBlobUrl] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (!enabled || !url || !token) {
|
||||
setBlobUrl(null)
|
||||
return
|
||||
}
|
||||
|
||||
let objectUrl: string | null = null
|
||||
let cancelled = false
|
||||
|
||||
fetch(url, { headers: { Authorization: `Bearer ${token}` } })
|
||||
.then(res => {
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`)
|
||||
return res.blob()
|
||||
})
|
||||
.then(blob => {
|
||||
if (cancelled) return
|
||||
objectUrl = URL.createObjectURL(blob)
|
||||
setBlobUrl(objectUrl)
|
||||
})
|
||||
.catch(() => {
|
||||
if (!cancelled) setBlobUrl(null)
|
||||
})
|
||||
|
||||
return () => {
|
||||
cancelled = true
|
||||
if (objectUrl) URL.revokeObjectURL(objectUrl)
|
||||
}
|
||||
}, [url, token, enabled])
|
||||
|
||||
return blobUrl
|
||||
}
|
||||
|
||||
// ── Helpers ───────────────────────────────────────────────────────────────────
|
||||
|
||||
@@ -35,16 +75,18 @@ const TYPE_COLORS: Record<MediaAssetType, string> = {
|
||||
const PRIMARY_TYPES: MediaAssetType[] = ['still', 'turntable', 'thumbnail']
|
||||
const ADVANCED_TYPES: MediaAssetType[] = ['gltf_geometry', 'gltf_production', 'blend_production', 'stl_low', 'stl_high']
|
||||
const ALL_TYPES: MediaAssetType[] = [...PRIMARY_TYPES, ...ADVANCED_TYPES]
|
||||
const DEFAULT_TYPES: Set<MediaAssetType> = new Set(['still', 'turntable'])
|
||||
const DEFAULT_TYPES: Set<MediaAssetType> = new Set(['thumbnail', 'still', 'turntable'])
|
||||
|
||||
const isImageAsset = (type: MediaAssetType) => type === 'thumbnail' || type === 'still'
|
||||
const isVideoAsset = (type: MediaAssetType) => type === 'turntable'
|
||||
const isImageAsset = (type: MediaAssetType, mime?: string | null) =>
|
||||
type === 'thumbnail' || type === 'still' || (mime?.startsWith('image/') ?? false)
|
||||
const isVideoAsset = (type: MediaAssetType, mime?: string | null) =>
|
||||
type === 'turntable' && (mime?.startsWith('video/') ?? true)
|
||||
|
||||
// ── TypeIcon ─────────────────────────────────────────────────────────────────
|
||||
|
||||
function TypeIcon({ type }: { type: MediaAssetType }) {
|
||||
if (isImageAsset(type)) return <Image size={32} className="text-gray-400" />
|
||||
if (isVideoAsset(type)) return <Film size={32} className="text-gray-400" />
|
||||
function TypeIcon({ type, mime }: { type: MediaAssetType; mime?: string | null }) {
|
||||
if (isImageAsset(type, mime)) return <Image size={32} className="text-gray-400" />
|
||||
if (isVideoAsset(type, mime)) return <Film size={32} className="text-gray-400" />
|
||||
if (type === 'stl_low' || type === 'stl_high') return <Box size={32} className="text-gray-400" />
|
||||
if (type === 'gltf_geometry' || type === 'gltf_production') return <FileCode2 size={32} className="text-gray-400" />
|
||||
return <Layers size={32} className="text-gray-400" />
|
||||
@@ -61,10 +103,17 @@ function AssetCard({
|
||||
selected: boolean
|
||||
onToggle: () => void
|
||||
}) {
|
||||
const isImg = isImageAsset(asset.asset_type, asset.mime_type)
|
||||
const authImgUrl = useAuthBlob(asset.download_url, isImg)
|
||||
|
||||
const showImage = isImg && !!authImgUrl
|
||||
const showImgLoading = isImg && !authImgUrl && !!asset.download_url
|
||||
const showThumb = !isImg && !isVideoAsset(asset.asset_type, asset.mime_type) && asset.thumbnail_url
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`relative rounded-lg border-2 overflow-hidden cursor-pointer transition-colors ${
|
||||
selected ? 'border-blue-500' : 'border-gray-200 hover:border-gray-300'
|
||||
selected ? 'border-blue-500' : 'border-border-default hover:border-accent'
|
||||
}`}
|
||||
onClick={onToggle}
|
||||
>
|
||||
@@ -75,31 +124,37 @@ function AssetCard({
|
||||
onClick={e => e.stopPropagation()}
|
||||
className="absolute top-2 left-2 z-10 w-4 h-4 cursor-pointer"
|
||||
/>
|
||||
{isImageAsset(asset.asset_type) && asset.download_url ? (
|
||||
{showImage ? (
|
||||
<img
|
||||
src={asset.download_url}
|
||||
src={authImgUrl!}
|
||||
alt={asset.asset_type}
|
||||
className="w-full h-40 object-cover bg-gray-50"
|
||||
className="w-full h-44 object-contain p-2"
|
||||
style={{ backgroundColor: 'var(--color-bg-surface-alt)' }}
|
||||
/>
|
||||
) : isVideoAsset(asset.asset_type) && asset.download_url ? (
|
||||
) : showImgLoading ? (
|
||||
<div className="w-full h-44 flex items-center justify-center" style={{ backgroundColor: 'var(--color-bg-surface-alt)' }}>
|
||||
<Loader2 size={28} className="text-gray-400 animate-spin" />
|
||||
</div>
|
||||
) : isVideoAsset(asset.asset_type, asset.mime_type) && asset.download_url ? (
|
||||
<video
|
||||
src={asset.download_url}
|
||||
poster={asset.thumbnail_url ?? undefined}
|
||||
className="w-full h-40 object-cover bg-gray-900"
|
||||
className="w-full h-44 object-cover bg-gray-900"
|
||||
loop
|
||||
muted
|
||||
onMouseEnter={e => (e.currentTarget as HTMLVideoElement).play()}
|
||||
onMouseLeave={e => { (e.currentTarget as HTMLVideoElement).pause(); (e.currentTarget as HTMLVideoElement).currentTime = 0 }}
|
||||
/>
|
||||
) : asset.thumbnail_url ? (
|
||||
) : showThumb ? (
|
||||
<img
|
||||
src={asset.thumbnail_url}
|
||||
src={asset.thumbnail_url!}
|
||||
alt={asset.asset_type}
|
||||
className="w-full h-40 object-cover bg-gray-50 opacity-80"
|
||||
className="w-full h-44 object-contain p-2 opacity-80"
|
||||
style={{ backgroundColor: 'var(--color-bg-surface-alt)' }}
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-40 flex items-center justify-center bg-gray-50">
|
||||
<TypeIcon type={asset.asset_type} />
|
||||
<div className="w-full h-44 flex items-center justify-center" style={{ backgroundColor: 'var(--color-bg-surface-alt)' }}>
|
||||
<TypeIcon type={asset.asset_type} mime={asset.mime_type} />
|
||||
</div>
|
||||
)}
|
||||
<div className="p-2 space-y-1">
|
||||
@@ -189,6 +244,8 @@ export default function MediaBrowserPage() {
|
||||
const [productIdInput, setProductIdInput] = useState('')
|
||||
const [page, setPage] = useState(0)
|
||||
const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
|
||||
const [sortBy, setSortBy] = useState('created_at')
|
||||
const [sortDir, setSortDir] = useState<'asc' | 'desc'>('desc')
|
||||
|
||||
const toggleType = (t: MediaAssetType) => {
|
||||
setActiveTypes(prev => {
|
||||
@@ -204,6 +261,8 @@ export default function MediaBrowserPage() {
|
||||
product_id: productIdInput.trim() || undefined,
|
||||
skip: page * PAGE_SIZE,
|
||||
limit: PAGE_SIZE,
|
||||
sort_by: sortBy,
|
||||
sort_dir: sortDir,
|
||||
}
|
||||
|
||||
const { data: assets = [], isLoading } = useQuery({
|
||||
@@ -220,6 +279,14 @@ export default function MediaBrowserPage() {
|
||||
onError: () => toast.error('Failed to archive asset'),
|
||||
})
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: deleteMediaAssetPermanent,
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({ queryKey: ['media'] })
|
||||
},
|
||||
onError: () => toast.error('Failed to delete asset'),
|
||||
})
|
||||
|
||||
const toggleSelect = (id: string) => {
|
||||
setSelectedIds(prev => {
|
||||
const next = new Set(prev)
|
||||
@@ -252,6 +319,19 @@ export default function MediaBrowserPage() {
|
||||
setSelectedIds(new Set())
|
||||
}
|
||||
|
||||
const handleDeleteSelected = async () => {
|
||||
if (!confirm(`Permanently delete ${selectedIds.size} asset(s)? This cannot be undone.`)) return
|
||||
let deleted = 0
|
||||
for (const id of selectedIds) {
|
||||
try {
|
||||
await deleteMutation.mutateAsync(id)
|
||||
deleted++
|
||||
} catch { /* already toasted per item */ }
|
||||
}
|
||||
setSelectedIds(new Set())
|
||||
toast.success(`${deleted} asset(s) permanently deleted`)
|
||||
}
|
||||
|
||||
const handleDownload = (asset: MediaAsset) => {
|
||||
if (asset.download_url) {
|
||||
window.open(asset.download_url, '_blank')
|
||||
@@ -269,6 +349,27 @@ export default function MediaBrowserPage() {
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Sort dropdown */}
|
||||
<div className="flex items-center gap-1 border border-border-default rounded-md px-2 py-1">
|
||||
<ArrowUpDown size={14} className="text-content-muted shrink-0" />
|
||||
<select
|
||||
value={`${sortBy}:${sortDir}`}
|
||||
onChange={e => {
|
||||
const [by, dir] = e.target.value.split(':')
|
||||
setSortBy(by)
|
||||
setSortDir(dir as 'asc' | 'desc')
|
||||
setPage(0)
|
||||
}}
|
||||
className="text-xs text-content bg-transparent focus:outline-none cursor-pointer"
|
||||
>
|
||||
<option value="created_at:desc">Newest first</option>
|
||||
<option value="created_at:asc">Oldest first</option>
|
||||
<option value="storage_key:asc">Name A–Z</option>
|
||||
<option value="storage_key:desc">Name Z–A</option>
|
||||
<option value="file_size_bytes:desc">Largest first</option>
|
||||
<option value="file_size_bytes:asc">Smallest first</option>
|
||||
</select>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setView('grid')}
|
||||
className={`p-2 rounded-md transition-colors ${
|
||||
@@ -311,7 +412,7 @@ export default function MediaBrowserPage() {
|
||||
className={`px-3 py-1 text-xs font-medium rounded-full border transition-colors ${
|
||||
activeTypes.has(t)
|
||||
? `${TYPE_COLORS[t]} border-transparent`
|
||||
: 'bg-gray-50 text-gray-400 border-gray-200 hover:border-gray-300'
|
||||
: 'bg-surface-alt text-content-muted border-border-default hover:bg-surface-hover'
|
||||
}`}
|
||||
>
|
||||
{t}
|
||||
@@ -337,7 +438,7 @@ export default function MediaBrowserPage() {
|
||||
className={`px-3 py-1 text-xs font-medium rounded-full border transition-colors ${
|
||||
activeTypes.has(t)
|
||||
? `${TYPE_COLORS[t]} border-transparent`
|
||||
: 'bg-gray-50 text-gray-400 border-gray-200 hover:border-gray-300'
|
||||
: 'bg-surface-alt text-content-muted border-border-default hover:bg-surface-hover'
|
||||
}`}
|
||||
>
|
||||
{t}
|
||||
@@ -439,11 +540,18 @@ export default function MediaBrowserPage() {
|
||||
</button>
|
||||
<button
|
||||
onClick={handleArchiveSelected}
|
||||
className="flex items-center gap-2 text-sm bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg transition-colors"
|
||||
className="flex items-center gap-2 text-sm bg-amber-600 hover:bg-amber-700 px-4 py-2 rounded-lg transition-colors"
|
||||
>
|
||||
<Archive size={16} />
|
||||
Archive
|
||||
</button>
|
||||
<button
|
||||
onClick={handleDeleteSelected}
|
||||
className="flex items-center gap-2 text-sm bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg transition-colors"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
Delete
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setSelectedIds(new Set())}
|
||||
className="text-gray-400 hover:text-white transition-colors text-lg leading-none"
|
||||
|
||||
@@ -18,7 +18,8 @@ import { listMaterials } from '../api/materials'
|
||||
import MaterialInput from '../components/shared/MaterialInput'
|
||||
import MaterialWizard from '../components/MaterialWizard'
|
||||
import { useAuthStore } from '../store/auth'
|
||||
import { downloadStl, generateStl, generateGltfGeometry } from '../api/cad'
|
||||
import { downloadStl, generateStl, generateGltfGeometry, exportGltfColored } from '../api/cad'
|
||||
import InlineCadViewer from '../components/cad/InlineCadViewer'
|
||||
|
||||
function CadStatusBadge({ status }: { status: string | null }) {
|
||||
if (!status) return (
|
||||
@@ -289,6 +290,11 @@ export default function ProductDetailPage() {
|
||||
onError: (e: any) => toast.error(e.response?.data?.detail || 'Failed to delete'),
|
||||
})
|
||||
|
||||
const exportGltfColoredMut = useMutation({
|
||||
mutationFn: () => exportGltfColored(product?.cad_file_id!),
|
||||
onError: () => toast.error('GLB export failed'),
|
||||
})
|
||||
|
||||
const [editPositionDraft, setEditPositionDraft] = useState<Partial<RenderPosition>>({})
|
||||
|
||||
const POSITION_PRESETS = [
|
||||
@@ -414,6 +420,16 @@ export default function ProductDetailPage() {
|
||||
<p className="text-sm text-content">{product.notes || <span className="text-content-muted">—</span>}</p>
|
||||
)}
|
||||
</div>
|
||||
{product.cad_mesh_attributes?.dimensions_mm && (
|
||||
<div className="col-span-2 mt-1 pt-2 border-t border-border-light">
|
||||
<label className="block text-xs text-content-muted mb-0.5 flex items-center gap-1">
|
||||
<Ruler size={11} /> Dimensions <span className="text-content-muted/60 font-normal">(from CAD)</span>
|
||||
</label>
|
||||
<p className="text-sm text-content font-mono">
|
||||
{product.cad_mesh_attributes.dimensions_mm.x.toFixed(1)} × {product.cad_mesh_attributes.dimensions_mm.y.toFixed(1)} × {product.cad_mesh_attributes.dimensions_mm.z.toFixed(1)} mm
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{editMode && isPrivileged && (
|
||||
@@ -510,60 +526,49 @@ export default function ProductDetailPage() {
|
||||
|
||||
{product.cad_file_id ? (
|
||||
<div className="space-y-3">
|
||||
{/* Thumbnail */}
|
||||
<div className="flex gap-4">
|
||||
<div className="w-32 h-32 bg-surface-muted rounded border flex items-center justify-center shrink-0 overflow-hidden">
|
||||
{(product.render_image_url || product.thumbnail_url) ? (
|
||||
<img
|
||||
src={product.render_image_url || product.thumbnail_url!}
|
||||
alt="thumbnail"
|
||||
className="w-full h-full object-contain"
|
||||
/>
|
||||
) : (
|
||||
<Box size={36} className="text-content-muted" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col gap-2 justify-end">
|
||||
{isPrivileged && (
|
||||
<>
|
||||
<div {...getRootProps()} className="cursor-pointer">
|
||||
<input {...getInputProps()} />
|
||||
<button className="btn-secondary text-xs" disabled={cadUploadMut.isPending}>
|
||||
<Upload size={12} />
|
||||
{cadUploadMut.isPending ? 'Uploading…' : 'Re-upload STEP'}
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
className="btn-secondary text-xs"
|
||||
onClick={() => regenerateMut.mutate()}
|
||||
disabled={regenerateMut.isPending}
|
||||
title="Re-render the thumbnail using the current part materials and the active thumbnail renderer — keeps the existing STEP parse data"
|
||||
>
|
||||
<RotateCcw size={12} />
|
||||
{regenerateMut.isPending ? 'Queuing…' : 'Regenerate thumbnail'}
|
||||
{/* Inline 3D Viewer */}
|
||||
<InlineCadViewer
|
||||
cadFileId={product.cad_file_id}
|
||||
thumbnailUrl={product.render_image_url || product.thumbnail_url}
|
||||
/>
|
||||
|
||||
{/* Action buttons */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{isPrivileged && (
|
||||
<>
|
||||
<div {...getRootProps()} className="cursor-pointer">
|
||||
<input {...getInputProps()} />
|
||||
<button className="btn-secondary text-xs" disabled={cadUploadMut.isPending}>
|
||||
<Upload size={12} />
|
||||
{cadUploadMut.isPending ? 'Uploading…' : 'Re-upload STEP'}
|
||||
</button>
|
||||
<button
|
||||
className="btn-secondary text-xs"
|
||||
onClick={() => reprocessMut.mutate()}
|
||||
disabled={reprocessMut.isPending}
|
||||
title="Re-run full STEP processing: re-parse part names, regenerate thumbnail and glTF. Use this after re-uploading a STEP file."
|
||||
>
|
||||
<RotateCcw size={12} />
|
||||
{reprocessMut.isPending ? 'Queuing…' : 'Re-process STEP'}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{product.cad_file_id && (
|
||||
</div>
|
||||
<button
|
||||
className="btn-secondary text-xs"
|
||||
onClick={() => regenerateMut.mutate()}
|
||||
disabled={regenerateMut.isPending}
|
||||
title="Re-render the thumbnail using the current part materials and the active thumbnail renderer — keeps the existing STEP parse data"
|
||||
>
|
||||
<RotateCcw size={12} />
|
||||
{regenerateMut.isPending ? 'Queuing…' : 'Regenerate thumbnail'}
|
||||
</button>
|
||||
<button
|
||||
className="btn-secondary text-xs"
|
||||
onClick={() => reprocessMut.mutate()}
|
||||
disabled={reprocessMut.isPending}
|
||||
title="Re-run full STEP processing: re-parse part names, regenerate thumbnail and glTF. Use this after re-uploading a STEP file."
|
||||
>
|
||||
<RotateCcw size={12} />
|
||||
{reprocessMut.isPending ? 'Queuing…' : 'Re-process STEP'}
|
||||
</button>
|
||||
<button
|
||||
className="btn-secondary text-xs"
|
||||
onClick={() => navigate(`/cad/${product.cad_file_id}`)}
|
||||
title="Open interactive 3D viewer"
|
||||
title="Open interactive 3D viewer in full screen"
|
||||
>
|
||||
<Cuboid size={12} />
|
||||
View 3D
|
||||
View Full Screen
|
||||
</button>
|
||||
)}
|
||||
{product.cad_file_id && isPrivileged && (
|
||||
<button
|
||||
className="btn-secondary text-xs"
|
||||
onClick={() =>
|
||||
@@ -576,10 +581,19 @@ export default function ProductDetailPage() {
|
||||
<Download size={12} />
|
||||
Generate GLB
|
||||
</button>
|
||||
)}
|
||||
{product.cad_file_id && isPrivileged && (
|
||||
<div className="flex flex-col gap-1 pt-1 border-t border-border-light">
|
||||
<p className="text-xs text-content-muted font-medium">STL</p>
|
||||
{product?.processing_status === 'completed' && (
|
||||
<button
|
||||
onClick={() => exportGltfColoredMut.mutate()}
|
||||
disabled={exportGltfColoredMut.isPending}
|
||||
className="btn-secondary flex items-center gap-2 disabled:opacity-40 text-xs"
|
||||
title="Download GLB with PBR colors from material assignments"
|
||||
>
|
||||
<Download size={12} />
|
||||
{exportGltfColoredMut.isPending ? 'Exporting…' : 'GLB + Colors'}
|
||||
</button>
|
||||
)}
|
||||
<div className="flex items-center gap-1 pl-1 border-l border-border-light">
|
||||
<p className="text-xs text-content-muted font-medium">STL:</p>
|
||||
{(['low', 'high'] as const).map((q) =>
|
||||
product.stl_cached.includes(q) ? (
|
||||
<button
|
||||
@@ -588,7 +602,7 @@ export default function ProductDetailPage() {
|
||||
onClick={() => downloadStl(product.cad_file_id!, q, product.name_cad_modell || product.name || undefined)}
|
||||
title={q === 'low' ? 'Coarse mesh, tolerance 0.3 mm' : 'Fine mesh, tolerance 0.01 mm'}
|
||||
>
|
||||
<Download size={12} /> {q === 'low' ? 'Low' : 'High'} quality
|
||||
<Download size={12} /> {q === 'low' ? 'Low' : 'High'}
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
@@ -597,18 +611,32 @@ export default function ProductDetailPage() {
|
||||
onClick={() => generateStl(product.cad_file_id!, q).then(() => toast.info(`STL generation queued (${q} quality)`)).catch(() => toast.error('Failed to queue STL generation'))}
|
||||
title={`${q === 'low' ? 'Low' : 'High'}-quality STL not cached — click to generate`}
|
||||
>
|
||||
<RefreshCw size={12} /> Generate {q === 'low' ? 'Low' : 'High'} quality
|
||||
<RefreshCw size={12} /> Gen {q === 'low' ? 'Low' : 'High'}
|
||||
</button>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{!isPrivileged && product.cad_file_id && (
|
||||
<button
|
||||
className="btn-secondary text-xs"
|
||||
onClick={() => navigate(`/cad/${product.cad_file_id}`)}
|
||||
title="Open interactive 3D viewer in full screen"
|
||||
>
|
||||
<Cuboid size={12} />
|
||||
View Full Screen
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Mesh attributes */}
|
||||
{product.cad_file?.mesh_attributes && Object.keys(product.cad_file.mesh_attributes).length > 0 && (() => {
|
||||
const mesh_attrs = product.cad_file!.mesh_attributes!
|
||||
{(() => {
|
||||
// Prefer cad_mesh_attributes (reliably populated by API) over cad_file.mesh_attributes
|
||||
const mesh_attrs: Record<string, unknown> = (product.cad_mesh_attributes ?? product.cad_file?.mesh_attributes) as Record<string, unknown> ?? {}
|
||||
if (Object.keys(mesh_attrs).length === 0) return null
|
||||
const dims = mesh_attrs.dimensions_mm as { x: number; y: number; z: number } | undefined
|
||||
const bbox = mesh_attrs.bbox as { x?: number; y?: number; z?: number } | undefined
|
||||
return (
|
||||
<div className="mt-3 p-3 rounded-md border border-border-default bg-surface-alt">
|
||||
<p className="text-xs font-semibold text-content-muted mb-2 flex items-center gap-1">
|
||||
@@ -616,28 +644,32 @@ export default function ProductDetailPage() {
|
||||
Geometry
|
||||
</p>
|
||||
<div className="grid grid-cols-2 gap-x-4 gap-y-1 text-xs">
|
||||
{mesh_attrs.volume_mm3 != null && (
|
||||
{dims != null && (
|
||||
<>
|
||||
<span className="text-content-muted">Dimensions</span>
|
||||
<span>{dims.x.toFixed(1)} × {dims.y.toFixed(1)} × {dims.z.toFixed(1)} mm</span>
|
||||
</>
|
||||
)}
|
||||
{dims == null && bbox != null && (
|
||||
<>
|
||||
<span className="text-content-muted">BBox</span>
|
||||
<span>
|
||||
{bbox.x?.toFixed(1)} × {bbox.y?.toFixed(1)} × {bbox.z?.toFixed(1)} mm
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
{(mesh_attrs.volume_mm3 as number | undefined) != null && (
|
||||
<>
|
||||
<span className="text-content-muted">Volume</span>
|
||||
<span>{((mesh_attrs.volume_mm3 as number) / 1000).toFixed(2)} cm³</span>
|
||||
</>
|
||||
)}
|
||||
{mesh_attrs.surface_area_mm2 != null && (
|
||||
{(mesh_attrs.surface_area_mm2 as number | undefined) != null && (
|
||||
<>
|
||||
<span className="text-content-muted">Surface</span>
|
||||
<span>{((mesh_attrs.surface_area_mm2 as number) / 100).toFixed(1)} cm²</span>
|
||||
</>
|
||||
)}
|
||||
{mesh_attrs.bbox != null && (
|
||||
<>
|
||||
<span className="text-content-muted">BBox</span>
|
||||
<span>
|
||||
{(mesh_attrs.bbox as { x?: number; y?: number; z?: number }).x?.toFixed(1)} ×{' '}
|
||||
{(mesh_attrs.bbox as { x?: number; y?: number; z?: number }).y?.toFixed(1)} ×{' '}
|
||||
{(mesh_attrs.bbox as { x?: number; y?: number; z?: number }).z?.toFixed(1)} mm
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
{mesh_attrs.suggested_smooth_angle !== undefined && (
|
||||
<>
|
||||
<span className="text-content-muted">Sharp angle</span>
|
||||
|
||||
Reference in New Issue
Block a user