@vgai/editor 0.2.0

package/src/components/AssetBrowser.tsx

@@ -0,0 +1,502 @@
+import {
+  faArrowsRotate,
+  faCubes,
+  faFile,
+  faFileCode,
+  faFileImage,
+  faFolder,
+  faMusic,
+  faPaintbrush,
+  faPuzzlePiece,
+  faImage as faSceneIcon,
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useEditorStore } from '../EditorContext';
+import { type AssetEntry, listAssets } from '../editor-api';
+import { setActiveScope } from '../hotkeys';
+import { getModelThumbnailRenderer } from '../model-thumbnail';
+import { FolderTree } from './FolderTree';
+import { Panel } from './primitives/Panel';
+import { Tooltip } from './primitives/Tooltip';
+
+// --- Helpers ---
+
+function getExtension(name: string): string {
+  // Handle compound extensions like .vscn.json
+  if (name.endsWith('.vscn.json')) return '.vscn.json';
+  if (name.endsWith('.prefab.json')) return '.prefab.json';
+  if (name.endsWith('.mat.json')) return '.mat.json';
+  if (name.endsWith('.inputmap.json')) return '.inputmap.json';
+  const dot = name.lastIndexOf('.');
+  return dot >= 0 ? name.slice(dot) : '';
+}
+
+type AssetKind =
+  | 'model'
+  | 'image'
+  | 'scene'
+  | 'prefab'
+  | 'material'
+  | 'audio'
+  | 'json'
+  | 'folder'
+  | 'unknown';
+
+function getAssetKind(entry: AssetEntry): AssetKind {
+  if (entry.type === 'directory') return 'folder';
+  const ext = getExtension(entry.name);
+  if (['.glb', '.gltf'].includes(ext)) return 'model';
+  if (['.png', '.jpg', '.jpeg', '.webp', '.svg', '.gif'].includes(ext)) return 'image';
+  if (ext === '.vscn.json') return 'scene';
+  if (ext === '.prefab.json') return 'prefab';
+  if (ext === '.mat.json') return 'material';
+  if (['.mp3', '.ogg', '.wav', '.flac'].includes(ext)) return 'audio';
+  if (ext === '.json' || ext === '.inputmap.json') return 'json';
+  return 'unknown';
+}
+
+const assetIconColors: Record<AssetKind, string> = {
+  folder: '#e8a740',
+  model: '#6bc5f7',
+  scene: '#8b5cf6',
+  prefab: '#3b82f6',
+  material: '#e879f9',
+  audio: '#34d399',
+  image: '#f472b6',
+  json: '#fbbf24',
+  unknown: '#6b7280',
+};
+
+const assetIconMap: Record<AssetKind, typeof faFolder> = {
+  folder: faFolder,
+  model: faCubes,
+  scene: faSceneIcon,
+  prefab: faPuzzlePiece,
+  material: faPaintbrush,
+  audio: faMusic,
+  image: faFileImage,
+  json: faFileCode,
+  unknown: faFile,
+};
+
+function AssetIcon({ kind }: { kind: AssetKind }) {
+  return (
+    <FontAwesomeIcon
+      icon={assetIconMap[kind]}
+      style={{ fontSize: 24, color: assetIconColors[kind] }}
+    />
+  );
+}
+
+/** Renders an offscreen 3D preview thumbnail for .glb/.gltf model assets. */
+function ModelThumbnail({ url }: { url: string }) {
+  const [src, setSrc] = useState<string | null>(null);
+  const [failed, setFailed] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    getModelThumbnailRenderer()
+      .render(url)
+      .then((dataUrl) => {
+        if (!cancelled) setSrc(dataUrl);
+      })
+      .catch(() => {
+        if (!cancelled) setFailed(true);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [url]);
+
+  if (failed) return <AssetIcon kind="model" />;
+  if (!src) {
+    // Loading spinner
+    return (
+      <div
+        style={{
+          width: 28,
+          height: 28,
+          margin: '0 auto',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <div
+          style={{
+            width: 16,
+            height: 16,
+            border: '2px solid #444',
+            borderTopColor: '#6bc5f7',
+            borderRadius: '50%',
+            animation: 'editor-spin 0.8s linear infinite',
+          }}
+        />
+      </div>
+    );
+  }
+  return (
+    <img
+      src={src}
+      alt="model preview"
+      style={{ maxWidth: 48, maxHeight: 48, objectFit: 'contain', borderRadius: 2 }}
+    />
+  );
+}
+
+/** Build the serving URL for an asset (all assets are under public/). */
+function assetServingUrl(_root: string, path: string, name: string): string {
+  return path ? `/${path}/${name}` : `/${name}`;
+}
+
+/** Build the src path as it would appear in scene files. */
+function assetScenePath(_root: string, path: string, name: string): string {
+  return path ? `/${path}/${name}` : `/${name}`;
+}
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+// --- Main Component ---
+
+interface AssetBrowserProps {
+  onOpenScene?: (assetPath: string) => void;
+}
+
+export function AssetBrowser({ onOpenScene }: AssetBrowserProps) {
+  const store = useEditorStore();
+  const [currentRoot, setCurrentRoot] = useState('public');
+  const [currentPath, setCurrentPath] = useState('');
+  const [entries, setEntries] = useState<AssetEntry[]>([]);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedFile, setSelectedFile] = useState<string | null>(null);
+  const cacheRef = useRef(new Map<string, AssetEntry[]>());
+
+  const fetchEntries = useCallback(async (root: string, dir: string) => {
+    const key = `${root}:${dir}`;
+    const cached = cacheRef.current.get(key);
+    if (cached) {
+      setEntries(cached);
+      return;
+    }
+    try {
+      const entries = await listAssets(root, dir);
+      cacheRef.current.set(key, entries);
+      setEntries(entries);
+    } catch {
+      setEntries([]);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchEntries(currentRoot, currentPath);
+  }, [currentRoot, currentPath, fetchEntries]);
+
+  const navigate = useCallback((root: string, path: string) => {
+    setCurrentRoot(root);
+    setCurrentPath(path);
+    setSelectedFile(null);
+    setSearchQuery('');
+  }, []);
+
+  // --- Breadcrumb ---
+  const breadcrumbSegments = currentPath ? currentPath.split('/') : [];
+
+  // --- Filtered entries ---
+  const filtered = searchQuery
+    ? entries.filter((e) => e.name.toLowerCase().includes(searchQuery.toLowerCase()))
+    : entries;
+
+  // --- Drag start ---
+  const onDragStart = useCallback(
+    (e: React.DragEvent, entry: AssetEntry) => {
+      const kind = getAssetKind(entry);
+      if (kind === 'folder') return;
+      const path = assetScenePath(currentRoot, currentPath, entry.name);
+      const payload = { path, kind, name: entry.name };
+      // Set text/plain first — Chromium silently cancels drags that only
+      // carry custom MIME types (no ghost, no drag/dragend events).
+      e.dataTransfer.setData('text/plain', entry.name);
+      e.dataTransfer.setData('application/x-editor-asset', JSON.stringify(payload));
+    },
+    [currentRoot, currentPath],
+  );
+
+  // --- Double-click handler ---
+  const onDoubleClick = useCallback(
+    (entry: AssetEntry) => {
+      if (entry.type === 'directory') {
+        navigate(currentRoot, currentPath ? `${currentPath}/${entry.name}` : entry.name);
+        return;
+      }
+      const kind = getAssetKind(entry);
+      // Open scene and prefab files in the editor
+      if ((kind === 'scene' || kind === 'prefab') && onOpenScene) {
+        const url = assetServingUrl(currentRoot, currentPath, entry.name);
+        onOpenScene(url);
+        return;
+      }
+      // Open other viewable asset types in a tab
+      if (kind !== 'folder' && kind !== 'unknown') {
+        const url = assetServingUrl(currentRoot, currentPath, entry.name);
+        store.openAssetTab(url, kind);
+      }
+    },
+    [currentRoot, currentPath, navigate, onOpenScene, store],
+  );
+
+  // --- Refresh ---
+  const onRefresh = useCallback(() => {
+    cacheRef.current.clear();
+    fetchEntries(currentRoot, currentPath);
+  }, [currentRoot, currentPath, fetchEntries]);
+
+  // Auto-refresh when assets change (e.g. file move detected by server)
+  useEffect(() => {
+    const handler = () => onRefresh();
+    window.addEventListener('editor:assets-changed', handler);
+    return () => window.removeEventListener('editor:assets-changed', handler);
+  }, [onRefresh]);
+
+  const refreshAction = (
+    <Tooltip text="Refresh" position="top">
+      <button
+        type="button"
+        onClick={(e) => {
+          e.stopPropagation();
+          onRefresh();
+        }}
+        style={{
+          background: 'none',
+          border: 'none',
+          color: '#8c8c8c',
+          cursor: 'pointer',
+          fontSize: 12,
+          padding: '0 4px',
+        }}
+      >
+        <FontAwesomeIcon icon={faArrowsRotate} />
+      </button>
+    </Tooltip>
+  );
+
+  return (
+    <Panel
+      name="Assets"
+      actions={refreshAction}
+      onPointerDown={() => setActiveScope('asset-browser')}
+      style={{ flex: 1, minHeight: 0 }}
+    >
+      <div style={{ display: 'flex', flex: 1, minHeight: 0 }}>
+        {/* Folder tree */}
+        <div
+          style={{
+            width: 180,
+            borderRight: '1px solid #333',
+            overflowY: 'auto',
+            scrollbarWidth: 'none',
+            flexShrink: 0,
+          }}
+        >
+          <FolderTree currentPath={currentPath} currentRoot={currentRoot} onNavigate={navigate} />
+        </div>
+
+        {/* File area */}
+        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
+          {/* Top bar: breadcrumb + search */}
+          <div
+            style={{
+              padding: '4px 8px',
+              borderBottom: '1px solid #333',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 8,
+              flexShrink: 0,
+            }}
+          >
+            {/* Breadcrumb */}
+            <div
+              style={{
+                flex: 1,
+                display: 'flex',
+                alignItems: 'center',
+                gap: 2,
+                fontSize: 12,
+                minWidth: 0,
+              }}
+            >
+              {breadcrumbSegments.length === 0 ? (
+                <span style={{ color: '#8c8c8c' }}>/</span>
+              ) : (
+                breadcrumbSegments.map((seg, i) => {
+                  const path = breadcrumbSegments.slice(0, i + 1).join('/');
+                  const isLast = i === breadcrumbSegments.length - 1;
+                  return (
+                    <span key={path} style={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+                      {i === 0 && (
+                        <span
+                          onClick={() => navigate(currentRoot, '')}
+                          onKeyDown={(e) => {
+                            if (e.key === 'Enter') navigate(currentRoot, '');
+                          }}
+                          role="button"
+                          tabIndex={0}
+                          style={{ cursor: 'pointer', color: '#555' }}
+                        >
+                          /
+                        </span>
+                      )}
+                      {i > 0 && <span style={{ color: '#555' }}>/</span>}
+                      <span
+                        onClick={() => navigate(currentRoot, path)}
+                        onKeyDown={(e) => {
+                          if (e.key === 'Enter') navigate(currentRoot, path);
+                        }}
+                        role="button"
+                        tabIndex={0}
+                        style={{
+                          cursor: 'pointer',
+                          color: isLast ? '#c5c8ce' : '#8c8c8c',
+                        }}
+                      >
+                        {seg}
+                      </span>
+                    </span>
+                  );
+                })
+              )}
+            </div>
+
+            {/* Search */}
+            <input
+              type="text"
+              placeholder="Search..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              style={{
+                width: 140,
+                background: '#1e1e1e',
+                border: '1px solid #333',
+                borderRadius: 3,
+                color: '#c5c8ce',
+                fontSize: 11,
+                padding: '2px 6px',
+                outline: 'none',
+              }}
+            />
+          </div>
+
+          {/* Grid */}
+          <div
+            style={{
+              flex: 1,
+              overflowY: 'auto',
+              scrollbarWidth: 'none',
+              padding: 8,
+              display: 'grid',
+              gridTemplateColumns: 'repeat(auto-fill, 80px)',
+              gridAutoRows: 'min-content',
+              gap: 6,
+              alignContent: 'start',
+            }}
+          >
+            {filtered.map((entry) => {
+              const kind = getAssetKind(entry);
+              const isSelected = selectedFile === entry.name;
+              const isImage = kind === 'image';
+              const isModel = kind === 'model';
+              const imgUrl = isImage ? assetServingUrl(currentRoot, currentPath, entry.name) : null;
+              const modelUrl = isModel
+                ? assetServingUrl(currentRoot, currentPath, entry.name)
+                : null;
+
+              return (
+                <div
+                  key={entry.name}
+                  draggable={entry.type === 'file'}
+                  onDragStart={(e) => onDragStart(e, entry)}
+                  onClick={() => setSelectedFile(entry.name)}
+                  onDoubleClick={() => onDoubleClick(entry)}
+                  title={`${entry.name}${entry.type === 'file' ? `\n${formatSize(entry.size)}` : ''}`}
+                  style={{
+                    width: 80,
+                    padding: 4,
+                    borderRadius: 4,
+                    cursor: entry.type === 'directory' ? 'pointer' : 'grab',
+                    background: isSelected ? '#579EFF33' : 'transparent',
+                    border: isSelected ? '1px solid #579EFF' : '1px solid transparent',
+                    textAlign: 'center',
+                    userSelect: 'none',
+                  }}
+                  onMouseEnter={(e) => {
+                    if (!isSelected) (e.currentTarget as HTMLDivElement).style.background = '#333';
+                  }}
+                  onMouseLeave={(e) => {
+                    if (!isSelected)
+                      (e.currentTarget as HTMLDivElement).style.background = 'transparent';
+                  }}
+                >
+                  {/* Thumbnail or icon – pointer-events:none so mouse
+                       events hit the parent draggable div directly, which
+                       avoids Chrome failing to initiate drag from SVG children */}
+                  <div
+                    style={{
+                      width: 48,
+                      height: 48,
+                      margin: '0 auto 4px',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      overflow: 'hidden',
+                      borderRadius: 3,
+                      pointerEvents: 'none',
+                    }}
+                  >
+                    {imgUrl ? (
+                      <img
+                        src={imgUrl}
+                        alt={entry.name}
+                        style={{
+                          maxWidth: 48,
+                          maxHeight: 48,
+                          objectFit: 'contain',
+                          borderRadius: 2,
+                        }}
+                      />
+                    ) : modelUrl ? (
+                      <ModelThumbnail url={modelUrl} />
+                    ) : (
+                      <AssetIcon kind={kind} />
+                    )}
+                  </div>
+                  {/* Filename */}
+                  <div
+                    style={{
+                      fontSize: 10,
+                      lineHeight: '13px',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      whiteSpace: 'nowrap',
+                      color: '#c5c8ce',
+                    }}
+                  >
+                    {entry.name}
+                  </div>
+                </div>
+              );
+            })}
+            {filtered.length === 0 && (
+              <div style={{ gridColumn: '1 / -1', color: '#666', fontSize: 12, padding: 16 }}>
+                {searchQuery ? 'No matching files.' : 'Empty folder.'}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </Panel>
+  );
+}