Feature/tilemap editor (#237)
* feat: 添加 Tilemap 编辑器插件和组件生命周期支持 * feat(editor-core): 添加声明式插件注册 API * feat(editor-core): 改进tiledmap结构合并tileset进tiledmapeditor * feat: 添加 editor-runtime SDK 和插件系统改进 * fix(ci): 修复SceneResourceManager里变量未使用问题
This commit is contained in:
YHH
GitHub
@@ -197,3 +197,119 @@
|
||||
color: #666;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Asset Save Dialog specific styles */
|
||||
.asset-save-filename {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
border-top: 1px solid #333;
|
||||
background: #252525;
|
||||
}
|
||||
|
||||
.asset-save-filename label {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.asset-save-filename input {
|
||||
flex: 1;
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #333;
|
||||
border-radius: 4px;
|
||||
padding: 6px 8px;
|
||||
color: #e0e0e0;
|
||||
font-size: 12px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.asset-save-filename input:focus {
|
||||
border-color: #1976d2;
|
||||
}
|
||||
|
||||
.asset-save-extension {
|
||||
font-size: 11px;
|
||||
color: #666;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* New folder styles */
|
||||
.asset-save-new-folder-btn {
|
||||
padding: 8px 16px;
|
||||
border-top: 1px solid #333;
|
||||
}
|
||||
|
||||
.asset-save-new-folder-btn button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
background: #333;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: #e0e0e0;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.asset-save-new-folder-btn button:hover {
|
||||
background: #444;
|
||||
}
|
||||
|
||||
.asset-save-new-folder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
border-top: 1px solid #333;
|
||||
background: #252525;
|
||||
}
|
||||
|
||||
.asset-save-new-folder input {
|
||||
flex: 1;
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #333;
|
||||
border-radius: 4px;
|
||||
padding: 6px 8px;
|
||||
color: #e0e0e0;
|
||||
font-size: 12px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.asset-save-new-folder input:focus {
|
||||
border-color: #1976d2;
|
||||
}
|
||||
|
||||
.asset-save-new-folder button {
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.asset-save-new-folder button:first-of-type {
|
||||
background: #1976d2;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.asset-save-new-folder button:first-of-type:hover {
|
||||
background: #1565c0;
|
||||
}
|
||||
|
||||
.asset-save-new-folder button:first-of-type:disabled {
|
||||
background: #333;
|
||||
color: #666;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.asset-save-new-folder button:last-child {
|
||||
background: #333;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.asset-save-new-folder button:last-child:hover {
|
||||
background: #444;
|
||||
}
|
||||
|
||||
@@ -149,19 +149,34 @@ export function AssetPickerDialog({
|
||||
}
|
||||
}, [toggleFolder]);
|
||||
|
||||
// Convert absolute path to relative path based on project root
|
||||
const toRelativePath = useCallback((absolutePath: string): string => {
|
||||
const projectService = Core.services.tryResolve(ProjectService);
|
||||
const currentProject = projectService?.getCurrentProject();
|
||||
if (currentProject) {
|
||||
const projectPath = currentProject.path.replace(/\\/g, '/');
|
||||
const normalizedAbsolute = absolutePath.replace(/\\/g, '/');
|
||||
if (normalizedAbsolute.startsWith(projectPath)) {
|
||||
// Return relative path from project root
|
||||
return normalizedAbsolute.substring(projectPath.length + 1);
|
||||
}
|
||||
}
|
||||
return absolutePath;
|
||||
}, []);
|
||||
|
||||
const handleConfirm = useCallback(() => {
|
||||
if (selectedPath) {
|
||||
onSelect(selectedPath);
|
||||
onSelect(toRelativePath(selectedPath));
|
||||
onClose();
|
||||
}
|
||||
}, [selectedPath, onSelect, onClose]);
|
||||
}, [selectedPath, onSelect, onClose, toRelativePath]);
|
||||
|
||||
const handleDoubleClick = useCallback((node: FileNode) => {
|
||||
if (!node.isDirectory) {
|
||||
onSelect(node.path);
|
||||
onSelect(toRelativePath(node.path));
|
||||
onClose();
|
||||
}
|
||||
}, [onSelect, onClose]);
|
||||
}, [onSelect, onClose, toRelativePath]);
|
||||
|
||||
const getFileIcon = (name: string) => {
|
||||
const ext = name.split('.').pop()?.toLowerCase();
|
||||
|
||||
374
packages/editor-app/src/components/dialogs/AssetSaveDialog.tsx
Normal file
374
packages/editor-app/src/components/dialogs/AssetSaveDialog.tsx
Normal file
@@ -0,0 +1,374 @@
|
||||
import React, { useState, useEffect, useMemo, useCallback } from 'react';
|
||||
import { X, Search, Folder, FolderOpen, FolderPlus } from 'lucide-react';
|
||||
import { Core } from '@esengine/ecs-framework';
|
||||
import { ProjectService, IFileSystemService } from '@esengine/editor-core';
|
||||
import type { IFileSystem } from '@esengine/editor-core';
|
||||
import './AssetPickerDialog.css';
|
||||
|
||||
interface AssetSaveDialogProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onSave: (path: string) => void;
|
||||
title?: string;
|
||||
defaultFileName?: string;
|
||||
fileExtension?: string; // e.g., '.tilemap.json'
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
interface FileNode {
|
||||
name: string;
|
||||
path: string;
|
||||
isDirectory: boolean;
|
||||
children?: FileNode[];
|
||||
}
|
||||
|
||||
export function AssetSaveDialog({
|
||||
isOpen,
|
||||
onClose,
|
||||
onSave,
|
||||
title = 'Save Asset',
|
||||
defaultFileName = 'new-asset',
|
||||
fileExtension = '',
|
||||
placeholder = 'Search folders...'
|
||||
}: AssetSaveDialogProps) {
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set());
|
||||
const [selectedFolder, setSelectedFolder] = useState<string | null>(null);
|
||||
const [fileName, setFileName] = useState(defaultFileName);
|
||||
const [folders, setFolders] = useState<FileNode[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [projectPath, setProjectPath] = useState('');
|
||||
const [showNewFolderInput, setShowNewFolderInput] = useState(false);
|
||||
const [newFolderName, setNewFolderName] = useState('');
|
||||
|
||||
// Load project folders
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
|
||||
const loadFolders = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const projectService = Core.services.tryResolve(ProjectService);
|
||||
const fileSystem = Core.services.tryResolve<IFileSystem>(IFileSystemService);
|
||||
|
||||
const currentProject = projectService?.getCurrentProject();
|
||||
if (projectService && currentProject && fileSystem) {
|
||||
const projPath = currentProject.path;
|
||||
setProjectPath(projPath);
|
||||
const assetsPath = `${projPath}/assets`;
|
||||
|
||||
// Set default selected folder to assets
|
||||
setSelectedFolder(assetsPath);
|
||||
|
||||
const buildTree = async (dirPath: string): Promise<FileNode[]> => {
|
||||
const entries = await fileSystem.listDirectory(dirPath);
|
||||
const nodes: FileNode[] = [];
|
||||
|
||||
for (const entry of entries) {
|
||||
// Only include directories
|
||||
if (entry.isDirectory) {
|
||||
const node: FileNode = {
|
||||
name: entry.name,
|
||||
path: entry.path,
|
||||
isDirectory: true
|
||||
};
|
||||
|
||||
try {
|
||||
node.children = await buildTree(entry.path);
|
||||
} catch {
|
||||
node.children = [];
|
||||
}
|
||||
|
||||
nodes.push(node);
|
||||
}
|
||||
}
|
||||
|
||||
// Sort alphabetically
|
||||
return nodes.sort((a, b) => a.name.localeCompare(b.name));
|
||||
};
|
||||
|
||||
const tree = await buildTree(assetsPath);
|
||||
// Add root assets folder
|
||||
const rootNode: FileNode = {
|
||||
name: 'assets',
|
||||
path: assetsPath,
|
||||
isDirectory: true,
|
||||
children: tree
|
||||
};
|
||||
setFolders([rootNode]);
|
||||
setExpandedFolders(new Set([assetsPath]));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load folders:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadFolders();
|
||||
setFileName(defaultFileName);
|
||||
setSearchTerm('');
|
||||
}, [isOpen, defaultFileName]);
|
||||
|
||||
// Filter folders based on search
|
||||
const filteredFolders = useMemo(() => {
|
||||
if (!searchTerm) return folders;
|
||||
|
||||
const filterNode = (node: FileNode): FileNode | null => {
|
||||
const matchesSearch = node.name.toLowerCase().includes(searchTerm.toLowerCase());
|
||||
|
||||
if (node.children) {
|
||||
const filteredChildren = node.children
|
||||
.map(filterNode)
|
||||
.filter((n): n is FileNode => n !== null);
|
||||
|
||||
if (filteredChildren.length > 0 || matchesSearch) {
|
||||
return { ...node, children: filteredChildren };
|
||||
}
|
||||
}
|
||||
|
||||
return matchesSearch ? node : null;
|
||||
};
|
||||
|
||||
return folders
|
||||
.map(filterNode)
|
||||
.filter((n): n is FileNode => n !== null);
|
||||
}, [folders, searchTerm]);
|
||||
|
||||
const toggleFolder = useCallback((path: string) => {
|
||||
setExpandedFolders((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(path)) {
|
||||
next.delete(path);
|
||||
} else {
|
||||
next.add(path);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleSelectFolder = useCallback((node: FileNode) => {
|
||||
setSelectedFolder(node.path);
|
||||
if (!expandedFolders.has(node.path)) {
|
||||
toggleFolder(node.path);
|
||||
}
|
||||
}, [expandedFolders, toggleFolder]);
|
||||
|
||||
// Convert absolute path to relative path based on project root
|
||||
const toRelativePath = useCallback((absolutePath: string): string => {
|
||||
if (projectPath) {
|
||||
const normalizedProject = projectPath.replace(/\\/g, '/');
|
||||
const normalizedAbsolute = absolutePath.replace(/\\/g, '/');
|
||||
if (normalizedAbsolute.startsWith(normalizedProject)) {
|
||||
return normalizedAbsolute.substring(normalizedProject.length + 1);
|
||||
}
|
||||
}
|
||||
return absolutePath;
|
||||
}, [projectPath]);
|
||||
|
||||
const handleSave = useCallback(() => {
|
||||
if (selectedFolder && fileName) {
|
||||
// Ensure file has correct extension
|
||||
let finalFileName = fileName;
|
||||
if (fileExtension && !finalFileName.endsWith(fileExtension)) {
|
||||
finalFileName += fileExtension;
|
||||
}
|
||||
|
||||
const fullPath = `${selectedFolder}/${finalFileName}`.replace(/\\/g, '/');
|
||||
onSave(toRelativePath(fullPath));
|
||||
onClose();
|
||||
}
|
||||
}, [selectedFolder, fileName, fileExtension, onSave, onClose, toRelativePath]);
|
||||
|
||||
const handleCreateFolder = useCallback(async () => {
|
||||
if (!selectedFolder || !newFolderName.trim()) return;
|
||||
|
||||
const fileSystem = Core.services.tryResolve<IFileSystem>(IFileSystemService);
|
||||
if (!fileSystem) return;
|
||||
|
||||
try {
|
||||
const newFolderPath = `${selectedFolder}/${newFolderName.trim()}`.replace(/\\/g, '/');
|
||||
await fileSystem.createDirectory(newFolderPath);
|
||||
|
||||
// Add new folder to tree
|
||||
const addFolderToTree = (nodes: FileNode[]): FileNode[] => {
|
||||
return nodes.map(node => {
|
||||
if (node.path === selectedFolder) {
|
||||
const newNode: FileNode = {
|
||||
name: newFolderName.trim(),
|
||||
path: newFolderPath,
|
||||
isDirectory: true,
|
||||
children: []
|
||||
};
|
||||
return {
|
||||
...node,
|
||||
children: [...(node.children || []), newNode].sort((a, b) => a.name.localeCompare(b.name))
|
||||
};
|
||||
}
|
||||
if (node.children) {
|
||||
return { ...node, children: addFolderToTree(node.children) };
|
||||
}
|
||||
return node;
|
||||
});
|
||||
};
|
||||
|
||||
setFolders(addFolderToTree(folders));
|
||||
setSelectedFolder(newFolderPath);
|
||||
setExpandedFolders(prev => new Set([...prev, selectedFolder]));
|
||||
setShowNewFolderInput(false);
|
||||
setNewFolderName('');
|
||||
} catch (error) {
|
||||
console.error('Failed to create folder:', error);
|
||||
}
|
||||
}, [selectedFolder, newFolderName, folders]);
|
||||
|
||||
const renderNode = (node: FileNode, depth: number = 0) => {
|
||||
const isExpanded = expandedFolders.has(node.path);
|
||||
const isSelected = selectedFolder === node.path;
|
||||
|
||||
return (
|
||||
<div key={node.path}>
|
||||
<div
|
||||
className={`asset-picker-item ${isSelected ? 'selected' : ''}`}
|
||||
style={{ paddingLeft: `${depth * 16 + 8}px` }}
|
||||
onClick={() => handleSelectFolder(node)}
|
||||
onDoubleClick={() => toggleFolder(node.path)}
|
||||
>
|
||||
<span className="asset-picker-item__icon">
|
||||
{isExpanded ? <FolderOpen size={14} /> : <Folder size={14} />}
|
||||
</span>
|
||||
<span className="asset-picker-item__name">{node.name}</span>
|
||||
</div>
|
||||
{isExpanded && node.children && (
|
||||
<div className="asset-picker-children">
|
||||
{node.children.map((child) => renderNode(child, depth + 1))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const getDisplayPath = () => {
|
||||
if (!selectedFolder) return '';
|
||||
const relativePath = toRelativePath(selectedFolder);
|
||||
let finalFileName = fileName;
|
||||
if (fileExtension && !finalFileName.endsWith(fileExtension)) {
|
||||
finalFileName += fileExtension;
|
||||
}
|
||||
return `${relativePath}/${finalFileName}`;
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="asset-picker-overlay" onClick={onClose}>
|
||||
<div className="asset-picker-dialog" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="asset-picker-header">
|
||||
<h3>{title}</h3>
|
||||
<button className="asset-picker-close" onClick={onClose}>
|
||||
<X size={16} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="asset-picker-search">
|
||||
<Search size={14} />
|
||||
<input
|
||||
type="text"
|
||||
placeholder={placeholder}
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="asset-picker-content">
|
||||
{loading ? (
|
||||
<div className="asset-picker-loading">Loading folders...</div>
|
||||
) : filteredFolders.length === 0 ? (
|
||||
<div className="asset-picker-empty">No folders found</div>
|
||||
) : (
|
||||
<div className="asset-picker-tree">
|
||||
{filteredFolders.map((node) => renderNode(node))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* New folder input */}
|
||||
{showNewFolderInput && (
|
||||
<div className="asset-save-new-folder">
|
||||
<input
|
||||
type="text"
|
||||
value={newFolderName}
|
||||
onChange={(e) => setNewFolderName(e.target.value)}
|
||||
placeholder="New folder name"
|
||||
autoFocus
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') handleCreateFolder();
|
||||
if (e.key === 'Escape') {
|
||||
setShowNewFolderInput(false);
|
||||
setNewFolderName('');
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<button onClick={handleCreateFolder} disabled={!newFolderName.trim()}>
|
||||
Create
|
||||
</button>
|
||||
<button onClick={() => {
|
||||
setShowNewFolderInput(false);
|
||||
setNewFolderName('');
|
||||
}}>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* New folder button */}
|
||||
{!showNewFolderInput && selectedFolder && (
|
||||
<div className="asset-save-new-folder-btn">
|
||||
<button onClick={() => setShowNewFolderInput(true)}>
|
||||
<FolderPlus size={14} />
|
||||
New Folder
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="asset-save-filename">
|
||||
<label>File name:</label>
|
||||
<input
|
||||
type="text"
|
||||
value={fileName}
|
||||
onChange={(e) => setFileName(e.target.value)}
|
||||
placeholder="Enter file name"
|
||||
autoFocus
|
||||
/>
|
||||
{fileExtension && (
|
||||
<span className="asset-save-extension">{fileExtension}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="asset-picker-footer">
|
||||
<div className="asset-picker-selected">
|
||||
{selectedFolder ? (
|
||||
<span title={getDisplayPath()}>
|
||||
{getDisplayPath()}
|
||||
</span>
|
||||
) : (
|
||||
<span className="placeholder">Select a folder</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="asset-picker-actions">
|
||||
<button className="btn-cancel" onClick={onClose}>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
className="btn-confirm"
|
||||
onClick={handleSave}
|
||||
disabled={!selectedFolder || !fileName}
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user