refactor: 重构纹理图集工具，实现浏览器端实时处理
将合图处理从服务端迁移到浏览器端，使用 Web Worker 实现高性能打包算法，新增三栏布局界面和精灵动画预览功能 - 新增 atlasStore 状态管理，实现文件、配置、结果的统一管理 - 新增 atlas-packer 打包算法库（MaxRects/Shelf），支持浏览器端快速合图 - 新增 atlas-worker Web Worker，实现异步打包处理避免阻塞 UI - 新增三栏布局组件：FileListPanel、CanvasPreview、AtlasConfigPanel - 新增 AnimationPreviewDialog 支持精灵动画帧预览和帧率控制 - 优化所有工具页面的响应式布局和交互体验 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
506
src/components/tools/atlas/FileListPanel.tsx
Normal file
506
src/components/tools/atlas/FileListPanel.tsx
Normal file
@@ -0,0 +1,506 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useRef, useState } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import {
|
||||
Folder,
|
||||
FolderOpen,
|
||||
Image as ImageIcon,
|
||||
Trash2,
|
||||
Upload,
|
||||
X,
|
||||
ChevronDown,
|
||||
ChevronRight
|
||||
} from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useAtlasStore, type BrowserSprite } from "@/store/atlasStore";
|
||||
import { useSafeTranslation } from "@/lib/i18n";
|
||||
|
||||
/**
|
||||
* Generate unique ID
|
||||
*/
|
||||
function generateId(): string {
|
||||
return `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Natural sort comparator for filenames
|
||||
*/
|
||||
function naturalSort(a: string, b: string): number {
|
||||
return a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" });
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if file is an image
|
||||
*/
|
||||
function isImageFile(file: File): boolean {
|
||||
const imageTypes = ["image/png", "image/jpeg", "image/jpg", "image/webp", "image/gif", "image/bmp"];
|
||||
return imageTypes.includes(file.type) || /\.(png|jpe?g|webp|gif|bmp)$/i.test(file.name);
|
||||
}
|
||||
|
||||
/**
|
||||
* Load image file as BrowserSprite
|
||||
*/
|
||||
async function loadImageAsSprite(file: File): Promise<BrowserSprite> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onload = async () => {
|
||||
try {
|
||||
const blob = new Blob([reader.result as ArrayBuffer], { type: file.type });
|
||||
const imageBitmap = await createImageBitmap(blob);
|
||||
|
||||
resolve({
|
||||
id: generateId(),
|
||||
name: file.name,
|
||||
width: imageBitmap.width,
|
||||
height: imageBitmap.height,
|
||||
image: imageBitmap,
|
||||
file,
|
||||
});
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
}
|
||||
};
|
||||
|
||||
reader.onerror = () => reject(new Error("Failed to read file"));
|
||||
reader.readAsArrayBuffer(file);
|
||||
});
|
||||
}
|
||||
|
||||
export function FileListPanel() {
|
||||
const { t } = useSafeTranslation();
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const folderInputRef = useRef<HTMLInputElement>(null);
|
||||
const dropZoneRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isExpanded, setIsExpanded] = useState(true);
|
||||
|
||||
const {
|
||||
sprites,
|
||||
folderName,
|
||||
addSprites,
|
||||
removeSprite,
|
||||
clearSprites,
|
||||
setFolderName,
|
||||
selectedSpriteIds,
|
||||
selectSprite,
|
||||
setStatus,
|
||||
} = useAtlasStore();
|
||||
|
||||
/**
|
||||
* Process uploaded files
|
||||
*/
|
||||
const processFiles = useCallback(async (files: FileList | File[]) => {
|
||||
const fileArray = Array.from(files);
|
||||
const imageFiles = fileArray.filter(isImageFile);
|
||||
|
||||
if (imageFiles.length === 0) return;
|
||||
|
||||
setIsLoading(true);
|
||||
setStatus("loading");
|
||||
|
||||
try {
|
||||
// Sort by filename
|
||||
imageFiles.sort((a, b) => naturalSort(a.name, b.name));
|
||||
|
||||
// Extract folder name from first file's path
|
||||
const firstFile = imageFiles[0];
|
||||
if (firstFile.webkitRelativePath) {
|
||||
const pathParts = firstFile.webkitRelativePath.split("/");
|
||||
if (pathParts.length > 1) {
|
||||
setFolderName(pathParts[0]);
|
||||
}
|
||||
}
|
||||
|
||||
// Load all images
|
||||
const loadPromises = imageFiles.map((file) => loadImageAsSprite(file));
|
||||
const loadedSprites = await Promise.all(loadPromises);
|
||||
|
||||
addSprites(loadedSprites);
|
||||
setStatus("idle");
|
||||
} catch (error) {
|
||||
console.error("Failed to load images:", error);
|
||||
setStatus("error");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [addSprites, setFolderName, setStatus]);
|
||||
|
||||
/**
|
||||
* Handle drag events
|
||||
*/
|
||||
const handleDragEnter = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setIsDragging(true);
|
||||
}, []);
|
||||
|
||||
const handleDragLeave = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
// Check if we're leaving the drop zone
|
||||
if (dropZoneRef.current && !dropZoneRef.current.contains(e.relatedTarget as Node)) {
|
||||
setIsDragging(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleDragOver = useCallback((e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}, []);
|
||||
|
||||
const handleDrop = useCallback(async (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setIsDragging(false);
|
||||
|
||||
const items = e.dataTransfer.items;
|
||||
const dataTransferFiles = e.dataTransfer.files;
|
||||
const files: File[] = [];
|
||||
|
||||
// Read all entries from a directory (handles batched readEntries)
|
||||
const readAllEntries = async (reader: FileSystemDirectoryReader): Promise<FileSystemEntry[]> => {
|
||||
const allEntries: FileSystemEntry[] = [];
|
||||
|
||||
const readBatch = (): Promise<FileSystemEntry[]> => {
|
||||
return new Promise((resolve) => {
|
||||
reader.readEntries((entries) => resolve(entries));
|
||||
});
|
||||
};
|
||||
|
||||
// readEntries may return results in batches, keep reading until empty
|
||||
let batch = await readBatch();
|
||||
while (batch.length > 0) {
|
||||
allEntries.push(...batch);
|
||||
batch = await readBatch();
|
||||
}
|
||||
|
||||
return allEntries;
|
||||
};
|
||||
|
||||
// Handle folder drop
|
||||
const processEntry = async (entry: FileSystemEntry): Promise<void> => {
|
||||
if (entry.isFile) {
|
||||
const fileEntry = entry as FileSystemFileEntry;
|
||||
return new Promise((resolve) => {
|
||||
fileEntry.file((file) => {
|
||||
if (isImageFile(file)) {
|
||||
// Add webkitRelativePath-like info
|
||||
Object.defineProperty(file, "webkitRelativePath", {
|
||||
value: entry.fullPath.substring(1), // Remove leading slash
|
||||
writable: false,
|
||||
});
|
||||
files.push(file);
|
||||
}
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
} else if (entry.isDirectory) {
|
||||
const dirEntry = entry as FileSystemDirectoryEntry;
|
||||
const reader = dirEntry.createReader();
|
||||
const entries = await readAllEntries(reader);
|
||||
|
||||
for (const childEntry of entries) {
|
||||
await processEntry(childEntry);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Check if webkitGetAsEntry is supported
|
||||
let hasEntrySupport = false;
|
||||
if (items && items.length > 0 && typeof items[0].webkitGetAsEntry === "function") {
|
||||
hasEntrySupport = true;
|
||||
}
|
||||
|
||||
if (hasEntrySupport) {
|
||||
// Process using FileSystem API (supports folders)
|
||||
const entryPromises: Promise<void>[] = [];
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
const item = items[i];
|
||||
const entry = item.webkitGetAsEntry?.();
|
||||
|
||||
if (entry) {
|
||||
entryPromises.push(processEntry(entry));
|
||||
}
|
||||
}
|
||||
await Promise.all(entryPromises);
|
||||
} else {
|
||||
// Fallback: use dataTransfer.files directly (no folder support)
|
||||
for (let i = 0; i < dataTransferFiles.length; i++) {
|
||||
const file = dataTransferFiles[i];
|
||||
if (file && isImageFile(file)) {
|
||||
files.push(file);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (files.length > 0) {
|
||||
// Extract folder name from first file
|
||||
if (files[0].webkitRelativePath) {
|
||||
const pathParts = files[0].webkitRelativePath.split("/");
|
||||
if (pathParts.length > 1) {
|
||||
setFolderName(pathParts[0]);
|
||||
}
|
||||
}
|
||||
|
||||
await processFiles(files);
|
||||
}
|
||||
}, [processFiles, setFolderName]);
|
||||
|
||||
/**
|
||||
* Handle file input change
|
||||
*/
|
||||
const handleFileChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.target.files && e.target.files.length > 0) {
|
||||
processFiles(e.target.files);
|
||||
}
|
||||
// Reset input
|
||||
e.target.value = "";
|
||||
}, [processFiles]);
|
||||
|
||||
/**
|
||||
* Handle sprite click
|
||||
*/
|
||||
const handleSpriteClick = useCallback((id: string, e: React.MouseEvent) => {
|
||||
selectSprite(id, e.ctrlKey || e.metaKey);
|
||||
}, [selectSprite]);
|
||||
|
||||
/**
|
||||
* Handle clear all
|
||||
*/
|
||||
const handleClear = useCallback(() => {
|
||||
clearSprites();
|
||||
setFolderName("");
|
||||
}, [clearSprites, setFolderName]);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={dropZoneRef}
|
||||
className="flex h-full flex-col overflow-hidden rounded-2xl border border-white/[0.08] bg-[#1c1c1e]/80 backdrop-blur-xl shadow-xl"
|
||||
onDragEnter={handleDragEnter}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDragOver={handleDragOver}
|
||||
onDrop={handleDrop}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between border-b border-white/[0.06] px-4 py-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
className="text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
{isExpanded ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
)}
|
||||
</button>
|
||||
{folderName ? (
|
||||
<FolderOpen className="h-4 w-4 text-primary" />
|
||||
) : (
|
||||
<Folder className="h-4 w-4 text-muted-foreground" />
|
||||
)}
|
||||
<span className="text-sm font-medium truncate max-w-[120px]">
|
||||
{folderName || t("tools.textureAtlas.sprites") || "精灵"}
|
||||
</span>
|
||||
{sprites.length > 0 && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
({sprites.length})
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{sprites.length > 0 && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7 hover:bg-white/[0.06]"
|
||||
onClick={handleClear}
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* File list */}
|
||||
<AnimatePresence>
|
||||
{isExpanded && (
|
||||
<motion.div
|
||||
initial={{ height: 0 }}
|
||||
animate={{ height: "auto" }}
|
||||
exit={{ height: 0 }}
|
||||
className="flex-1 overflow-hidden"
|
||||
>
|
||||
<div className="h-full overflow-y-auto scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
|
||||
{sprites.length > 0 ? (
|
||||
<div className="space-y-1 p-2">
|
||||
{sprites.map((sprite, index) => (
|
||||
<motion.div
|
||||
key={sprite.id}
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: -10 }}
|
||||
transition={{ delay: index * 0.02 }}
|
||||
onClick={(e) => handleSpriteClick(sprite.id, e)}
|
||||
className={`
|
||||
group flex items-center gap-2.5 rounded-xl px-2.5 py-2 cursor-pointer
|
||||
transition-all duration-150 hover:bg-white/[0.06]
|
||||
${selectedSpriteIds.includes(sprite.id) ? "bg-primary/15 ring-1 ring-primary/30" : ""}
|
||||
`}
|
||||
>
|
||||
{/* Thumbnail */}
|
||||
<div className="relative h-9 w-9 shrink-0 overflow-hidden rounded-lg border border-white/[0.08] bg-black/30">
|
||||
<canvas
|
||||
ref={(canvas) => {
|
||||
if (canvas && sprite.image) {
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (ctx) {
|
||||
canvas.width = 36;
|
||||
canvas.height = 36;
|
||||
|
||||
// Calculate aspect ratio fit
|
||||
const scale = Math.min(36 / sprite.width, 36 / sprite.height);
|
||||
const w = sprite.width * scale;
|
||||
const h = sprite.height * scale;
|
||||
const x = (36 - w) / 2;
|
||||
const y = (36 - h) / 2;
|
||||
|
||||
ctx.clearRect(0, 0, 36, 36);
|
||||
ctx.drawImage(sprite.image, x, y, w, h);
|
||||
}
|
||||
}
|
||||
}}
|
||||
className="h-full w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-xs font-medium">{sprite.name}</p>
|
||||
<p className="text-[10px] text-muted-foreground/70">
|
||||
{sprite.width} × {sprite.height}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Remove button */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-6 w-6 opacity-0 group-hover:opacity-100 hover:bg-white/[0.08] transition-opacity"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
removeSprite(sprite.id);
|
||||
}}
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</Button>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
/* Empty state / Drop zone */
|
||||
<div className="flex h-full min-h-[200px] flex-col items-center justify-center p-4 text-center">
|
||||
{isDragging ? (
|
||||
<motion.div
|
||||
initial={{ scale: 0.9, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
className="flex flex-col items-center"
|
||||
>
|
||||
<div className="mb-3 flex h-14 w-14 items-center justify-center rounded-2xl bg-primary/20">
|
||||
<Upload className="h-7 w-7 text-primary" />
|
||||
</div>
|
||||
<p className="text-sm font-medium text-primary">
|
||||
{t("uploader.dropActive") || "释放文件即可上传"}
|
||||
</p>
|
||||
</motion.div>
|
||||
) : isLoading ? (
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="mb-3 h-8 w-8 animate-spin rounded-full border-2 border-primary border-t-transparent" />
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{t("common.loading") || "加载中..."}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="mb-3 flex h-14 w-14 items-center justify-center rounded-2xl bg-white/[0.04]">
|
||||
<ImageIcon className="h-7 w-7 text-muted-foreground/60" />
|
||||
</div>
|
||||
<p className="mb-1 text-sm font-medium">
|
||||
{t("atlas.dropSprites") || "拖拽精灵图到这里"}
|
||||
</p>
|
||||
<p className="mb-4 text-xs text-muted-foreground/60">
|
||||
{t("atlas.supportFolder") || "支持拖拽文件夹上传"}
|
||||
</p>
|
||||
<div className="flex flex-col gap-2 w-full px-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="w-full rounded-xl border-white/[0.08] hover:bg-white/[0.06]"
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
>
|
||||
<ImageIcon className="mr-1.5 h-3.5 w-3.5" />
|
||||
{t("atlas.selectFiles") || "选择文件"}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="w-full rounded-xl border-white/[0.08] hover:bg-white/[0.06]"
|
||||
onClick={() => folderInputRef.current?.click()}
|
||||
>
|
||||
<Folder className="mr-1.5 h-3.5 w-3.5" />
|
||||
{t("atlas.selectFolder") || "选择文件夹"}
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Hidden file inputs */}
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
multiple
|
||||
accept="image/png,image/jpeg,image/webp,image/gif,image/bmp"
|
||||
className="hidden"
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
<input
|
||||
ref={folderInputRef}
|
||||
type="file"
|
||||
multiple
|
||||
accept="image/png,image/jpeg,image/webp,image/gif,image/bmp"
|
||||
// @ts-expect-error - webkitdirectory is not in the type definition
|
||||
webkitdirectory="true"
|
||||
className="hidden"
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
|
||||
{/* Drag overlay */}
|
||||
<AnimatePresence>
|
||||
{isDragging && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="absolute inset-0 z-50 flex items-center justify-center bg-primary/10 backdrop-blur-sm"
|
||||
>
|
||||
<div className="rounded-lg border-2 border-dashed border-primary bg-background/80 px-8 py-6 text-center">
|
||||
<Upload className="mx-auto mb-2 h-8 w-8 text-primary" />
|
||||
<p className="font-medium text-primary">
|
||||
{t("uploader.dropActive") || "释放文件即可上传"}
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user