Genarrative/apps/ai-game-creator-shell/src/view/project-development/ResourceModelPreview.tsx

import { useEffect, useRef, useState } from 'react';

import { renderResourceModelThumbnail } from './resourceModelThumbnail';

type ResourceModelPreviewProps = {
  /** 预览管线给出的模型字节 URL（blob URL）。 */
  sourceUrl: string;
  /** 原生侧判定的媒体类型（`model/gltf-binary` / `model/gltf+json` / FBX 的 octet-stream）。 */
  mediaType: string;
  /** 缩略图缓存身份（见 `resourceModelThumbnailIdentity`）：blob URL 会变，身份不会。 */
  identity: string;
  /** 渲染不出来时画在同一个位置上的类型卡文案（例如「模型 · GLB」）。 */
  fallbackLabel: string;
};

/**
 * 缩略图超采样倍数。
 *
 * 资源画布用 `transform: scale(--resource-section-zoom)` 放大栏目视图（真机 1.5 倍），而
 * `ResizeObserver` 与 `offsetWidth` 都只看**布局盒**：按布局尺寸 1:1 渲染出来的图，被画布
 * 放大后就是糊的。按 2 倍超采样既有余量覆盖画布缩放，也不至于让单张缩略图失控。
 */
const RESOURCE_MODEL_THUMBNAIL_SUPERSAMPLE = 2;
const RESOURCE_MODEL_THUMBNAIL_MAX_EDGE = 1024;

/**
 * 资源卡上的引擎模型缩略图。
 *
 * 这一层只关心「把渲染结果画出来」，渲染本身在 `resourceModelThumbnail` 的单例队列里
 * （整页只有一个 WebGL 上下文）。渲染失败**不算预览失败**：卡面就地降级成类型卡，
 * 预览管线里已经读到的字节与状态保持不变，排障信息通过
 * `data-model-preview-status` 暴露在 DOM 上。
 */
export function ResourceModelPreview({
  sourceUrl,
  mediaType,
  identity,
  fallbackLabel,
}: ResourceModelPreviewProps) {
  const hostRef = useRef<HTMLSpanElement>(null);
  const [thumbnail, setThumbnail] = useState<string | null>(null);
  const [status, setStatus] = useState<'loading' | 'ready' | 'failed'>(
    'loading',
  );
  /**
   * 渲染尺寸按**宿主真实几何**（含画布缩放后的视觉尺寸）取，并且跟着宿主的尺寸变化重渲。
   *
   * 卡片在总览小图与栏目大图里是同一个组件：只在挂载时量一次，会拿到当时那个更小的盒子，
   * 之后卡片放大也不会重画 —— 表现为缩略图被放大到发虚、比例与卡面不一致。
   */
  const [renderSize, setRenderSize] = useState<{
    width: number;
    height: number;
  } | null>(null);

  useEffect(() => {
    const host = hostRef.current;
    if (!host) {
      return undefined;
    }
    const measure = () => {
      /*
       * 取**布局尺寸**（`offsetWidth` 不受祖先 transform 影响）而不是 `getBoundingClientRect`：
       * 画布缩放是 transform，像素值会随缩放变化；布局尺寸才是稳定的口径，再乘超采样倍数。
       */
      const width = Math.min(
        RESOURCE_MODEL_THUMBNAIL_MAX_EDGE,
        Math.max(
          192,
          Math.round(
            (host.offsetWidth || 320) * RESOURCE_MODEL_THUMBNAIL_SUPERSAMPLE,
          ),
        ),
      );
      const height = Math.min(
        RESOURCE_MODEL_THUMBNAIL_MAX_EDGE,
        Math.max(
          144,
          Math.round(
            (host.offsetHeight || 240) * RESOURCE_MODEL_THUMBNAIL_SUPERSAMPLE,
          ),
        ),
      );
      setRenderSize((current) =>
        current && current.width === width && current.height === height
          ? current
          : { width, height },
      );
    };
    measure();
    // 测试用的 jsdom 没有 ResizeObserver：没有它就退化成"只在挂载时量一次"。
    if (typeof ResizeObserver === 'undefined') {
      return undefined;
    }
    const observer = new ResizeObserver(measure);
    observer.observe(host);
    return () => observer.disconnect();
  }, []);

  useEffect(() => {
    if (!renderSize) {
      return undefined;
    }
    let disposed = false;
    setThumbnail(null);
    setStatus('loading');
    const request = {
      sourceUrl,
      mediaType,
      identity,
      width: renderSize.width,
      height: renderSize.height,
    };
    void renderResourceModelThumbnail(request)
      .then((dataUrl) => {
        if (disposed) {
          return;
        }
        setThumbnail(dataUrl);
        setStatus('ready');
      })
      .catch(() => {
        if (!disposed) {
          setStatus('failed');
        }
      });
    return () => {
      disposed = true;
    };
  }, [identity, mediaType, renderSize, sourceUrl]);

  return (
    <span
      ref={hostRef}
      className="game-resource-card-model-visual"
      data-model-preview-status={status}
      // 渲染尺寸暴露到 DOM：缩略图糊 / 比例不对时，先看它和卡片实际几何是否一致。
      data-model-render-size={
        renderSize ? `${renderSize.width}x${renderSize.height}` : undefined
      }
    >
      {thumbnail ? (
        <img src={thumbnail} alt="" decoding="async" />
      ) : (
        <span className="game-resource-card-engine-badge">{fallbackLabel}</span>
      )}
    </span>
  );
}