math-pixel/upload-gltf
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: tighten upload and viewer contracts

Browse Source
This commit is contained in:
Tom Boullay
2026-05-13 17:50:26 +02:00
parent 30ff9826dc
commit f6ac71dad2
11 changed files with 108 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/ModelViewer.tsx
+34 -36
View File
@@ -2,7 +2,7 @@
import { Component, useEffect, useState } from 'react'
import type { ComponentType, ReactNode } from 'react'
import type { ModelHierarchyNode, ModelStats } from './SceneViewer'
import type { ModelHierarchyNode, ModelStats, SceneViewerProps } from '@/lib/client-types'
interface ModelViewerProps {
url: string
@@ -11,6 +11,21 @@ interface ModelViewerProps {
size: string
}
const VIEWER_FRAME_CLASS = 'w-full h-[450px] bg-black-800 border border-white/20 rounded-xl overflow-hidden'
const CENTERED_VIEWER_FRAME_CLASS = `${VIEWER_FRAME_CLASS} flex items-center justify-center`
const MODEL_STAT_ROWS = [
{ label: 'Draw calls', getValue: (stats: ModelStats) => stats.drawCalls },
{ label: 'Children', getValue: (stats: ModelStats) => stats.childObjects },
{ label: 'Meshes', getValue: (stats: ModelStats) => stats.meshes },
{ label: 'Triangles', getValue: (stats: ModelStats) => stats.triangles.toLocaleString('fr-FR') },
{ label: 'Materials', getValue: (stats: ModelStats) => stats.materials },
{ label: 'Textures', getValue: (stats: ModelStats) => stats.textures },
] satisfies Array<{
label: string
getValue: (stats: ModelStats) => number | string
}>
function getPreviewErrorMessage(error: unknown) {
return error instanceof Error ? error.message : 'Erreur preview inconnue'
}
@@ -117,6 +132,19 @@ function HierarchyPanel({
)
}
function ModelStatsPanel({ stats }: { stats: ModelStats }) {
return (
<div className="flex flex-col gap-1.5 rounded-lg border border-white/10 bg-black-900/75 p-2 text-xs text-gray-300 backdrop-blur">
{MODEL_STAT_ROWS.map(({ label, getValue }) => (
<span key={label} className="flex justify-between gap-3">
<span className="text-gray-500">{label}</span>
<span className="font-mono text-gray-200">{getValue(stats)}</span>
</span>
))}
</div>
)
}
class PreviewErrorBoundary extends Component<
{ children: ReactNode },
{ message: string | null }
@@ -146,12 +174,7 @@ export default function ModelViewer({ url, assetUrls, filename, size }: ModelVie
const [hierarchy, setHierarchy] = useState<ModelHierarchyNode | null>(null)
const [hierarchyOpen, setHierarchyOpen] = useState(false)
const [sceneError, setSceneError] = useState<string | null>(null)
const [Scene, setScene] = useState<ComponentType<{
url: string
assetUrls: Record<string, string>
onStatsReady: (stats: ModelStats) => void
onHierarchyReady: (hierarchy: ModelHierarchyNode) => void
}> | null>(null)
const [Scene, setScene] = useState<ComponentType<SceneViewerProps> | null>(null)
useEffect(() => {
if (!canPreview) return
@@ -175,7 +198,7 @@ export default function ModelViewer({ url, assetUrls, filename, size }: ModelVie
if (!canPreview) {
return (
<div className="w-full h-[450px] bg-black-800 border border-white/20 rounded-xl overflow-hidden flex items-center justify-center">
<div className={CENTERED_VIEWER_FRAME_CLASS}>
<p className="text-sm text-gray-400 px-6 text-center">
La preview 3D locale n&apos;est pas disponible pour les dossiers <span className="font-mono">model.gltf</span> avec fichiers associes.
</p>
@@ -185,14 +208,14 @@ export default function ModelViewer({ url, assetUrls, filename, size }: ModelVie
if (!Scene) {
return (
<div className="w-full h-[450px] bg-black-800 border border-white/20 rounded-xl overflow-hidden flex items-center justify-center">
<div className={CENTERED_VIEWER_FRAME_CLASS}>
<div className="w-6 h-6 border-2 border-gray-500 border-t-gray-300 rounded-full animate-spin" />
</div>
)
}
return (
<div className="w-full h-[450px] bg-black-800 border border-white/20 rounded-xl overflow-hidden relative">
<div className={`${VIEWER_FRAME_CLASS} relative`}>
<div className="absolute top-3 left-3 z-10 flex items-center gap-2">
<span className="text-xs text-gray-400 font-mono bg-black-900/60 px-2 py-1 rounded">
{filename}
@@ -203,32 +226,7 @@ export default function ModelViewer({ url, assetUrls, filename, size }: ModelVie
</div>
{stats && (
<div className="absolute top-3 right-3 z-20 flex w-44 flex-col gap-2">
<div className="flex flex-col gap-1.5 rounded-lg border border-white/10 bg-black-900/75 p-2 text-xs text-gray-300 backdrop-blur">
<span className="flex justify-between gap-3">
<span className="text-gray-500">Draw calls</span>
<span className="font-mono text-gray-200">{stats.drawCalls}</span>
</span>
<span className="flex justify-between gap-3">
<span className="text-gray-500">Children</span>
<span className="font-mono text-gray-200">{stats.childObjects}</span>
</span>
<span className="flex justify-between gap-3">
<span className="text-gray-500">Meshes</span>
<span className="font-mono text-gray-200">{stats.meshes}</span>
</span>
<span className="flex justify-between gap-3">
<span className="text-gray-500">Triangles</span>
<span className="font-mono text-gray-200">{stats.triangles.toLocaleString('fr-FR')}</span>
</span>
<span className="flex justify-between gap-3">
<span className="text-gray-500">Materials</span>
<span className="font-mono text-gray-200">{stats.materials}</span>
</span>
<span className="flex justify-between gap-3">
<span className="text-gray-500">Textures</span>
<span className="font-mono text-gray-200">{stats.textures}</span>
</span>
</div>
<ModelStatsPanel stats={stats} />
<button
type="button"
disabled={!hierarchy}
components/SceneViewer.tsx
+4 -32
View File
@@ -8,25 +8,7 @@ import { CanvasTexture, Mesh, TextureLoader } from 'three'
import type { Material, Object3D, Texture } from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { normalizeTextureFilename } from '@/lib/asset-naming'
export interface ModelStats {
childObjects: number
drawCalls: number
materials: number
meshes: number
textures: number
triangles: number
}
export interface ModelHierarchyNode {
children: ModelHierarchyNode[]
id: string
name: string
position: [number, number, number]
rotation: [number, number, number]
type: string
visible: boolean
}
import type { ModelHierarchyNode, ModelStats, SceneViewerProps } from '@/lib/client-types'
interface OpacityMapEntry {
target: string
@@ -113,7 +95,7 @@ function createAlphaMapTexture(texture: Texture) {
const cachedTexture = alphaMapTextureCache.get(texture)
if (cachedTexture) return cachedTexture
const image = texture.image
const image: unknown = texture.image
if (!isAlphaImageSource(image)) {
texture.flipY = false
@@ -269,12 +251,7 @@ function Model({
assetUrls,
onStatsReady,
onHierarchyReady,
}: {
url: string
assetUrls: Record<string, string>
onStatsReady: (stats: ModelStats) => void
onHierarchyReady: (hierarchy: ModelHierarchyNode) => void
}) {
}: SceneViewerProps) {
const { scene } = useLoader(GLTFLoader, url, (loader) => {
loader.manager.setURLModifier((requestedUrl) => resolveAssetUrl(requestedUrl, assetUrls))
})
@@ -308,12 +285,7 @@ export default function SceneViewer({
assetUrls,
onStatsReady,
onHierarchyReady,
}: {
url: string
assetUrls: Record<string, string>
onStatsReady: (stats: ModelStats) => void
onHierarchyReady: (hierarchy: ModelHierarchyNode) => void
}) {
}: SceneViewerProps) {
return (
<Canvas dpr={[1, 2]} camera={{ fov: 50 }}>
<Suspense fallback={null}>
components/UploadZone.tsx
-1
View File
@@ -41,7 +41,6 @@ export default function UploadZone() {
globalError,
setGlobalError,
overwriteConfirm,
setOverwriteConfirm,
noChangesFolder,
setNoChangesFolder,
driveError,
hooks/useUploadOrchestrator.ts
-1
View File
@@ -365,7 +365,6 @@ export function useUploadOrchestrator({
globalError,
setGlobalError,
overwriteConfirm,
setOverwriteConfirm,
noChangesFolder,
setNoChangesFolder,
driveError,
lib/client-types.ts
+27 -1
View File
@@ -1,4 +1,4 @@
export type FileStatus = 'pending' | 'uploading' | 'success' | 'error'
type FileStatus = 'pending' | 'uploading' | 'success' | 'error'
export interface TextureFile {
name: string
@@ -23,3 +23,29 @@ export interface FolderEntry {
driveStatus?: DriveStatus
driveError?: string
}
export interface ModelStats {
childObjects: number
drawCalls: number
materials: number
meshes: number
textures: number
triangles: number
}
export interface ModelHierarchyNode {
children: ModelHierarchyNode[]
id: string
name: string
position: [number, number, number]
rotation: [number, number, number]
type: string
visible: boolean
}
export interface SceneViewerProps {
url: string
assetUrls: Record<string, string>
onStatsReady: (stats: ModelStats) => void
onHierarchyReady: (hierarchy: ModelHierarchyNode) => void
}
lib/github.ts
+3 -2
View File
@@ -202,7 +202,8 @@ async function uploadToLfsBatch(
throw new Error(`LFS batch request failed (${batchRes.status}): ${text}`)
}
const batchObjects = parseLfsBatchResponse(await batchRes.json())
const batchData: unknown = await batchRes.json()
const batchObjects = parseLfsBatchResponse(batchData)
const objectMap = new Map(objects.map((o) => [o.oid, o]))
@@ -277,7 +278,7 @@ export async function getRemoteFolder(
})
if (!Array.isArray(data)) {
return { exists: false, files: [] }
throw new Error(`Le chemin distant ${folderPath} existe mais ce n'est pas un dossier`)
}
const files: RemoteFile[] = await Promise.all(
lib/prepare-git-assets.ts
+6 -1
View File
@@ -223,7 +223,12 @@ async function prepareDracoGlb(
}
}
} finally {
await rm(tmpFolder, { recursive: true, force: true }).catch(() => {})
await rm(tmpFolder, { recursive: true, force: true }).catch((err) => {
console.warn('[WARN] Blender temp cleanup failed', {
folderName,
error: getErrorMessage(err),
})
})
}
}
lib/types.ts
+1 -1
View File
@@ -15,7 +15,7 @@ export type DriveAction = 'new' | 'replace'
export type FileChange = 'new' | 'changed' | 'unchanged'
export type FileDiffStatus = 'changed' | 'new' | 'deleted'
type FileDiffStatus = 'changed' | 'new' | 'deleted'
export type AssetCategory = 'color' | 'diffuse' | 'roughness' | 'normal' | 'metalness' | 'height' | 'opacity' | 'orm' | 'ao' | 'assets'
lib/upload-api.ts
+19 -3
View File
@@ -83,6 +83,24 @@ function isFileDiff(value: unknown): value is FileDiff {
&& (value.status === 'new' || value.status === 'changed' || value.status === 'deleted')
}
function parseFileDiffs(value: unknown): FileDiff[] {
if (!Array.isArray(value)) {
throw new Error('Reponse serveur invalide')
}
const diffs: FileDiff[] = []
for (const diff of value) {
if (!isFileDiff(diff)) {
throw new Error('Reponse serveur invalide')
}
diffs.push(diff)
}
return diffs
}
function buildUploadFormData(folder: FolderEntry, gitModelMode: GitModelMode): FormData {
const formData = new FormData()
formData.append('folderName', folder.folderName)
@@ -126,11 +144,9 @@ export async function checkFolderDiffs(
}
}
const diffs = Array.isArray(data.diffs) ? data.diffs.filter(isFileDiff) : []
return {
exists: true,
diffs,
diffs: parseFileDiffs(data.diffs),
warning,
}
}
lib/upload-request.ts
+2 -2
View File
@@ -25,7 +25,7 @@ export function uploadLockConflictResponse() {
return uploadErrorMessageResponse(UPLOAD_LOCK_ERROR, 409)
}
export function parseStagingRequestBody(value: unknown): StagingRequestBody {
function parseStagingRequestBody(value: unknown): StagingRequestBody {
if (!isRecord(value) || typeof value.stagingId !== 'string' || value.stagingId.trim() === '') {
throw new Error('stagingId manquant')
}
@@ -38,7 +38,7 @@ export async function readStagingRequestBody(req: Request): Promise<StagingReque
return parseStagingRequestBody(body)
}
export function parseDriveRequestBody(value: unknown): DriveRequestBody {
function parseDriveRequestBody(value: unknown): DriveRequestBody {
const { stagingId } = parseStagingRequestBody(value)
if (!isRecord(value) || (value.action !== 'new' && value.action !== 'replace')) {
lib/upload-staging.ts
+12 -6
View File
@@ -3,7 +3,7 @@ import { dirname, join } from 'path'
import { mkdir, readdir, readFile, rm, writeFile } from 'fs/promises'
import { existsSync } from 'fs'
import { TMP_DIR } from '@/lib/constants'
import { isRecord } from '@/lib/guards'
import { getErrorMessage, isRecord } from '@/lib/guards'
import { getModelAssetPath } from '@/lib/model-paths'
import { prepareGitAssets } from '@/lib/prepare-git-assets'
import type {
@@ -28,7 +28,7 @@ interface StagedOriginalFile {
interface StagedPreparedData {
modelFilename: string
compressed: boolean
deliveryMode?: GitModelMode
deliveryMode: GitModelMode
compressionError?: string
assetSummaries: PreparedAssetSummary[]
}
@@ -94,7 +94,7 @@ function isStagedPreparedData(value: unknown): value is StagedPreparedData {
return isRecord(value)
&& typeof value.modelFilename === 'string'
&& typeof value.compressed === 'boolean'
&& (value.deliveryMode === undefined || isGitModelMode(value.deliveryMode))
&& isGitModelMode(value.deliveryMode)
&& (value.compressionError === undefined || typeof value.compressionError === 'string')
&& Array.isArray(value.assetSummaries)
&& value.assetSummaries.every(isPreparedAssetSummary)
@@ -146,8 +146,14 @@ async function cleanupExpiredStagingUploads() {
if (now - manifest.createdAt > STAGING_TTL_MS) {
await cleanupStagingUpload(stagingId)
}
} catch {
await cleanupStagingUpload(stagingId).catch(() => {})
} catch (err) {
await cleanupStagingUpload(stagingId).catch((cleanupErr) => {
console.warn('[WARN] Staging cleanup failed', {
stagingId,
error: getErrorMessage(cleanupErr),
originalError: getErrorMessage(err),
})
})
}
}
}
@@ -259,7 +265,7 @@ export async function ensurePreparedStagingAssets(stagingId: string): Promise<Pr
modelFilename: manifest.prepared.modelFilename,
assetSummaries: manifest.prepared.assetSummaries,
compressed: manifest.prepared.compressed,
deliveryMode: manifest.prepared.deliveryMode ?? manifest.gitModelMode,
deliveryMode: manifest.prepared.deliveryMode,
compressionError: manifest.prepared.compressionError,
}
}