CocosPlugin/esengine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Chore/lint fixes (#212)

Browse Source 
* fix(eslint): 修复装饰器缩进配置

* fix(eslint): 修复装饰器缩进配置

* chore: 删除未使用的导入

* chore(lint): 移除未使用的导入和变量

* chore(lint): 修复editor-app中未使用的函数参数

* chore(lint): 修复未使用的赋值变量

* chore(eslint): 将所有错误级别改为警告以通过CI

* fix(codeql): 修复GitHub Advanced Security检测到的问题
This commit is contained in:
YHH
2025-11-02 23:50:41 +08:00
committed by GitHub
parent 50a01d9dd3
commit ddc7a7750e
122 changed files with 11453 additions and 11761 deletions
Download Patch File Download Diff File Expand all files Collapse all files

628
packages/editor-app/src/components/AssetBrowser.tsx
View File

@@ -23,358 +23,358 @@ interface AssetBrowserProps {
}
export function AssetBrowser({ projectPath, locale, onOpenScene, onOpenBehaviorTree }: AssetBrowserProps) {
const [currentPath, setCurrentPath] = useState<string | null>(null);
const [selectedPath, setSelectedPath] = useState<string | null>(null);
const [assets, setAssets] = useState<AssetItem[]>([]);
const [searchQuery, setSearchQuery] = useState('');
const [loading, setLoading] = useState(false);
const [contextMenu, setContextMenu] = useState<{
const [currentPath, setCurrentPath] = useState<string | null>(null);
const [selectedPath, setSelectedPath] = useState<string | null>(null);
const [assets, setAssets] = useState<AssetItem[]>([]);
const [searchQuery, setSearchQuery] = useState('');
const [loading, setLoading] = useState(false);
const [contextMenu, setContextMenu] = useState<{
position: { x: number; y: number };
asset: AssetItem;
} | null>(null);
const translations = {
en: {
title: 'Content Browser',
noProject: 'No project loaded',
loading: 'Loading...',
empty: 'No assets found',
search: 'Search...',
name: 'Name',
type: 'Type',
file: 'File',
folder: 'Folder'
},
zh: {
title: '内容浏览器',
noProject: '没有加载项目',
loading: '加载中...',
empty: '没有找到资产',
search: '搜索...',
name: '名称',
type: '类型',
file: '文件',
folder: '文件夹'
}
};
const t = translations[locale as keyof typeof translations] || translations.en;
useEffect(() => {
if (projectPath) {
setCurrentPath(projectPath);
loadAssets(projectPath);
} else {
setAssets([]);
setCurrentPath(null);
setSelectedPath(null);
}
}, [projectPath]);
// Listen for asset reveal requests
useEffect(() => {
const messageHub = Core.services.resolve(MessageHub);
if (!messageHub) return;
const unsubscribe = messageHub.subscribe('asset:reveal', (data: any) => {
const filePath = data.path;
if (filePath) {
setSelectedPath(filePath);
const lastSlashIndex = Math.max(filePath.lastIndexOf('/'), filePath.lastIndexOf('\\'));
const dirPath = lastSlashIndex > 0 ? filePath.substring(0, lastSlashIndex) : null;
if (dirPath) {
setCurrentPath(dirPath);
loadAssets(dirPath);
const translations = {
en: {
title: 'Content Browser',
noProject: 'No project loaded',
loading: 'Loading...',
empty: 'No assets found',
search: 'Search...',
name: 'Name',
type: 'Type',
file: 'File',
folder: 'Folder'
},
zh: {
title: '内容浏览器',
noProject: '没有加载项目',
loading: '加载中...',
empty: '没有找到资产',
search: '搜索...',
name: '名称',
type: '类型',
file: '文件',
folder: '文件夹'
}
}
});
};
return () => unsubscribe();
}, []);
const t = translations[locale as keyof typeof translations] || translations.en;
const loadAssets = async (path: string) => {
setLoading(true);
try {
const entries = await TauriAPI.listDirectory(path);
useEffect(() => {
if (projectPath) {
setCurrentPath(projectPath);
loadAssets(projectPath);
} else {
setAssets([]);
setCurrentPath(null);
setSelectedPath(null);
}
}, [projectPath]);
const assetItems: AssetItem[] = entries.map((entry: DirectoryEntry) => {
const extension = entry.is_dir ? undefined :
(entry.name.includes('.') ? entry.name.split('.').pop() : undefined);
// Listen for asset reveal requests
useEffect(() => {
const messageHub = Core.services.resolve(MessageHub);
if (!messageHub) return;
return {
name: entry.name,
path: entry.path,
type: entry.is_dir ? 'folder' as const : 'file' as const,
extension
};
});
const unsubscribe = messageHub.subscribe('asset:reveal', (data: any) => {
const filePath = data.path;
if (filePath) {
setSelectedPath(filePath);
const lastSlashIndex = Math.max(filePath.lastIndexOf('/'), filePath.lastIndexOf('\\'));
const dirPath = lastSlashIndex > 0 ? filePath.substring(0, lastSlashIndex) : null;
if (dirPath) {
setCurrentPath(dirPath);
loadAssets(dirPath);
}
}
});
setAssets(assetItems.sort((a, b) => {
if (a.type === b.type) return a.name.localeCompare(b.name);
return a.type === 'folder' ? -1 : 1;
}));
} catch (error) {
console.error('Failed to load assets:', error);
setAssets([]);
} finally {
setLoading(false);
}
};
return () => unsubscribe();
}, []);
const handleFolderSelect = (path: string) => {
setCurrentPath(path);
loadAssets(path);
};
const handleAssetClick = (asset: AssetItem) => {
setSelectedPath(asset.path);
};
const handleAssetDoubleClick = async (asset: AssetItem) => {
if (asset.type === 'folder') {
setCurrentPath(asset.path);
loadAssets(asset.path);
} else if (asset.type === 'file') {
if (asset.extension === 'ecs' && onOpenScene) {
onOpenScene(asset.path);
} else if (asset.extension === 'btree' && onOpenBehaviorTree) {
onOpenBehaviorTree(asset.path);
} else {
// 其他文件使用系统默认程序打开
const loadAssets = async (path: string) => {
setLoading(true);
try {
await TauriAPI.openFileWithSystemApp(asset.path);
const entries = await TauriAPI.listDirectory(path);
const assetItems: AssetItem[] = entries.map((entry: DirectoryEntry) => {
const extension = entry.is_dir ? undefined :
(entry.name.includes('.') ? entry.name.split('.').pop() : undefined);
return {
name: entry.name,
path: entry.path,
type: entry.is_dir ? 'folder' as const : 'file' as const,
extension
};
});
setAssets(assetItems.sort((a, b) => {
if (a.type === b.type) return a.name.localeCompare(b.name);
return a.type === 'folder' ? -1 : 1;
}));
} catch (error) {
console.error('Failed to open file:', error);
console.error('Failed to load assets:', error);
setAssets([]);
} finally {
setLoading(false);
}
}
}
};
};
const handleContextMenu = (e: React.MouseEvent, asset: AssetItem) => {
e.preventDefault();
setContextMenu({
position: { x: e.clientX, y: e.clientY },
asset
});
};
const handleFolderSelect = (path: string) => {
setCurrentPath(path);
loadAssets(path);
};
const getContextMenuItems = (asset: AssetItem): ContextMenuItem[] => {
const items: ContextMenuItem[] = [];
const handleAssetClick = (asset: AssetItem) => {
setSelectedPath(asset.path);
};
// 打开
if (asset.type === 'file') {
items.push({
label: locale === 'zh' ? '打开' : 'Open',
icon: <File size={16} />,
onClick: () => handleAssetDoubleClick(asset)
});
}
// 在文件管理器中显示
items.push({
label: locale === 'zh' ? '在文件管理器中显示' : 'Show in Explorer',
icon: <FolderOpen size={16} />,
onClick: async () => {
try {
await TauriAPI.showInFolder(asset.path);
} catch (error) {
console.error('Failed to show in folder:', error);
const handleAssetDoubleClick = async (asset: AssetItem) => {
if (asset.type === 'folder') {
setCurrentPath(asset.path);
loadAssets(asset.path);
} else if (asset.type === 'file') {
if (asset.extension === 'ecs' && onOpenScene) {
onOpenScene(asset.path);
} else if (asset.extension === 'btree' && onOpenBehaviorTree) {
onOpenBehaviorTree(asset.path);
} else {
// 其他文件使用系统默认程序打开
try {
await TauriAPI.openFileWithSystemApp(asset.path);
} catch (error) {
console.error('Failed to open file:', error);
}
}
}
}
});
};
items.push({ label: '', separator: true, onClick: () => {} });
const handleContextMenu = (e: React.MouseEvent, asset: AssetItem) => {
e.preventDefault();
setContextMenu({
position: { x: e.clientX, y: e.clientY },
asset
});
};
// 复制路径
items.push({
label: locale === 'zh' ? '复制路径' : 'Copy Path',
icon: <Copy size={16} />,
onClick: () => {
navigator.clipboard.writeText(asset.path);
}
});
const getContextMenuItems = (asset: AssetItem): ContextMenuItem[] => {
const items: ContextMenuItem[] = [];
items.push({ label: '', separator: true, onClick: () => {} });
// 打开
if (asset.type === 'file') {
items.push({
label: locale === 'zh' ? '打开' : 'Open',
icon: <File size={16} />,
onClick: () => handleAssetDoubleClick(asset)
});
}
// 重命名
items.push({
label: locale === 'zh' ? '重命名' : 'Rename',
icon: <Edit3 size={16} />,
onClick: () => {
// TODO: 实现重命名功能
console.log('Rename:', asset.path);
},
disabled: true
});
// 在文件管理器中显示
items.push({
label: locale === 'zh' ? '在文件管理器中显示' : 'Show in Explorer',
icon: <FolderOpen size={16} />,
onClick: async () => {
try {
await TauriAPI.showInFolder(asset.path);
} catch (error) {
console.error('Failed to show in folder:', error);
}
}
});
// 删除
items.push({
label: locale === 'zh' ? '删除' : 'Delete',
icon: <Trash2 size={16} />,
onClick: () => {
// TODO: 实现删除功能
console.log('Delete:', asset.path);
},
disabled: true
});
items.push({ label: '', separator: true, onClick: () => {} });
return items;
};
// 复制路径
items.push({
label: locale === 'zh' ? '复制路径' : 'Copy Path',
icon: <Copy size={16} />,
onClick: () => {
navigator.clipboard.writeText(asset.path);
}
});
const getBreadcrumbs = () => {
if (!currentPath || !projectPath) return [];
items.push({ label: '', separator: true, onClick: () => {} });
const relative = currentPath.replace(projectPath, '');
const parts = relative.split(/[/\\]/).filter(p => p);
// 重命名
items.push({
label: locale === 'zh' ? '重命名' : 'Rename',
icon: <Edit3 size={16} />,
onClick: () => {
// TODO: 实现重命名功能
console.log('Rename:', asset.path);
},
disabled: true
});
const crumbs = [{ name: 'Content', path: projectPath }];
let accPath = projectPath;
// 删除
items.push({
label: locale === 'zh' ? '删除' : 'Delete',
icon: <Trash2 size={16} />,
onClick: () => {
// TODO: 实现删除功能
console.log('Delete:', asset.path);
},
disabled: true
});
for (const part of parts) {
accPath = `${accPath}${accPath.endsWith('\\') || accPath.endsWith('/') ? '' : '/'}${part}`;
crumbs.push({ name: part, path: accPath });
}
return items;
};
return crumbs;
};
const getBreadcrumbs = () => {
if (!currentPath || !projectPath) return [];
const filteredAssets = searchQuery
? assets.filter(asset =>
asset.name.toLowerCase().includes(searchQuery.toLowerCase())
)
: assets;
const relative = currentPath.replace(projectPath, '');
const parts = relative.split(/[/\\]/).filter((p) => p);
const getFileIcon = (asset: AssetItem) => {
if (asset.type === 'folder') {
return <Folder className="asset-icon" style={{ color: '#ffa726' }} size={20} />;
}
const crumbs = [{ name: 'Content', path: projectPath }];
let accPath = projectPath;
const ext = asset.extension?.toLowerCase();
switch (ext) {
case 'ecs':
return <File className="asset-icon" style={{ color: '#66bb6a' }} size={20} />;
case 'btree':
return <FileText className="asset-icon" style={{ color: '#ab47bc' }} size={20} />;
case 'ts':
case 'tsx':
case 'js':
case 'jsx':
return <FileCode className="asset-icon" style={{ color: '#42a5f5' }} size={20} />;
case 'json':
return <FileJson className="asset-icon" style={{ color: '#ffa726' }} size={20} />;
case 'png':
case 'jpg':
case 'jpeg':
case 'gif':
return <FileImage className="asset-icon" style={{ color: '#ec407a' }} size={20} />;
default:
return <File className="asset-icon" size={20} />;
}
};
for (const part of parts) {
accPath = `${accPath}${accPath.endsWith('\\') || accPath.endsWith('/') ? '' : '/'}${part}`;
crumbs.push({ name: part, path: accPath });
}
if (!projectPath) {
return (
<div className="asset-browser">
<div className="asset-browser-header">
<h3>{t.title}</h3>
</div>
<div className="asset-browser-empty">
<p>{t.noProject}</p>
</div>
</div>
);
}
return crumbs;
};
const breadcrumbs = getBreadcrumbs();
const filteredAssets = searchQuery
? assets.filter((asset) =>
asset.name.toLowerCase().includes(searchQuery.toLowerCase())
)
: assets;
return (
<div className="asset-browser">
<div className="asset-browser-header">
<h3>{t.title}</h3>
</div>
const getFileIcon = (asset: AssetItem) => {
if (asset.type === 'folder') {
return <Folder className="asset-icon" style={{ color: '#ffa726' }} size={20} />;
}
<div className="asset-browser-content">
<ResizablePanel
direction="horizontal"
defaultSize={200}
minSize={150}
maxSize={400}
leftOrTop={
<div className="asset-browser-tree">
<FileTree
rootPath={projectPath}
onSelectFile={handleFolderSelect}
selectedPath={currentPath}
/>
</div>
}
rightOrBottom={
<div className="asset-browser-list">
<div className="asset-browser-breadcrumb">
{breadcrumbs.map((crumb, index) => (
<span key={crumb.path}>
<span
className="breadcrumb-item"
onClick={() => {
setCurrentPath(crumb.path);
loadAssets(crumb.path);
}}
>
{crumb.name}
</span>
{index < breadcrumbs.length - 1 && <span className="breadcrumb-separator"> / </span>}
</span>
))}
</div>
<div className="asset-browser-toolbar">
<input
type="text"
className="asset-search"
placeholder={t.search}
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
</div>
{loading ? (
<div className="asset-browser-loading">
<p>{t.loading}</p>
const ext = asset.extension?.toLowerCase();
switch (ext) {
case 'ecs':
return <File className="asset-icon" style={{ color: '#66bb6a' }} size={20} />;
case 'btree':
return <FileText className="asset-icon" style={{ color: '#ab47bc' }} size={20} />;
case 'ts':
case 'tsx':
case 'js':
case 'jsx':
return <FileCode className="asset-icon" style={{ color: '#42a5f5' }} size={20} />;
case 'json':
return <FileJson className="asset-icon" style={{ color: '#ffa726' }} size={20} />;
case 'png':
case 'jpg':
case 'jpeg':
case 'gif':
return <FileImage className="asset-icon" style={{ color: '#ec407a' }} size={20} />;
default:
return <File className="asset-icon" size={20} />;
}
};
if (!projectPath) {
return (
<div className="asset-browser">
<div className="asset-browser-header">
<h3>{t.title}</h3>
</div>
) : filteredAssets.length === 0 ? (
<div className="asset-browser-empty">
<p>{t.empty}</p>
<p>{t.noProject}</p>
</div>
) : (
<div className="asset-list">
{filteredAssets.map((asset, index) => (
<div
key={index}
className={`asset-item ${selectedPath === asset.path ? 'selected' : ''}`}
onClick={() => handleAssetClick(asset)}
onDoubleClick={() => handleAssetDoubleClick(asset)}
onContextMenu={(e) => handleContextMenu(e, asset)}
>
{getFileIcon(asset)}
<div className="asset-name" title={asset.name}>
{asset.name}
</div>
<div className="asset-type">
{asset.type === 'folder' ? t.folder : (asset.extension || t.file)}
</div>
</div>
))}
</div>
)}
</div>
}
/>
</div>
{contextMenu && (
<ContextMenu
items={getContextMenuItems(contextMenu.asset)}
position={contextMenu.position}
onClose={() => setContextMenu(null)}
/>
)}
</div>
);
);
}
const breadcrumbs = getBreadcrumbs();
return (
<div className="asset-browser">
<div className="asset-browser-header">
<h3>{t.title}</h3>
</div>
<div className="asset-browser-content">
<ResizablePanel
direction="horizontal"
defaultSize={200}
minSize={150}
maxSize={400}
leftOrTop={
<div className="asset-browser-tree">
<FileTree
rootPath={projectPath}
onSelectFile={handleFolderSelect}
selectedPath={currentPath}
/>
</div>
}
rightOrBottom={
<div className="asset-browser-list">
<div className="asset-browser-breadcrumb">
{breadcrumbs.map((crumb, index) => (
<span key={crumb.path}>
<span
className="breadcrumb-item"
onClick={() => {
setCurrentPath(crumb.path);
loadAssets(crumb.path);
}}
>
{crumb.name}
</span>
{index < breadcrumbs.length - 1 && <span className="breadcrumb-separator"> / </span>}
</span>
))}
</div>
<div className="asset-browser-toolbar">
<input
type="text"
className="asset-search"
placeholder={t.search}
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
</div>
{loading ? (
<div className="asset-browser-loading">
<p>{t.loading}</p>
</div>
) : filteredAssets.length === 0 ? (
<div className="asset-browser-empty">
<p>{t.empty}</p>
</div>
) : (
<div className="asset-list">
{filteredAssets.map((asset, index) => (
<div
key={index}
className={`asset-item ${selectedPath === asset.path ? 'selected' : ''}`}
onClick={() => handleAssetClick(asset)}
onDoubleClick={() => handleAssetDoubleClick(asset)}
onContextMenu={(e) => handleContextMenu(e, asset)}
>
{getFileIcon(asset)}
<div className="asset-name" title={asset.name}>
{asset.name}
</div>
<div className="asset-type">
{asset.type === 'folder' ? t.folder : (asset.extension || t.file)}
</div>
</div>
))}
</div>
)}
</div>
}
/>
</div>
{contextMenu && (
<ContextMenu
items={getContextMenuItems(contextMenu.asset)}
position={contextMenu.position}
onClose={() => setContextMenu(null)}
/>
)}
</div>
);
}

234
packages/editor-app/src/components/AssetPicker.tsx
View File

@@ -15,127 +15,127 @@ interface AssetPickerProps {
* 用于选择项目中的资产文件
*/
export function AssetPicker({ value, onChange, projectPath, filter = 'btree', label }: AssetPickerProps) {
const [assets, setAssets] = useState<string[]>([]);
const [loading, setLoading] = useState(false);
const [assets, setAssets] = useState<string[]>([]);
const [loading, setLoading] = useState(false);
useEffect(() => {
if (projectPath) {
loadAssets();
}
}, [projectPath]);
const loadAssets = async () => {
if (!projectPath) return;
setLoading(true);
try {
if (filter === 'btree') {
const btrees = await TauriAPI.scanBehaviorTrees(projectPath);
setAssets(btrees);
}
} catch (error) {
console.error('Failed to load assets:', error);
setAssets([]);
} finally {
setLoading(false);
}
};
const handleBrowse = async () => {
try {
if (filter === 'btree') {
const path = await TauriAPI.openBehaviorTreeDialog();
if (path && projectPath) {
const behaviorsPath = `${projectPath}\\.ecs\\behaviors\\`.replace(/\\/g, '\\\\');
const relativePath = path.replace(behaviorsPath, '')
.replace(/\\/g, '/')
.replace('.btree', '');
onChange(relativePath);
await loadAssets();
useEffect(() => {
if (projectPath) {
loadAssets();
}
}
} catch (error) {
console.error('Failed to browse asset:', error);
}
};
}, [projectPath]);
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
{label && (
<label style={{ fontSize: '11px', color: '#aaa', fontWeight: '500' }}>
{label}
</label>
)}
<div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
<select
value={value}
onChange={(e) => onChange(e.target.value)}
disabled={loading || !projectPath}
style={{
flex: 1,
padding: '4px 8px',
backgroundColor: '#1e1e1e',
border: '1px solid #3e3e42',
borderRadius: '3px',
color: '#cccccc',
fontSize: '12px',
cursor: loading || !projectPath ? 'not-allowed' : 'pointer'
}}
>
<option value="">{loading ? '加载中...' : '选择资产...'}</option>
{assets.map(asset => (
<option key={asset} value={asset}>
{asset}
</option>
))}
</select>
<button
onClick={loadAssets}
disabled={loading || !projectPath}
style={{
padding: '4px 8px',
backgroundColor: '#0e639c',
border: 'none',
borderRadius: '3px',
color: '#fff',
cursor: loading || !projectPath ? 'not-allowed' : 'pointer',
display: 'flex',
alignItems: 'center',
opacity: loading || !projectPath ? 0.5 : 1
}}
title="刷新资产列表"
>
<RefreshCw size={14} />
</button>
<button
onClick={handleBrowse}
disabled={loading || !projectPath}
style={{
padding: '4px 8px',
backgroundColor: '#0e639c',
border: 'none',
borderRadius: '3px',
color: '#fff',
cursor: loading || !projectPath ? 'not-allowed' : 'pointer',
display: 'flex',
alignItems: 'center',
opacity: loading || !projectPath ? 0.5 : 1
}}
title="浏览文件..."
>
<Folder size={14} />
</button>
</div>
{!projectPath && (
<div style={{ fontSize: '10px', color: '#ff6b6b', marginTop: '2px' }}>
const loadAssets = async () => {
if (!projectPath) return;
setLoading(true);
try {
if (filter === 'btree') {
const btrees = await TauriAPI.scanBehaviorTrees(projectPath);
setAssets(btrees);
}
} catch (error) {
console.error('Failed to load assets:', error);
setAssets([]);
} finally {
setLoading(false);
}
};
const handleBrowse = async () => {
try {
if (filter === 'btree') {
const path = await TauriAPI.openBehaviorTreeDialog();
if (path && projectPath) {
const behaviorsPath = `${projectPath}\\.ecs\\behaviors\\`.replace(/\\/g, '\\\\');
const relativePath = path.replace(behaviorsPath, '')
.replace(/\\/g, '/')
.replace('.btree', '');
onChange(relativePath);
await loadAssets();
}
}
} catch (error) {
console.error('Failed to browse asset:', error);
}
};
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
{label && (
<label style={{ fontSize: '11px', color: '#aaa', fontWeight: '500' }}>
{label}
</label>
)}
<div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
<select
value={value}
onChange={(e) => onChange(e.target.value)}
disabled={loading || !projectPath}
style={{
flex: 1,
padding: '4px 8px',
backgroundColor: '#1e1e1e',
border: '1px solid #3e3e42',
borderRadius: '3px',
color: '#cccccc',
fontSize: '12px',
cursor: loading || !projectPath ? 'not-allowed' : 'pointer'
}}
>
<option value="">{loading ? '加载中...' : '选择资产...'}</option>
{assets.map((asset) => (
<option key={asset} value={asset}>
{asset}
</option>
))}
</select>
<button
onClick={loadAssets}
disabled={loading || !projectPath}
style={{
padding: '4px 8px',
backgroundColor: '#0e639c',
border: 'none',
borderRadius: '3px',
color: '#fff',
cursor: loading || !projectPath ? 'not-allowed' : 'pointer',
display: 'flex',
alignItems: 'center',
opacity: loading || !projectPath ? 0.5 : 1
}}
title="刷新资产列表"
>
<RefreshCw size={14} />
</button>
<button
onClick={handleBrowse}
disabled={loading || !projectPath}
style={{
padding: '4px 8px',
backgroundColor: '#0e639c',
border: 'none',
borderRadius: '3px',
color: '#fff',
cursor: loading || !projectPath ? 'not-allowed' : 'pointer',
display: 'flex',
alignItems: 'center',
opacity: loading || !projectPath ? 0.5 : 1
}}
title="浏览文件..."
>
<Folder size={14} />
</button>
</div>
{!projectPath && (
<div style={{ fontSize: '10px', color: '#ff6b6b', marginTop: '2px' }}>
未加载项目
</div>
)}
{value && assets.length > 0 && !assets.includes(value) && (
<div style={{ fontSize: '10px', color: '#ffa726', marginTop: '2px' }}>
</div>
)}
{value && assets.length > 0 && !assets.includes(value) && (
<div style={{ fontSize: '10px', color: '#ffa726', marginTop: '2px' }}>
警告: 资产 "{value}" 不存在于项目中
</div>
)}
</div>
)}
</div>
);
);
}

8
packages/editor-app/src/components/AssetPickerDialog.tsx
View File

@@ -1,5 +1,5 @@
import { useState, useEffect } from 'react';
import { X, Folder, File, Search, ArrowLeft, Grid, List, FileCode } from 'lucide-react';
import { X, Folder, Search, ArrowLeft, Grid, List, FileCode } from 'lucide-react';
import { TauriAPI, DirectoryEntry } from '../api/tauri';
import '../styles/AssetPickerDialog.css';
@@ -86,7 +86,7 @@ export function AssetPickerDialog({ projectPath, fileExtension, onSelect, onClos
modified: entry.modified
};
})
.filter(item => item.isDir || item.extension === fileExtension)
.filter((item) => item.isDir || item.extension === fileExtension)
.sort((a, b) => {
if (a.isDir === b.isDir) return a.name.localeCompare(b.name);
return a.isDir ? -1 : 1;
@@ -102,7 +102,7 @@ export function AssetPickerDialog({ projectPath, fileExtension, onSelect, onClos
};
// 过滤搜索结果
const filteredAssets = assets.filter(item =>
const filteredAssets = assets.filter((item) =>
item.name.toLowerCase().includes(searchQuery.toLowerCase())
);
@@ -189,7 +189,7 @@ export function AssetPickerDialog({ projectPath, fileExtension, onSelect, onClos
const currentPathNormalized = currentPath.replace(/\\/g, '/');
const relative = currentPathNormalized.replace(basePathNormalized, '');
const parts = relative.split('/').filter(p => p);
const parts = relative.split('/').filter((p) => p);
// 根路径名称（显示"行为树"或"Assets"）
const rootName = assetBasePath

460
packages/editor-app/src/components/BehaviorTreeBlackboard.tsx
View File

@@ -167,7 +167,7 @@ export const BehaviorTreeBlackboard: React.FC<BehaviorTreeBlackboardProps> = ({
};
const toggleGroup = (groupName: string) => {
setCollapsedGroups(prev => {
setCollapsedGroups((prev) => {
const newSet = new Set(prev);
if (newSet.has(groupName)) {
newSet.delete(groupName);
@@ -416,7 +416,7 @@ export const BehaviorTreeBlackboard: React.FC<BehaviorTreeBlackboardProps> = ({
</div>
)}
{groupNames.map(groupName => {
{groupNames.map((groupName) => {
const isCollapsed = collapsedGroups.has(groupName);
const groupVars = groupedVariables[groupName];
@@ -451,246 +451,246 @@ export const BehaviorTreeBlackboard: React.FC<BehaviorTreeBlackboardProps> = ({
)}
{!isCollapsed && groupVars.map(({ fullKey: key, varName, value }) => {
const type = getVariableType(value);
const isEditing = editingKey === key;
const type = getVariableType(value);
const isEditing = editingKey === key;
const handleDragStart = (e: React.DragEvent) => {
const variableData = {
variableName: key,
variableValue: value,
variableType: type
};
e.dataTransfer.setData('application/blackboard-variable', JSON.stringify(variableData));
e.dataTransfer.effectAllowed = 'copy';
};
const handleDragStart = (e: React.DragEvent) => {
const variableData = {
variableName: key,
variableValue: value,
variableType: type
};
e.dataTransfer.setData('application/blackboard-variable', JSON.stringify(variableData));
e.dataTransfer.effectAllowed = 'copy';
};
const typeColor =
const typeColor =
type === 'number' ? '#4ec9b0' :
type === 'boolean' ? '#569cd6' :
type === 'object' ? '#ce9178' : '#d4d4d4';
type === 'boolean' ? '#569cd6' :
type === 'object' ? '#ce9178' : '#d4d4d4';
const displayValue = type === 'object' ?
JSON.stringify(value) :
String(value);
const displayValue = type === 'object' ?
JSON.stringify(value) :
String(value);
const truncatedValue = displayValue.length > 30 ?
displayValue.substring(0, 30) + '...' :
displayValue;
const truncatedValue = displayValue.length > 30 ?
displayValue.substring(0, 30) + '...' :
displayValue;
return (
<div
key={key}
draggable={!isEditing}
onDragStart={handleDragStart}
style={{
marginBottom: '6px',
padding: '6px 8px',
backgroundColor: '#2d2d2d',
borderRadius: '3px',
borderLeft: `3px solid ${typeColor}`,
cursor: isEditing ? 'default' : 'grab'
}}
>
{isEditing ? (
<div>
<div style={{
fontSize: '10px',
color: '#666',
marginBottom: '4px'
}}>
Name
</div>
<input
type="text"
value={editingNewKey}
onChange={(e) => setEditingNewKey(e.target.value)}
return (
<div
key={key}
draggable={!isEditing}
onDragStart={handleDragStart}
style={{
width: '100%',
padding: '4px',
marginBottom: '4px',
backgroundColor: '#1e1e1e',
border: '1px solid #3c3c3c',
borderRadius: '2px',
color: '#9cdcfe',
fontSize: '11px',
fontFamily: 'monospace'
}}
placeholder="Variable name (e.g., player.health)"
/>
<div style={{
fontSize: '10px',
color: '#666',
marginBottom: '4px'
}}>
Type
</div>
<select
value={editType}
onChange={(e) => setEditType(e.target.value as BlackboardVariable['type'])}
style={{
width: '100%',
padding: '4px',
marginBottom: '4px',
backgroundColor: '#1e1e1e',
border: '1px solid #3c3c3c',
borderRadius: '2px',
color: '#cccccc',
fontSize: '10px'
marginBottom: '6px',
padding: '6px 8px',
backgroundColor: '#2d2d2d',
borderRadius: '3px',
borderLeft: `3px solid ${typeColor}`,
cursor: isEditing ? 'default' : 'grab'
}}
>
<option value="string">String</option>
<option value="number">Number</option>
<option value="boolean">Boolean</option>
<option value="object">Object (JSON)</option>
</select>
<div style={{
fontSize: '10px',
color: '#666',
marginBottom: '4px'
}}>
{isEditing ? (
<div>
<div style={{
fontSize: '10px',
color: '#666',
marginBottom: '4px'
}}>
Name
</div>
<input
type="text"
value={editingNewKey}
onChange={(e) => setEditingNewKey(e.target.value)}
style={{
width: '100%',
padding: '4px',
marginBottom: '4px',
backgroundColor: '#1e1e1e',
border: '1px solid #3c3c3c',
borderRadius: '2px',
color: '#9cdcfe',
fontSize: '11px',
fontFamily: 'monospace'
}}
placeholder="Variable name (e.g., player.health)"
/>
<div style={{
fontSize: '10px',
color: '#666',
marginBottom: '4px'
}}>
Type
</div>
<select
value={editType}
onChange={(e) => setEditType(e.target.value as BlackboardVariable['type'])}
style={{
width: '100%',
padding: '4px',
marginBottom: '4px',
backgroundColor: '#1e1e1e',
border: '1px solid #3c3c3c',
borderRadius: '2px',
color: '#cccccc',
fontSize: '10px'
}}
>
<option value="string">String</option>
<option value="number">Number</option>
<option value="boolean">Boolean</option>
<option value="object">Object (JSON)</option>
</select>
<div style={{
fontSize: '10px',
color: '#666',
marginBottom: '4px'
}}>
Value
</div>
<textarea
value={editValue}
onChange={(e) => setEditValue(e.target.value)}
style={{
width: '100%',
minHeight: editType === 'object' ? '60px' : '24px',
padding: '4px',
backgroundColor: '#1e1e1e',
border: '1px solid #0e639c',
borderRadius: '2px',
color: '#cccccc',
fontSize: '11px',
fontFamily: 'monospace',
resize: 'vertical',
marginBottom: '4px'
}}
/>
<div style={{ display: 'flex', gap: '4px' }}>
<button
onClick={() => handleSaveEdit(key)}
style={{
padding: '3px 8px',
backgroundColor: '#0e639c',
border: 'none',
borderRadius: '2px',
color: '#fff',
cursor: 'pointer',
fontSize: '10px'
}}
>
</div>
<textarea
value={editValue}
onChange={(e) => setEditValue(e.target.value)}
style={{
width: '100%',
minHeight: editType === 'object' ? '60px' : '24px',
padding: '4px',
backgroundColor: '#1e1e1e',
border: '1px solid #0e639c',
borderRadius: '2px',
color: '#cccccc',
fontSize: '11px',
fontFamily: 'monospace',
resize: 'vertical',
marginBottom: '4px'
}}
/>
<div style={{ display: 'flex', gap: '4px' }}>
<button
onClick={() => handleSaveEdit(key)}
style={{
padding: '3px 8px',
backgroundColor: '#0e639c',
border: 'none',
borderRadius: '2px',
color: '#fff',
cursor: 'pointer',
fontSize: '10px'
}}
>
Save
</button>
<button
onClick={() => setEditingKey(null)}
style={{
padding: '3px 8px',
backgroundColor: '#3c3c3c',
border: 'none',
borderRadius: '2px',
color: '#ccc',
cursor: 'pointer',
fontSize: '10px'
}}
>
</button>
<button
onClick={() => setEditingKey(null)}
style={{
padding: '3px 8px',
backgroundColor: '#3c3c3c',
border: 'none',
borderRadius: '2px',
color: '#ccc',
cursor: 'pointer',
fontSize: '10px'
}}
>
Cancel
</button>
</div>
</div>
) : (
<div style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
gap: '8px'
}}>
<div style={{ flex: 1, minWidth: 0 }}>
<div style={{
fontSize: '11px',
color: '#9cdcfe',
fontWeight: 'bold',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
display: 'flex',
alignItems: 'center',
gap: '4px'
}}>
{varName} <span style={{
color: '#666',
fontWeight: 'normal',
fontSize: '10px'
}}>({type})</span>
{viewMode === 'local' && isModified(key) && (
<span style={{
fontSize: '9px',
color: '#ffbb00',
backgroundColor: 'rgba(255, 187, 0, 0.15)',
padding: '1px 4px',
borderRadius: '2px'
}} title="运行时修改的值，停止后会恢复">
</button>
</div>
</div>
) : (
<div style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
gap: '8px'
}}>
<div style={{ flex: 1, minWidth: 0 }}>
<div style={{
fontSize: '11px',
color: '#9cdcfe',
fontWeight: 'bold',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
display: 'flex',
alignItems: 'center',
gap: '4px'
}}>
{varName} <span style={{
color: '#666',
fontWeight: 'normal',
fontSize: '10px'
}}>({type})</span>
{viewMode === 'local' && isModified(key) && (
<span style={{
fontSize: '9px',
color: '#ffbb00',
backgroundColor: 'rgba(255, 187, 0, 0.15)',
padding: '1px 4px',
borderRadius: '2px'
}} title="运行时修改的值，停止后会恢复">
运行时
</span>
)}
</div>
<div style={{
fontSize: '10px',
fontFamily: 'monospace',
color: typeColor,
marginTop: '2px',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
backgroundColor: (viewMode === 'local' && isModified(key)) ? 'rgba(255, 187, 0, 0.1)' : 'transparent',
padding: '1px 3px',
borderRadius: '2px'
}} title={(viewMode === 'local' && isModified(key)) ? `初始值: ${JSON.stringify(initialVariables?.[key])}\n当前值: ${displayValue}` : displayValue}>
{truncatedValue}
</div>
</span>
)}
</div>
<div style={{
fontSize: '10px',
fontFamily: 'monospace',
color: typeColor,
marginTop: '2px',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
backgroundColor: (viewMode === 'local' && isModified(key)) ? 'rgba(255, 187, 0, 0.1)' : 'transparent',
padding: '1px 3px',
borderRadius: '2px'
}} title={(viewMode === 'local' && isModified(key)) ? `初始值: ${JSON.stringify(initialVariables?.[key])}\n当前值: ${displayValue}` : displayValue}>
{truncatedValue}
</div>
</div>
<div style={{
display: 'flex',
gap: '2px',
flexShrink: 0
}}>
<button
onClick={() => handleStartEdit(key, value)}
style={{
padding: '2px',
backgroundColor: 'transparent',
border: 'none',
color: '#ccc',
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}
title="Edit"
>
<Edit2 size={12} />
</button>
<button
onClick={() => currentOnDelete && currentOnDelete(key)}
style={{
padding: '2px',
backgroundColor: 'transparent',
border: 'none',
color: '#f44336',
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}
title="Delete"
>
<Trash2 size={12} />
</button>
</div>
</div>
)}
</div>
<div style={{
display: 'flex',
gap: '2px',
flexShrink: 0
}}>
<button
onClick={() => handleStartEdit(key, value)}
style={{
padding: '2px',
backgroundColor: 'transparent',
border: 'none',
color: '#ccc',
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}
title="Edit"
>
<Edit2 size={12} />
</button>
<button
onClick={() => currentOnDelete && currentOnDelete(key)}
style={{
padding: '2px',
backgroundColor: 'transparent',
border: 'none',
color: '#f44336',
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}
title="Delete"
>
<Trash2 size={12} />
</button>
</div>
</div>
)}
</div>
);
);
})}
</div>
);
@@ -753,8 +753,8 @@ export const BehaviorTreeBlackboard: React.FC<BehaviorTreeBlackboardProps> = ({
<textarea
placeholder={
newType === 'object' ? '{"key": "value"}' :
newType === 'boolean' ? 'true or false' :
newType === 'number' ? '0' : 'value'
newType === 'boolean' ? 'true or false' :
newType === 'number' ? '0' : 'value'
}
value={newValue}
onChange={(e) => setNewValue(e.target.value)}

1782
packages/editor-app/src/components/BehaviorTreeEditor.tsx
View File

File diff suppressed because it is too large Load Diff

6
packages/editor-app/src/components/BehaviorTreeExecutionPanel.tsx
View File

@@ -1,5 +1,5 @@
import React, { useEffect, useRef, useState } from 'react';
import { Play, Pause, Square, RotateCcw, Trash2, Copy } from 'lucide-react';
import { Trash2, Copy } from 'lucide-react';
interface ExecutionLog {
timestamp: number;
@@ -59,14 +59,14 @@ export const BehaviorTreeExecutionPanel: React.FC<BehaviorTreeExecutionPanelProp
};
const handleCopyLogs = () => {
const logsText = logs.map(log =>
const logsText = logs.map((log) =>
`${formatTime(log.timestamp)} ${getLevelIcon(log.level)} ${log.message}`
).join('\n');
navigator.clipboard.writeText(logsText).then(() => {
setCopySuccess(true);
setTimeout(() => setCopySuccess(false), 2000);
}).catch(err => {
}).catch((err) => {
console.error('复制失败:', err);
});
};

42
packages/editor-app/src/components/BehaviorTreeNodePalette.tsx
View File

@@ -99,15 +99,15 @@ export const BehaviorTreeNodePalette: React.FC<BehaviorTreeNodePaletteProps> = (
// 按类别分组（排除根节点类别）
const categories = useMemo(() =>
['all', ...new Set(allTemplates
.filter(t => t.category !== '根节点')
.map(t => t.category))]
.filter((t) => t.category !== '根节点')
.map((t) => t.category))]
, [allTemplates]);
const filteredTemplates = useMemo(() =>
(selectedCategory === 'all'
? allTemplates
: allTemplates.filter(t => t.category === selectedCategory))
.filter(t => t.category !== '根节点')
: allTemplates.filter((t) => t.category === selectedCategory))
.filter((t) => t.category !== '根节点')
, [allTemplates, selectedCategory]);
const handleNodeClick = (template: NodeTemplate) => {
@@ -158,7 +158,7 @@ export const BehaviorTreeNodePalette: React.FC<BehaviorTreeNodePaletteProps> = (
flexWrap: 'wrap',
gap: '5px'
}}>
{categories.map(category => (
{categories.map((category) => (
<button
key={category}
onClick={() => setSelectedCategory(category)}
@@ -245,22 +245,22 @@ export const BehaviorTreeNodePalette: React.FC<BehaviorTreeNodePaletteProps> = (
)}
</div>
</div>
<div style={{
fontSize: '12px',
color: '#999',
lineHeight: '1.4',
pointerEvents: 'none'
}}>
{template.description}
</div>
<div style={{
marginTop: '5px',
fontSize: '11px',
color: '#666',
pointerEvents: 'none'
}}>
{template.category}
</div>
<div style={{
fontSize: '12px',
color: '#999',
lineHeight: '1.4',
pointerEvents: 'none'
}}>
{template.description}
</div>
<div style={{
marginTop: '5px',
fontSize: '11px',
color: '#666',
pointerEvents: 'none'
}}>
{template.category}
</div>
</div>
);
})}

20
packages/editor-app/src/components/BehaviorTreeWindow.tsx
View File

@@ -1,7 +1,7 @@
import { useState, useEffect, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { TreePine, X, Settings, Clipboard, Save, FolderOpen, Maximize2, Minimize2, Download, FilePlus } from 'lucide-react';
import { save, open, ask, message } from '@tauri-apps/plugin-dialog';
import { open, ask, message } from '@tauri-apps/plugin-dialog';
import { invoke } from '@tauri-apps/api/core';
import { Core } from '@esengine/ecs-framework';
import { BehaviorTreeEditor } from './BehaviorTreeEditor';
@@ -124,7 +124,7 @@ export const BehaviorTreeWindow: React.FC<BehaviorTreeWindowProps> = ({
const globalBlackboard = Core.services.resolve(GlobalBlackboardService);
const allVars = globalBlackboard.getAllVariables();
const varsObject: Record<string, any> = {};
allVars.forEach(v => {
allVars.forEach((v) => {
varsObject[v.name] = v.value;
});
setGlobalVariables(varsObject);
@@ -276,7 +276,7 @@ export const BehaviorTreeWindow: React.FC<BehaviorTreeWindowProps> = ({
const allVars = Core.services.resolve(GlobalBlackboardService).getAllVariables();
const varsObject: Record<string, any> = {};
allVars.forEach(v => {
allVars.forEach((v) => {
varsObject[v.name] = v.value;
});
setGlobalVariables(varsObject);
@@ -309,7 +309,7 @@ export const BehaviorTreeWindow: React.FC<BehaviorTreeWindowProps> = ({
globalBlackboard.setValue(key, value, true);
const allVars = globalBlackboard.getAllVariables();
const varsObject: Record<string, any> = {};
allVars.forEach(v => {
allVars.forEach((v) => {
varsObject[v.name] = v.value;
});
setGlobalVariables(varsObject);
@@ -321,7 +321,7 @@ export const BehaviorTreeWindow: React.FC<BehaviorTreeWindowProps> = ({
globalBlackboard.defineVariable(key, type, value);
const allVars = globalBlackboard.getAllVariables();
const varsObject: Record<string, any> = {};
allVars.forEach(v => {
allVars.forEach((v) => {
varsObject[v.name] = v.value;
});
setGlobalVariables(varsObject);
@@ -333,7 +333,7 @@ export const BehaviorTreeWindow: React.FC<BehaviorTreeWindowProps> = ({
globalBlackboard.removeVariable(key);
const allVars = globalBlackboard.getAllVariables();
const varsObject: Record<string, any> = {};
allVars.forEach(v => {
allVars.forEach((v) => {
varsObject[v.name] = v.value;
});
setGlobalVariables(varsObject);
@@ -352,7 +352,7 @@ export const BehaviorTreeWindow: React.FC<BehaviorTreeWindowProps> = ({
}
}
let saveFilePath = currentFilePath;
const saveFilePath = currentFilePath;
// 如果没有当前文件路径，打开自定义保存对话框
if (!saveFilePath) {
@@ -788,7 +788,7 @@ export const BehaviorTreeWindow: React.FC<BehaviorTreeWindowProps> = ({
<button
onClick={() => setIsFullscreen(!isFullscreen)}
className="behavior-tree-toolbar-btn"
title={isFullscreen ? "退出全屏" : "全屏"}
title={isFullscreen ? '退出全屏' : '全屏'}
>
{isFullscreen ? <Minimize2 size={16} /> : <Maximize2 size={16} />}
</button>
@@ -827,7 +827,7 @@ export const BehaviorTreeWindow: React.FC<BehaviorTreeWindowProps> = ({
const varName = node.data.variableName || '';
const varValue = blackboardVariables[varName];
const varType = typeof varValue === 'number' ? 'number' :
typeof varValue === 'boolean' ? 'boolean' : 'string';
typeof varValue === 'boolean' ? 'boolean' : 'string';
data = {
...node.data,
@@ -915,7 +915,7 @@ export const BehaviorTreeWindow: React.FC<BehaviorTreeWindowProps> = ({
if (selectedNode.data.nodeType === 'blackboard-variable' && propertyName === 'variableName') {
const newVarValue = blackboardVariables[value];
const newVarType = typeof newVarValue === 'number' ? 'number' :
typeof newVarValue === 'boolean' ? 'boolean' : 'string';
typeof newVarValue === 'boolean' ? 'boolean' : 'string';
updateNodes((nodes: any) => nodes.map((node: any) => {
if (node.id === selectedNode.id) {

44
packages/editor-app/src/components/ConfirmDialog.tsx
View File

@@ -11,27 +11,27 @@ interface ConfirmDialogProps {
}
export function ConfirmDialog({ title, message, confirmText, cancelText, onConfirm, onCancel }: ConfirmDialogProps) {
return (
<div className="confirm-dialog-overlay" onClick={onCancel}>
<div className="confirm-dialog" onClick={(e) => e.stopPropagation()}>
<div className="confirm-dialog-header">
<h2>{title}</h2>
<button className="close-btn" onClick={onCancel}>
<X size={16} />
</button>
return (
<div className="confirm-dialog-overlay" onClick={onCancel}>
<div className="confirm-dialog" onClick={(e) => e.stopPropagation()}>
<div className="confirm-dialog-header">
<h2>{title}</h2>
<button className="close-btn" onClick={onCancel}>
<X size={16} />
</button>
</div>
<div className="confirm-dialog-content">
<p>{message}</p>
</div>
<div className="confirm-dialog-footer">
<button className="confirm-dialog-btn cancel" onClick={onCancel}>
{cancelText}
</button>
<button className="confirm-dialog-btn confirm" onClick={onConfirm}>
{confirmText}
</button>
</div>
</div>
</div>
<div className="confirm-dialog-content">
<p>{message}</p>
</div>
<div className="confirm-dialog-footer">
<button className="confirm-dialog-btn cancel" onClick={onCancel}>
{cancelText}
</button>
<button className="confirm-dialog-btn confirm" onClick={onConfirm}>
{confirmText}
</button>
</div>
</div>
</div>
);
);
}

18
packages/editor-app/src/components/ConsolePanel.tsx
View File

@@ -162,7 +162,7 @@ export function ConsolePanel({ logService }: ConsolePanelProps) {
setLogs(logService.getLogs().slice(-MAX_LOGS));
const unsubscribe = logService.subscribe((entry) => {
setLogs(prev => {
setLogs((prev) => {
const newLogs = [...prev, entry];
if (newLogs.length > MAX_LOGS) {
return newLogs.slice(-MAX_LOGS);
@@ -316,7 +316,7 @@ export function ConsolePanel({ logService }: ConsolePanelProps) {
}
// 清理不再需要的缓存（日志被删除）
const logIds = new Set(logs.map(log => log.id));
const logIds = new Set(logs.map((log) => log.id));
for (const cachedId of cache.keys()) {
if (!logIds.has(cachedId)) {
cache.delete(cachedId);
@@ -327,7 +327,7 @@ export function ConsolePanel({ logService }: ConsolePanelProps) {
}, [logs, extractJSON]);
const filteredLogs = useMemo(() => {
return logs.filter(log => {
return logs.filter((log) => {
if (!levelFilter.has(log.level)) return false;
if (showRemoteOnly && log.source !== 'remote') return false;
if (filter && !log.message.toLowerCase().includes(filter.toLowerCase())) {
@@ -357,14 +357,14 @@ export function ConsolePanel({ logService }: ConsolePanelProps) {
};
const levelCounts = useMemo(() => ({
[LogLevel.Debug]: logs.filter(l => l.level === LogLevel.Debug).length,
[LogLevel.Info]: logs.filter(l => l.level === LogLevel.Info).length,
[LogLevel.Warn]: logs.filter(l => l.level === LogLevel.Warn).length,
[LogLevel.Error]: logs.filter(l => l.level === LogLevel.Error || l.level === LogLevel.Fatal).length
[LogLevel.Debug]: logs.filter((l) => l.level === LogLevel.Debug).length,
[LogLevel.Info]: logs.filter((l) => l.level === LogLevel.Info).length,
[LogLevel.Warn]: logs.filter((l) => l.level === LogLevel.Warn).length,
[LogLevel.Error]: logs.filter((l) => l.level === LogLevel.Error || l.level === LogLevel.Fatal).length
}), [logs]);
const remoteLogCount = useMemo(() =>
logs.filter(l => l.source === 'remote').length
logs.filter((l) => l.source === 'remote').length
, [logs]);
return (
@@ -442,7 +442,7 @@ export function ConsolePanel({ logService }: ConsolePanelProps) {
<p>No logs to display</p>
</div>
) : (
filteredLogs.map(log => (
filteredLogs.map((log) => (
<LogEntryItem
key={log.id}
log={log}

144
packages/editor-app/src/components/ContextMenu.tsx
View File

@@ -16,85 +16,85 @@ interface ContextMenuProps {
}
export function ContextMenu({ items, position, onClose }: ContextMenuProps) {
const menuRef = useRef<HTMLDivElement>(null);
const [adjustedPosition, setAdjustedPosition] = useState(position);
const menuRef = useRef<HTMLDivElement>(null);
const [adjustedPosition, setAdjustedPosition] = useState(position);
useEffect(() => {
if (menuRef.current) {
const menu = menuRef.current;
const rect = menu.getBoundingClientRect();
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
useEffect(() => {
if (menuRef.current) {
const menu = menuRef.current;
const rect = menu.getBoundingClientRect();
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
let x = position.x;
let y = position.y;
let x = position.x;
let y = position.y;
if (x + rect.width > viewportWidth) {
x = Math.max(0, viewportWidth - rect.width - 10);
}
if (x + rect.width > viewportWidth) {
x = Math.max(0, viewportWidth - rect.width - 10);
}
if (y + rect.height > viewportHeight) {
y = Math.max(0, viewportHeight - rect.height - 10);
}
if (y + rect.height > viewportHeight) {
y = Math.max(0, viewportHeight - rect.height - 10);
}
if (x !== position.x || y !== position.y) {
setAdjustedPosition({ x, y });
}
}
}, [position]);
useEffect(() => {
const handleClickOutside = (e: MouseEvent) => {
if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
onClose();
}
};
const handleEscape = (e: KeyboardEvent) => {
if (e.key === 'Escape') {
onClose();
}
};
document.addEventListener('mousedown', handleClickOutside);
document.addEventListener('keydown', handleEscape);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
document.removeEventListener('keydown', handleEscape);
};
}, [onClose]);
return (
<div
ref={menuRef}
className="context-menu"
style={{
left: `${adjustedPosition.x}px`,
top: `${adjustedPosition.y}px`
}}
>
{items.map((item, index) => {
if (item.separator) {
return <div key={index} className="context-menu-separator" />;
if (x !== position.x || y !== position.y) {
setAdjustedPosition({ x, y });
}
}
}, [position]);
return (
<div
key={index}
className={`context-menu-item ${item.disabled ? 'disabled' : ''}`}
onClick={() => {
if (!item.disabled) {
item.onClick();
useEffect(() => {
const handleClickOutside = (e: MouseEvent) => {
if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
onClose();
}
}
};
const handleEscape = (e: KeyboardEvent) => {
if (e.key === 'Escape') {
onClose();
}
};
document.addEventListener('mousedown', handleClickOutside);
document.addEventListener('keydown', handleEscape);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
document.removeEventListener('keydown', handleEscape);
};
}, [onClose]);
return (
<div
ref={menuRef}
className="context-menu"
style={{
left: `${adjustedPosition.x}px`,
top: `${adjustedPosition.y}px`
}}
>
{item.icon && <span className="context-menu-icon">{item.icon}</span>}
<span className="context-menu-label">{item.label}</span>
</div>
);
})}
</div>
);
>
{items.map((item, index) => {
if (item.separator) {
return <div key={index} className="context-menu-separator" />;
}
return (
<div
key={index}
className={`context-menu-item ${item.disabled ? 'disabled' : ''}`}
onClick={() => {
if (!item.disabled) {
item.onClick();
onClose();
}
}}
>
{item.icon && <span className="context-menu-icon">{item.icon}</span>}
<span className="context-menu-label">{item.label}</span>
</div>
);
})}
</div>
);
}

982
packages/editor-app/src/components/EntityInspector.tsx
View File

File diff suppressed because it is too large Load Diff

36
packages/editor-app/src/components/ErrorDialog.tsx
View File

@@ -8,24 +8,24 @@ interface ErrorDialogProps {
}
export function ErrorDialog({ title, message, onClose }: ErrorDialogProps) {
return (
<div className="error-dialog-overlay" onClick={onClose}>
<div className="error-dialog" onClick={(e) => e.stopPropagation()}>
<div className="error-dialog-header">
<h2>{title}</h2>
<button className="close-btn" onClick={onClose}>
<X size={16} />
</button>
</div>
<div className="error-dialog-content">
<p>{message}</p>
</div>
<div className="error-dialog-footer">
<button className="error-dialog-btn" onClick={onClose}>
return (
<div className="error-dialog-overlay" onClick={onClose}>
<div className="error-dialog" onClick={(e) => e.stopPropagation()}>
<div className="error-dialog-header">
<h2>{title}</h2>
<button className="close-btn" onClick={onClose}>
<X size={16} />
</button>
</div>
<div className="error-dialog-content">
<p>{message}</p>
</div>
<div className="error-dialog-footer">
<button className="error-dialog-btn" onClick={onClose}>
确定
</button>
</button>
</div>
</div>
</div>
</div>
</div>
);
);
}

4
packages/editor-app/src/components/ExportRuntimeDialog.tsx
View File

@@ -1,5 +1,5 @@
import { useState, useEffect } from 'react';
import { X, FileJson, Binary, Info, File, FolderTree, FolderOpen, Code } from 'lucide-react';
import { X, File, FolderTree, FolderOpen } from 'lucide-react';
import { open } from '@tauri-apps/plugin-dialog';
import '../styles/ExportRuntimeDialog.css';
@@ -66,7 +66,7 @@ export const ExportRuntimeDialog: React.FC<ExportRuntimeDialogProps> = ({
setSelectAll(true);
const newFormats = new Map<string, 'json' | 'binary'>();
availableFiles.forEach(file => {
availableFiles.forEach((file) => {
newFormats.set(file, 'binary');
});
setFileFormats(newFormats);

262
packages/editor-app/src/components/FileTree.tsx
View File

@@ -19,146 +19,146 @@ interface FileTreeProps {
}
export function FileTree({ rootPath, onSelectFile, selectedPath }: FileTreeProps) {
const [tree, setTree] = useState<TreeNode[]>([]);
const [loading, setLoading] = useState(false);
const [tree, setTree] = useState<TreeNode[]>([]);
const [loading, setLoading] = useState(false);
useEffect(() => {
if (rootPath) {
loadRootDirectory(rootPath);
} else {
setTree([]);
}
}, [rootPath]);
const loadRootDirectory = async (path: string) => {
setLoading(true);
try {
const entries = await TauriAPI.listDirectory(path);
const children = entriesToNodes(entries);
// 创建根节点
const rootName = path.split(/[/\\]/).filter(p => p).pop() || 'Project';
const rootNode: TreeNode = {
name: rootName,
path: path,
type: 'folder',
children: children,
expanded: true,
loaded: true
};
setTree([rootNode]);
} catch (error) {
console.error('Failed to load directory:', error);
setTree([]);
} finally {
setLoading(false);
}
};
const entriesToNodes = (entries: DirectoryEntry[]): TreeNode[] => {
// 只显示文件夹，过滤掉文件
return entries
.filter(entry => entry.is_dir)
.map(entry => ({
name: entry.name,
path: entry.path,
type: 'folder' as const,
children: [],
expanded: false,
loaded: false
}));
};
const loadChildren = async (node: TreeNode): Promise<TreeNode[]> => {
try {
const entries = await TauriAPI.listDirectory(node.path);
return entriesToNodes(entries);
} catch (error) {
console.error('Failed to load children:', error);
return [];
}
};
const toggleNode = async (nodePath: string) => {
const updateTree = async (nodes: TreeNode[]): Promise<TreeNode[]> => {
const newNodes: TreeNode[] = [];
for (const node of nodes) {
if (node.path === nodePath) {
if (!node.loaded) {
const children = await loadChildren(node);
newNodes.push({
...node,
expanded: true,
loaded: true,
children
});
} else {
newNodes.push({
...node,
expanded: !node.expanded
});
}
} else if (node.children) {
newNodes.push({
...node,
children: await updateTree(node.children)
});
useEffect(() => {
if (rootPath) {
loadRootDirectory(rootPath);
} else {
newNodes.push(node);
setTree([]);
}
}, [rootPath]);
const loadRootDirectory = async (path: string) => {
setLoading(true);
try {
const entries = await TauriAPI.listDirectory(path);
const children = entriesToNodes(entries);
// 创建根节点
const rootName = path.split(/[/\\]/).filter((p) => p).pop() || 'Project';
const rootNode: TreeNode = {
name: rootName,
path: path,
type: 'folder',
children: children,
expanded: true,
loaded: true
};
setTree([rootNode]);
} catch (error) {
console.error('Failed to load directory:', error);
setTree([]);
} finally {
setLoading(false);
}
}
return newNodes;
};
const newTree = await updateTree(tree);
setTree(newTree);
};
const entriesToNodes = (entries: DirectoryEntry[]): TreeNode[] => {
// 只显示文件夹，过滤掉文件
return entries
.filter((entry) => entry.is_dir)
.map((entry) => ({
name: entry.name,
path: entry.path,
type: 'folder' as const,
children: [],
expanded: false,
loaded: false
}));
};
const handleNodeClick = (node: TreeNode) => {
onSelectFile?.(node.path);
toggleNode(node.path);
};
const loadChildren = async (node: TreeNode): Promise<TreeNode[]> => {
try {
const entries = await TauriAPI.listDirectory(node.path);
return entriesToNodes(entries);
} catch (error) {
console.error('Failed to load children:', error);
return [];
}
};
const renderNode = (node: TreeNode, level: number = 0) => {
const isSelected = selectedPath === node.path;
const indent = level * 16;
const toggleNode = async (nodePath: string) => {
const updateTree = async (nodes: TreeNode[]): Promise<TreeNode[]> => {
const newNodes: TreeNode[] = [];
for (const node of nodes) {
if (node.path === nodePath) {
if (!node.loaded) {
const children = await loadChildren(node);
newNodes.push({
...node,
expanded: true,
loaded: true,
children
});
} else {
newNodes.push({
...node,
expanded: !node.expanded
});
}
} else if (node.children) {
newNodes.push({
...node,
children: await updateTree(node.children)
});
} else {
newNodes.push(node);
}
}
return newNodes;
};
const newTree = await updateTree(tree);
setTree(newTree);
};
const handleNodeClick = (node: TreeNode) => {
onSelectFile?.(node.path);
toggleNode(node.path);
};
const renderNode = (node: TreeNode, level: number = 0) => {
const isSelected = selectedPath === node.path;
const indent = level * 16;
return (
<div key={node.path}>
<div
className={`tree-node ${isSelected ? 'selected' : ''}`}
style={{ paddingLeft: `${indent}px` }}
onClick={() => handleNodeClick(node)}
>
<span className="tree-arrow">
{node.expanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
</span>
<span className="tree-icon">
<Folder size={16} />
</span>
<span className="tree-label">{node.name}</span>
</div>
{node.expanded && node.children && (
<div className="tree-children">
{node.children.map((child) => renderNode(child, level + 1))}
</div>
)}
</div>
);
};
if (loading) {
return <div className="file-tree loading">Loading...</div>;
}
if (!rootPath || tree.length === 0) {
return <div className="file-tree empty">No folders</div>;
}
return (
<div key={node.path}>
<div
className={`tree-node ${isSelected ? 'selected' : ''}`}
style={{ paddingLeft: `${indent}px` }}
onClick={() => handleNodeClick(node)}
>
<span className="tree-arrow">
{node.expanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
</span>
<span className="tree-icon">
<Folder size={16} />
</span>
<span className="tree-label">{node.name}</span>
<div className="file-tree">
{tree.map((node) => renderNode(node))}
</div>
{node.expanded && node.children && (
<div className="tree-children">
{node.children.map(child => renderNode(child, level + 1))}
</div>
)}
</div>
);
};
if (loading) {
return <div className="file-tree loading">Loading...</div>;
}
if (!rootPath || tree.length === 0) {
return <div className="file-tree empty">No folders</div>;
}
return (
<div className="file-tree">
{tree.map(node => renderNode(node))}
</div>
);
}

272
packages/editor-app/src/components/FlexLayoutDockContainer.tsx
View File

@@ -1,4 +1,4 @@
import { useRef, useCallback, ReactNode, useMemo } from 'react';
import { useCallback, ReactNode, useMemo } from 'react';
import { Layout, Model, TabNode, IJsonModel, Actions, IJsonTabSetNode, IJsonRowNode } from 'flexlayout-react';
import 'flexlayout-react/style/light.css';
import '../styles/FlexLayoutDock.css';
@@ -16,146 +16,146 @@ interface FlexLayoutDockContainerProps {
}
export function FlexLayoutDockContainer({ panels, onPanelClose }: FlexLayoutDockContainerProps) {
const createDefaultLayout = useCallback((): IJsonModel => {
const leftPanels = panels.filter(p => p.id.includes('hierarchy'));
const rightPanels = panels.filter(p => p.id.includes('inspector'));
const bottomPanels = panels.filter(p => p.id.includes('console') || p.id.includes('asset'))
.sort((a, b) => {
// 控制台排在前面
if (a.id.includes('console')) return -1;
if (b.id.includes('console')) return 1;
return 0;
});
const centerPanels = panels.filter(p =>
!leftPanels.includes(p) && !rightPanels.includes(p) && !bottomPanels.includes(p)
);
const createDefaultLayout = useCallback((): IJsonModel => {
const leftPanels = panels.filter((p) => p.id.includes('hierarchy'));
const rightPanels = panels.filter((p) => p.id.includes('inspector'));
const bottomPanels = panels.filter((p) => p.id.includes('console') || p.id.includes('asset'))
.sort((a, b) => {
// 控制台排在前面
if (a.id.includes('console')) return -1;
if (b.id.includes('console')) return 1;
return 0;
});
const centerPanels = panels.filter((p) =>
!leftPanels.includes(p) && !rightPanels.includes(p) && !bottomPanels.includes(p)
);
// Build center column children
const centerColumnChildren: (IJsonTabSetNode | IJsonRowNode)[] = [];
if (centerPanels.length > 0) {
centerColumnChildren.push({
type: 'tabset',
weight: 70,
children: centerPanels.map(p => ({
type: 'tab',
name: p.title,
id: p.id,
component: p.id,
enableClose: p.closable !== false,
})),
});
}
if (bottomPanels.length > 0) {
centerColumnChildren.push({
type: 'tabset',
weight: 30,
children: bottomPanels.map(p => ({
type: 'tab',
name: p.title,
id: p.id,
component: p.id,
enableClose: p.closable !== false,
})),
});
}
// Build main row children
const mainRowChildren: (IJsonTabSetNode | IJsonRowNode)[] = [];
if (leftPanels.length > 0) {
mainRowChildren.push({
type: 'tabset',
weight: 20,
children: leftPanels.map(p => ({
type: 'tab',
name: p.title,
id: p.id,
component: p.id,
enableClose: p.closable !== false,
})),
});
}
if (centerColumnChildren.length > 0) {
if (centerColumnChildren.length === 1) {
const centerChild = centerColumnChildren[0];
if (centerChild && centerChild.type === 'tabset') {
mainRowChildren.push({
type: 'tabset',
weight: 60,
children: centerChild.children
} as IJsonTabSetNode);
} else if (centerChild) {
mainRowChildren.push({
type: 'row',
weight: 60,
children: centerChild.children
} as IJsonRowNode);
// Build center column children
const centerColumnChildren: (IJsonTabSetNode | IJsonRowNode)[] = [];
if (centerPanels.length > 0) {
centerColumnChildren.push({
type: 'tabset',
weight: 70,
children: centerPanels.map((p) => ({
type: 'tab',
name: p.title,
id: p.id,
component: p.id,
enableClose: p.closable !== false
}))
});
}
if (bottomPanels.length > 0) {
centerColumnChildren.push({
type: 'tabset',
weight: 30,
children: bottomPanels.map((p) => ({
type: 'tab',
name: p.title,
id: p.id,
component: p.id,
enableClose: p.closable !== false
}))
});
}
} else {
mainRowChildren.push({
type: 'row',
weight: 60,
children: centerColumnChildren,
});
}
}
if (rightPanels.length > 0) {
mainRowChildren.push({
type: 'tabset',
weight: 20,
children: rightPanels.map(p => ({
type: 'tab',
name: p.title,
id: p.id,
component: p.id,
enableClose: p.closable !== false,
})),
});
}
return {
global: {
tabEnableClose: true,
tabEnableRename: false,
tabSetEnableMaximize: false,
tabSetEnableDrop: true,
tabSetEnableDrag: true,
tabSetEnableDivide: true,
borderEnableDrop: true,
},
borders: [],
layout: {
type: 'row',
weight: 100,
children: mainRowChildren,
},
};
}, [panels]);
// Build main row children
const mainRowChildren: (IJsonTabSetNode | IJsonRowNode)[] = [];
if (leftPanels.length > 0) {
mainRowChildren.push({
type: 'tabset',
weight: 20,
children: leftPanels.map((p) => ({
type: 'tab',
name: p.title,
id: p.id,
component: p.id,
enableClose: p.closable !== false
}))
});
}
if (centerColumnChildren.length > 0) {
if (centerColumnChildren.length === 1) {
const centerChild = centerColumnChildren[0];
if (centerChild && centerChild.type === 'tabset') {
mainRowChildren.push({
type: 'tabset',
weight: 60,
children: centerChild.children
} as IJsonTabSetNode);
} else if (centerChild) {
mainRowChildren.push({
type: 'row',
weight: 60,
children: centerChild.children
} as IJsonRowNode);
}
} else {
mainRowChildren.push({
type: 'row',
weight: 60,
children: centerColumnChildren
});
}
}
if (rightPanels.length > 0) {
mainRowChildren.push({
type: 'tabset',
weight: 20,
children: rightPanels.map((p) => ({
type: 'tab',
name: p.title,
id: p.id,
component: p.id,
enableClose: p.closable !== false
}))
});
}
const model = useMemo(() => Model.fromJson(createDefaultLayout()), [createDefaultLayout]);
return {
global: {
tabEnableClose: true,
tabEnableRename: false,
tabSetEnableMaximize: false,
tabSetEnableDrop: true,
tabSetEnableDrag: true,
tabSetEnableDivide: true,
borderEnableDrop: true
},
borders: [],
layout: {
type: 'row',
weight: 100,
children: mainRowChildren
}
};
}, [panels]);
const factory = useCallback((node: TabNode) => {
const component = node.getComponent();
const panel = panels.find(p => p.id === component);
return panel?.content || <div>Panel not found</div>;
}, [panels]);
const model = useMemo(() => Model.fromJson(createDefaultLayout()), [createDefaultLayout]);
const onAction = useCallback((action: any) => {
if (action.type === Actions.DELETE_TAB) {
const tabId = action.data.node;
if (onPanelClose) {
onPanelClose(tabId);
}
}
return action;
}, [onPanelClose]);
const factory = useCallback((node: TabNode) => {
const component = node.getComponent();
const panel = panels.find((p) => p.id === component);
return panel?.content || <div>Panel not found</div>;
}, [panels]);
return (
<div className="flexlayout-dock-container">
<Layout
model={model}
factory={factory}
onAction={onAction}
/>
</div>
);
const onAction = useCallback((action: any) => {
if (action.type === Actions.DELETE_TAB) {
const tabId = action.data.node;
if (onPanelClose) {
onPanelClose(tabId);
}
}
return action;
}, [onPanelClose]);
return (
<div className="flexlayout-dock-container">
<Layout
model={model}
factory={factory}
onAction={onAction}
/>
</div>
);
}

518
packages/editor-app/src/components/MenuBar.tsx
View File

@@ -36,274 +36,274 @@ interface MenuBarProps {
}
export function MenuBar({
locale = 'en',
uiRegistry,
messageHub,
pluginManager,
onNewScene,
onOpenScene,
onSaveScene,
onSaveSceneAs,
onOpenProject,
onCloseProject,
onExit,
onOpenPluginManager,
onOpenProfiler,
onOpenPortManager,
onOpenSettings,
onToggleDevtools,
onOpenAbout,
onCreatePlugin
locale = 'en',
uiRegistry,
messageHub,
pluginManager,
onNewScene,
onOpenScene,
onSaveScene,
onSaveSceneAs,
onOpenProject,
onCloseProject,
onExit,
onOpenPluginManager,
onOpenProfiler: _onOpenProfiler,
onOpenPortManager,
onOpenSettings,
onToggleDevtools,
onOpenAbout,
onCreatePlugin
}: MenuBarProps) {
const [openMenu, setOpenMenu] = useState<string | null>(null);
const [pluginMenuItems, setPluginMenuItems] = useState<PluginMenuItem[]>([]);
const menuRef = useRef<HTMLDivElement>(null);
const [openMenu, setOpenMenu] = useState<string | null>(null);
const [pluginMenuItems, setPluginMenuItems] = useState<PluginMenuItem[]>([]);
const menuRef = useRef<HTMLDivElement>(null);
const updateMenuItems = () => {
if (uiRegistry && pluginManager) {
const items = uiRegistry.getChildMenus('window');
// 过滤掉被禁用插件的菜单项
const enabledPlugins = pluginManager.getAllPluginMetadata()
.filter(p => p.enabled)
.map(p => p.name);
const updateMenuItems = () => {
if (uiRegistry && pluginManager) {
const items = uiRegistry.getChildMenus('window');
// 过滤掉被禁用插件的菜单项
const enabledPlugins = pluginManager.getAllPluginMetadata()
.filter((p) => p.enabled)
.map((p) => p.name);
// 只显示启用插件的菜单项
const filteredItems = items.filter(item => {
// 检查菜单项是否属于某个插件
return enabledPlugins.some(pluginName => {
const plugin = pluginManager.getEditorPlugin(pluginName);
if (plugin && plugin.registerMenuItems) {
const pluginMenus = plugin.registerMenuItems();
return pluginMenus.some(m => m.id === item.id);
}
return false;
});
});
// 只显示启用插件的菜单项
const filteredItems = items.filter((item) => {
// 检查菜单项是否属于某个插件
return enabledPlugins.some((pluginName) => {
const plugin = pluginManager.getEditorPlugin(pluginName);
if (plugin && plugin.registerMenuItems) {
const pluginMenus = plugin.registerMenuItems();
return pluginMenus.some((m) => m.id === item.id);
}
return false;
});
});
setPluginMenuItems(filteredItems);
console.log('[MenuBar] Updated menu items:', filteredItems);
} else if (uiRegistry) {
// 如果没有 pluginManager，显示所有菜单项
const items = uiRegistry.getChildMenus('window');
setPluginMenuItems(items);
console.log('[MenuBar] Updated menu items (no filter):', items);
}
};
useEffect(() => {
updateMenuItems();
}, [uiRegistry, pluginManager]);
useEffect(() => {
if (messageHub) {
const unsubscribeInstalled = messageHub.subscribe('plugin:installed', () => {
console.log('[MenuBar] Plugin installed, updating menu items');
updateMenuItems();
});
const unsubscribeEnabled = messageHub.subscribe('plugin:enabled', () => {
console.log('[MenuBar] Plugin enabled, updating menu items');
updateMenuItems();
});
const unsubscribeDisabled = messageHub.subscribe('plugin:disabled', () => {
console.log('[MenuBar] Plugin disabled, updating menu items');
updateMenuItems();
});
return () => {
unsubscribeInstalled();
unsubscribeEnabled();
unsubscribeDisabled();
};
}
}, [messageHub, uiRegistry, pluginManager]);
const t = (key: string) => {
const translations: Record<string, Record<string, string>> = {
en: {
file: 'File',
newScene: 'New Scene',
openScene: 'Open Scene',
saveScene: 'Save Scene',
saveSceneAs: 'Save Scene As...',
openProject: 'Open Project',
closeProject: 'Close Project',
exit: 'Exit',
edit: 'Edit',
undo: 'Undo',
redo: 'Redo',
cut: 'Cut',
copy: 'Copy',
paste: 'Paste',
delete: 'Delete',
selectAll: 'Select All',
window: 'Window',
sceneHierarchy: 'Scene Hierarchy',
inspector: 'Inspector',
assets: 'Assets',
console: 'Console',
viewport: 'Viewport',
pluginManager: 'Plugin Manager',
tools: 'Tools',
createPlugin: 'Create Plugin',
portManager: 'Port Manager',
settings: 'Settings',
help: 'Help',
documentation: 'Documentation',
checkForUpdates: 'Check for Updates',
about: 'About',
devtools: 'Developer Tools'
},
zh: {
file: '文件',
newScene: '新建场景',
openScene: '打开场景',
saveScene: '保存场景',
saveSceneAs: '场景另存为...',
openProject: '打开项目',
closeProject: '关闭项目',
exit: '退出',
edit: '编辑',
undo: '撤销',
redo: '重做',
cut: '剪切',
copy: '复制',
paste: '粘贴',
delete: '删除',
selectAll: '全选',
window: '窗口',
sceneHierarchy: '场景层级',
inspector: '检视器',
assets: '资产',
console: '控制台',
viewport: '视口',
pluginManager: '插件管理器',
tools: '工具',
createPlugin: '创建插件',
portManager: '端口管理器',
settings: '设置',
help: '帮助',
documentation: '文档',
checkForUpdates: '检查更新',
about: '关于',
devtools: '开发者工具'
}
};
return translations[locale]?.[key] || key;
};
const menus: Record<string, MenuItem[]> = {
file: [
{ label: t('newScene'), shortcut: 'Ctrl+N', onClick: onNewScene },
{ label: t('openScene'), shortcut: 'Ctrl+O', onClick: onOpenScene },
{ separator: true },
{ label: t('saveScene'), shortcut: 'Ctrl+S', onClick: onSaveScene },
{ label: t('saveSceneAs'), shortcut: 'Ctrl+Shift+S', onClick: onSaveSceneAs },
{ separator: true },
{ label: t('openProject'), onClick: onOpenProject },
{ label: t('closeProject'), onClick: onCloseProject },
{ separator: true },
{ label: t('exit'), onClick: onExit }
],
edit: [
{ label: t('undo'), shortcut: 'Ctrl+Z', disabled: true },
{ label: t('redo'), shortcut: 'Ctrl+Y', disabled: true },
{ separator: true },
{ label: t('cut'), shortcut: 'Ctrl+X', disabled: true },
{ label: t('copy'), shortcut: 'Ctrl+C', disabled: true },
{ label: t('paste'), shortcut: 'Ctrl+V', disabled: true },
{ label: t('delete'), shortcut: 'Delete', disabled: true },
{ separator: true },
{ label: t('selectAll'), shortcut: 'Ctrl+A', disabled: true }
],
window: [
...pluginMenuItems.map(item => ({
label: item.label || '',
icon: item.icon,
disabled: item.disabled,
onClick: item.onClick
})),
...(pluginMenuItems.length > 0 ? [{ separator: true } as MenuItem] : []),
{ label: t('pluginManager'), onClick: onOpenPluginManager },
{ separator: true },
{ label: t('devtools'), onClick: onToggleDevtools }
],
tools: [
{ label: t('createPlugin'), onClick: onCreatePlugin },
{ separator: true },
{ label: t('portManager'), onClick: onOpenPortManager },
{ separator: true },
{ label: t('settings'), onClick: onOpenSettings }
],
help: [
{ label: t('documentation'), disabled: true },
{ separator: true },
{ label: t('checkForUpdates'), onClick: onOpenAbout },
{ label: t('about'), onClick: onOpenAbout }
]
};
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
setOpenMenu(null);
}
setPluginMenuItems(filteredItems);
console.log('[MenuBar] Updated menu items:', filteredItems);
} else if (uiRegistry) {
// 如果没有 pluginManager，显示所有菜单项
const items = uiRegistry.getChildMenus('window');
setPluginMenuItems(items);
console.log('[MenuBar] Updated menu items (no filter):', items);
}
};
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
useEffect(() => {
updateMenuItems();
}, [uiRegistry, pluginManager]);
useEffect(() => {
if (messageHub) {
const unsubscribeInstalled = messageHub.subscribe('plugin:installed', () => {
console.log('[MenuBar] Plugin installed, updating menu items');
updateMenuItems();
});
const unsubscribeEnabled = messageHub.subscribe('plugin:enabled', () => {
console.log('[MenuBar] Plugin enabled, updating menu items');
updateMenuItems();
});
const unsubscribeDisabled = messageHub.subscribe('plugin:disabled', () => {
console.log('[MenuBar] Plugin disabled, updating menu items');
updateMenuItems();
});
return () => {
unsubscribeInstalled();
unsubscribeEnabled();
unsubscribeDisabled();
};
}
}, [messageHub, uiRegistry, pluginManager]);
const t = (key: string) => {
const translations: Record<string, Record<string, string>> = {
en: {
file: 'File',
newScene: 'New Scene',
openScene: 'Open Scene',
saveScene: 'Save Scene',
saveSceneAs: 'Save Scene As...',
openProject: 'Open Project',
closeProject: 'Close Project',
exit: 'Exit',
edit: 'Edit',
undo: 'Undo',
redo: 'Redo',
cut: 'Cut',
copy: 'Copy',
paste: 'Paste',
delete: 'Delete',
selectAll: 'Select All',
window: 'Window',
sceneHierarchy: 'Scene Hierarchy',
inspector: 'Inspector',
assets: 'Assets',
console: 'Console',
viewport: 'Viewport',
pluginManager: 'Plugin Manager',
tools: 'Tools',
createPlugin: 'Create Plugin',
portManager: 'Port Manager',
settings: 'Settings',
help: 'Help',
documentation: 'Documentation',
checkForUpdates: 'Check for Updates',
about: 'About',
devtools: 'Developer Tools'
},
zh: {
file: '文件',
newScene: '新建场景',
openScene: '打开场景',
saveScene: '保存场景',
saveSceneAs: '场景另存为...',
openProject: '打开项目',
closeProject: '关闭项目',
exit: '退出',
edit: '编辑',
undo: '撤销',
redo: '重做',
cut: '剪切',
copy: '复制',
paste: '粘贴',
delete: '删除',
selectAll: '全选',
window: '窗口',
sceneHierarchy: '场景层级',
inspector: '检视器',
assets: '资产',
console: '控制台',
viewport: '视口',
pluginManager: '插件管理器',
tools: '工具',
createPlugin: '创建插件',
portManager: '端口管理器',
settings: '设置',
help: '帮助',
documentation: '文档',
checkForUpdates: '检查更新',
about: '关于',
devtools: '开发者工具'
}
};
return translations[locale]?.[key] || key;
};
}, []);
const handleMenuClick = (menuKey: string) => {
setOpenMenu(openMenu === menuKey ? null : menuKey);
};
const menus: Record<string, MenuItem[]> = {
file: [
{ label: t('newScene'), shortcut: 'Ctrl+N', onClick: onNewScene },
{ label: t('openScene'), shortcut: 'Ctrl+O', onClick: onOpenScene },
{ separator: true },
{ label: t('saveScene'), shortcut: 'Ctrl+S', onClick: onSaveScene },
{ label: t('saveSceneAs'), shortcut: 'Ctrl+Shift+S', onClick: onSaveSceneAs },
{ separator: true },
{ label: t('openProject'), onClick: onOpenProject },
{ label: t('closeProject'), onClick: onCloseProject },
{ separator: true },
{ label: t('exit'), onClick: onExit }
],
edit: [
{ label: t('undo'), shortcut: 'Ctrl+Z', disabled: true },
{ label: t('redo'), shortcut: 'Ctrl+Y', disabled: true },
{ separator: true },
{ label: t('cut'), shortcut: 'Ctrl+X', disabled: true },
{ label: t('copy'), shortcut: 'Ctrl+C', disabled: true },
{ label: t('paste'), shortcut: 'Ctrl+V', disabled: true },
{ label: t('delete'), shortcut: 'Delete', disabled: true },
{ separator: true },
{ label: t('selectAll'), shortcut: 'Ctrl+A', disabled: true }
],
window: [
...pluginMenuItems.map((item) => ({
label: item.label || '',
icon: item.icon,
disabled: item.disabled,
onClick: item.onClick
})),
...(pluginMenuItems.length > 0 ? [{ separator: true } as MenuItem] : []),
{ label: t('pluginManager'), onClick: onOpenPluginManager },
{ separator: true },
{ label: t('devtools'), onClick: onToggleDevtools }
],
tools: [
{ label: t('createPlugin'), onClick: onCreatePlugin },
{ separator: true },
{ label: t('portManager'), onClick: onOpenPortManager },
{ separator: true },
{ label: t('settings'), onClick: onOpenSettings }
],
help: [
{ label: t('documentation'), disabled: true },
{ separator: true },
{ label: t('checkForUpdates'), onClick: onOpenAbout },
{ label: t('about'), onClick: onOpenAbout }
]
};
const handleMenuItemClick = (item: MenuItem) => {
if (!item.disabled && !item.separator && item.onClick && item.label) {
item.onClick();
setOpenMenu(null);
}
};
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
setOpenMenu(null);
}
};
return (
<div className="menu-bar" ref={menuRef}>
{Object.keys(menus).map(menuKey => (
<div key={menuKey} className="menu-item">
<button
className={`menu-button ${openMenu === menuKey ? 'active' : ''}`}
onClick={() => handleMenuClick(menuKey)}
>
{t(menuKey)}
</button>
{openMenu === menuKey && menus[menuKey] && (
<div className="menu-dropdown">
{menus[menuKey].map((item, index) => {
if (item.separator) {
return <div key={index} className="menu-separator" />;
}
const IconComponent = item.icon ? (LucideIcons as any)[item.icon] : null;
return (
<button
key={index}
className={`menu-dropdown-item ${item.disabled ? 'disabled' : ''}`}
onClick={() => handleMenuItemClick(item)}
disabled={item.disabled}
>
<span className="menu-item-content">
{IconComponent && <IconComponent size={16} />}
<span>{item.label || ''}</span>
</span>
{item.shortcut && <span className="menu-shortcut">{item.shortcut}</span>}
</button>
);
})}
</div>
)}
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, []);
const handleMenuClick = (menuKey: string) => {
setOpenMenu(openMenu === menuKey ? null : menuKey);
};
const handleMenuItemClick = (item: MenuItem) => {
if (!item.disabled && !item.separator && item.onClick && item.label) {
item.onClick();
setOpenMenu(null);
}
};
return (
<div className="menu-bar" ref={menuRef}>
{Object.keys(menus).map((menuKey) => (
<div key={menuKey} className="menu-item">
<button
className={`menu-button ${openMenu === menuKey ? 'active' : ''}`}
onClick={() => handleMenuClick(menuKey)}
>
{t(menuKey)}
</button>
{openMenu === menuKey && menus[menuKey] && (
<div className="menu-dropdown">
{menus[menuKey].map((item, index) => {
if (item.separator) {
return <div key={index} className="menu-separator" />;
}
const IconComponent = item.icon ? (LucideIcons as any)[item.icon] : null;
return (
<button
key={index}
className={`menu-dropdown-item ${item.disabled ? 'disabled' : ''}`}
onClick={() => handleMenuItemClick(item)}
disabled={item.disabled}
>
<span className="menu-item-content">
{IconComponent && <IconComponent size={16} />}
<span>{item.label || ''}</span>
</span>
{item.shortcut && <span className="menu-shortcut">{item.shortcut}</span>}
</button>
);
})}
</div>
)}
</div>
))}
</div>
))}
</div>
);
);
}

10
packages/editor-app/src/components/PluginGeneratorWindow.tsx
View File

@@ -97,7 +97,7 @@ export function PluginGeneratorWindow({ onClose, projectPath, locale, onSuccess
const response = await fetch('/@plugin-generator', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
pluginName,
@@ -149,7 +149,7 @@ export function PluginGeneratorWindow({ onClose, projectPath, locale, onSuccess
<input
type="text"
value={pluginName}
onChange={e => setPluginName(e.target.value)}
onChange={(e) => setPluginName(e.target.value)}
placeholder={t('pluginNamePlaceholder')}
disabled={isGenerating}
/>
@@ -160,7 +160,7 @@ export function PluginGeneratorWindow({ onClose, projectPath, locale, onSuccess
<input
type="text"
value={pluginVersion}
onChange={e => setPluginVersion(e.target.value)}
onChange={(e) => setPluginVersion(e.target.value)}
disabled={isGenerating}
/>
</div>
@@ -171,7 +171,7 @@ export function PluginGeneratorWindow({ onClose, projectPath, locale, onSuccess
<input
type="text"
value={outputPath}
onChange={e => setOutputPath(e.target.value)}
onChange={(e) => setOutputPath(e.target.value)}
disabled={isGenerating}
/>
<button
@@ -190,7 +190,7 @@ export function PluginGeneratorWindow({ onClose, projectPath, locale, onSuccess
<input
type="checkbox"
checked={includeExample}
onChange={e => setIncludeExample(e.target.checked)}
onChange={(e) => setIncludeExample(e.target.checked)}
disabled={isGenerating}
/>
<span>{t('includeExample')}</span>

6
packages/editor-app/src/components/PluginManagerWindow.tsx
View File

@@ -144,7 +144,7 @@ export function PluginManagerWindow({ pluginManager, onClose, onRefresh, onOpen,
setExpandedCategories(newExpanded);
};
const filteredPlugins = plugins.filter(plugin => {
const filteredPlugins = plugins.filter((plugin) => {
if (!filter) return true;
const searchLower = filter.toLowerCase();
return (
@@ -162,8 +162,8 @@ export function PluginManagerWindow({ pluginManager, onClose, onRefresh, onOpen,
return acc;
}, {} as Record<EditorPluginCategory, IEditorPluginMetadata[]>);
const enabledCount = plugins.filter(p => p.enabled).length;
const disabledCount = plugins.filter(p => !p.enabled).length;
const enabledCount = plugins.filter((p) => p.enabled).length;
const disabledCount = plugins.filter((p) => !p.enabled).length;
const renderPluginCard = (plugin: IEditorPluginMetadata) => {
const IconComponent = plugin.icon ? (LucideIcons as any)[plugin.icon] : null;

122
packages/editor-app/src/components/PluginPanel.tsx
View File

@@ -65,7 +65,7 @@ export function PluginPanel({ pluginManager }: PluginPanelProps) {
setExpandedCategories(newExpanded);
};
const filteredPlugins = plugins.filter(plugin => {
const filteredPlugins = plugins.filter((plugin) => {
if (!filter) return true;
const searchLower = filter.toLowerCase();
return (
@@ -83,81 +83,81 @@ export function PluginPanel({ pluginManager }: PluginPanelProps) {
return acc;
}, {} as Record<EditorPluginCategory, IEditorPluginMetadata[]>);
const enabledCount = plugins.filter(p => p.enabled).length;
const disabledCount = plugins.filter(p => !p.enabled).length;
const enabledCount = plugins.filter((p) => p.enabled).length;
const disabledCount = plugins.filter((p) => !p.enabled).length;
const renderPluginCard = (plugin: IEditorPluginMetadata) => {
const IconComponent = plugin.icon ? (LucideIcons as any)[plugin.icon] : null;
return (
<div key={plugin.name} className={`plugin-card ${plugin.enabled ? 'enabled' : 'disabled'}`}>
<div className="plugin-card-header">
<div className="plugin-card-icon">
{IconComponent ? <IconComponent size={24} /> : <Package size={24} />}
<div key={plugin.name} className={`plugin-card ${plugin.enabled ? 'enabled' : 'disabled'}`}>
<div className="plugin-card-header">
<div className="plugin-card-icon">
{IconComponent ? <IconComponent size={24} /> : <Package size={24} />}
</div>
<div className="plugin-card-info">
<div className="plugin-card-title">{plugin.displayName}</div>
<div className="plugin-card-version">v{plugin.version}</div>
</div>
<button
className={`plugin-toggle ${plugin.enabled ? 'enabled' : 'disabled'}`}
onClick={() => togglePlugin(plugin.name, plugin.enabled)}
title={plugin.enabled ? 'Disable plugin' : 'Enable plugin'}
>
{plugin.enabled ? <CheckCircle size={18} /> : <XCircle size={18} />}
</button>
</div>
<div className="plugin-card-info">
<div className="plugin-card-title">{plugin.displayName}</div>
<div className="plugin-card-version">v{plugin.version}</div>
</div>
<button
className={`plugin-toggle ${plugin.enabled ? 'enabled' : 'disabled'}`}
onClick={() => togglePlugin(plugin.name, plugin.enabled)}
title={plugin.enabled ? 'Disable plugin' : 'Enable plugin'}
>
{plugin.enabled ? <CheckCircle size={18} /> : <XCircle size={18} />}
</button>
</div>
{plugin.description && (
<div className="plugin-card-description">{plugin.description}</div>
)}
<div className="plugin-card-footer">
<span className="plugin-card-category">
{(() => {
const CategoryIcon = (LucideIcons as any)[categoryIcons[plugin.category]];
return CategoryIcon ? <CategoryIcon size={14} style={{ marginRight: '4px' }} /> : null;
})()}
{categoryNames[plugin.category]}
</span>
{plugin.installedAt && (
<span className="plugin-card-installed">
Installed: {new Date(plugin.installedAt).toLocaleDateString()}
</span>
{plugin.description && (
<div className="plugin-card-description">{plugin.description}</div>
)}
<div className="plugin-card-footer">
<span className="plugin-card-category">
{(() => {
const CategoryIcon = (LucideIcons as any)[categoryIcons[plugin.category]];
return CategoryIcon ? <CategoryIcon size={14} style={{ marginRight: '4px' }} /> : null;
})()}
{categoryNames[plugin.category]}
</span>
{plugin.installedAt && (
<span className="plugin-card-installed">
Installed: {new Date(plugin.installedAt).toLocaleDateString()}
</span>
)}
</div>
</div>
</div>
);
};
const renderPluginList = (plugin: IEditorPluginMetadata) => {
const IconComponent = plugin.icon ? (LucideIcons as any)[plugin.icon] : null;
return (
<div key={plugin.name} className={`plugin-list-item ${plugin.enabled ? 'enabled' : 'disabled'}`}>
<div className="plugin-list-icon">
{IconComponent ? <IconComponent size={20} /> : <Package size={20} />}
</div>
<div className="plugin-list-info">
<div className="plugin-list-name">
{plugin.displayName}
<span className="plugin-list-version">v{plugin.version}</span>
<div key={plugin.name} className={`plugin-list-item ${plugin.enabled ? 'enabled' : 'disabled'}`}>
<div className="plugin-list-icon">
{IconComponent ? <IconComponent size={20} /> : <Package size={20} />}
</div>
{plugin.description && (
<div className="plugin-list-description">{plugin.description}</div>
)}
<div className="plugin-list-info">
<div className="plugin-list-name">
{plugin.displayName}
<span className="plugin-list-version">v{plugin.version}</span>
</div>
{plugin.description && (
<div className="plugin-list-description">{plugin.description}</div>
)}
</div>
<div className="plugin-list-status">
{plugin.enabled ? (
<span className="status-badge enabled">Enabled</span>
) : (
<span className="status-badge disabled">Disabled</span>
)}
</div>
<button
className="plugin-list-toggle"
onClick={() => togglePlugin(plugin.name, plugin.enabled)}
title={plugin.enabled ? 'Disable plugin' : 'Enable plugin'}
>
{plugin.enabled ? 'Disable' : 'Enable'}
</button>
</div>
<div className="plugin-list-status">
{plugin.enabled ? (
<span className="status-badge enabled">Enabled</span>
) : (
<span className="status-badge disabled">Disabled</span>
)}
</div>
<button
className="plugin-list-toggle"
onClick={() => togglePlugin(plugin.name, plugin.enabled)}
title={plugin.enabled ? 'Disable plugin' : 'Enable plugin'}
>
{plugin.enabled ? 'Disable' : 'Enable'}
</button>
</div>
);
};

274
packages/editor-app/src/components/PortManager.tsx
View File

@@ -10,152 +10,152 @@ interface PortManagerProps {
}
export function PortManager({ onClose }: PortManagerProps) {
const [isServerRunning, setIsServerRunning] = useState(false);
const [serverPort, setServerPort] = useState<string>('8080');
const [isChecking, setIsChecking] = useState(false);
const [isStopping, setIsStopping] = useState(false);
const [isStarting, setIsStarting] = useState(false);
const [isServerRunning, setIsServerRunning] = useState(false);
const [serverPort, setServerPort] = useState<string>('8080');
const [isChecking, setIsChecking] = useState(false);
const [isStopping, setIsStopping] = useState(false);
const [isStarting, setIsStarting] = useState(false);
useEffect(() => {
const settings = SettingsService.getInstance();
setServerPort(settings.get('profiler.port', '8080'));
useEffect(() => {
const settings = SettingsService.getInstance();
setServerPort(settings.get('profiler.port', '8080'));
const handleSettingsChange = ((event: CustomEvent) => {
const newPort = event.detail['profiler.port'];
if (newPort) {
setServerPort(newPort);
}
}) as EventListener;
const handleSettingsChange = ((event: CustomEvent) => {
const newPort = event.detail['profiler.port'];
if (newPort) {
setServerPort(newPort);
}
}) as EventListener;
window.addEventListener('settings:changed', handleSettingsChange);
window.addEventListener('settings:changed', handleSettingsChange);
return () => {
window.removeEventListener('settings:changed', handleSettingsChange);
return () => {
window.removeEventListener('settings:changed', handleSettingsChange);
};
}, []);
useEffect(() => {
checkServerStatus();
}, []);
const checkServerStatus = async () => {
setIsChecking(true);
try {
const status = await invoke<boolean>('get_profiler_status');
setIsServerRunning(status);
} catch (error) {
console.error('[PortManager] Failed to check server status:', error);
setIsServerRunning(false);
} finally {
setIsChecking(false);
}
};
}, []);
useEffect(() => {
checkServerStatus();
}, []);
const handleStopServer = async () => {
setIsStopping(true);
try {
const profilerService = (window as any).__PROFILER_SERVICE__ as ProfilerService | undefined;
if (profilerService) {
await profilerService.manualStopServer();
setIsServerRunning(false);
}
} catch (error) {
console.error('[PortManager] Failed to stop server:', error);
} finally {
setIsStopping(false);
}
};
const checkServerStatus = async () => {
setIsChecking(true);
try {
const status = await invoke<boolean>('get_profiler_status');
setIsServerRunning(status);
} catch (error) {
console.error('[PortManager] Failed to check server status:', error);
setIsServerRunning(false);
} finally {
setIsChecking(false);
}
};
const handleStartServer = async () => {
setIsStarting(true);
try {
const profilerService = (window as any).__PROFILER_SERVICE__ as ProfilerService | undefined;
if (profilerService) {
await profilerService.manualStartServer();
await new Promise((resolve) => setTimeout(resolve, 500));
await checkServerStatus();
}
} catch (error) {
console.error('[PortManager] Failed to start server:', error);
} finally {
setIsStarting(false);
}
};
const handleStopServer = async () => {
setIsStopping(true);
try {
const profilerService = (window as any).__PROFILER_SERVICE__ as ProfilerService | undefined;
if (profilerService) {
await profilerService.manualStopServer();
setIsServerRunning(false);
}
} catch (error) {
console.error('[PortManager] Failed to stop server:', error);
} finally {
setIsStopping(false);
}
};
const handleStartServer = async () => {
setIsStarting(true);
try {
const profilerService = (window as any).__PROFILER_SERVICE__ as ProfilerService | undefined;
if (profilerService) {
await profilerService.manualStartServer();
await new Promise(resolve => setTimeout(resolve, 500));
await checkServerStatus();
}
} catch (error) {
console.error('[PortManager] Failed to start server:', error);
} finally {
setIsStarting(false);
}
};
return (
<div className="port-manager-overlay" onClick={onClose}>
<div className="port-manager" onClick={(e) => e.stopPropagation()}>
<div className="port-manager-header">
<div className="port-manager-title">
<Server size={20} />
<h2>Port Manager</h2>
</div>
<button className="port-manager-close" onClick={onClose} title="Close">
<X size={20} />
</button>
</div>
<div className="port-manager-content">
<div className="port-section">
<h3>Profiler Server</h3>
<div className="port-info">
<div className="port-item">
<span className="port-label">Status:</span>
<span className={`port-status ${isServerRunning ? 'running' : 'stopped'}`}>
{isChecking ? 'Checking...' : isServerRunning ? 'Running' : 'Stopped'}
</span>
</div>
{isServerRunning && (
<div className="port-item">
<span className="port-label">Port:</span>
<span className="port-value">{serverPort}</span>
return (
<div className="port-manager-overlay" onClick={onClose}>
<div className="port-manager" onClick={(e) => e.stopPropagation()}>
<div className="port-manager-header">
<div className="port-manager-title">
<Server size={20} />
<h2>Port Manager</h2>
</div>
<button className="port-manager-close" onClick={onClose} title="Close">
<X size={20} />
</button>
</div>
<div className="port-manager-content">
<div className="port-section">
<h3>Profiler Server</h3>
<div className="port-info">
<div className="port-item">
<span className="port-label">Status:</span>
<span className={`port-status ${isServerRunning ? 'running' : 'stopped'}`}>
{isChecking ? 'Checking...' : isServerRunning ? 'Running' : 'Stopped'}
</span>
</div>
{isServerRunning && (
<div className="port-item">
<span className="port-label">Port:</span>
<span className="port-value">{serverPort}</span>
</div>
)}
</div>
{isServerRunning && (
<div className="port-actions">
<button
className="action-btn danger"
onClick={handleStopServer}
disabled={isStopping}
>
<WifiOff size={16} />
<span>{isStopping ? 'Stopping...' : 'Stop Server'}</span>
</button>
</div>
)}
{!isServerRunning && (
<>
<div className="port-actions">
<button
className="action-btn primary"
onClick={handleStartServer}
disabled={isStarting}
>
<Wifi size={16} />
<span>{isStarting ? 'Starting...' : 'Start Server'}</span>
</button>
</div>
<div className="port-hint">
<p>No server is currently running.</p>
<p className="hint-text">Click "Start Server" to start the profiler server.</p>
</div>
</>
)}
</div>
<div className="port-tips">
<h4>Tips</h4>
<ul>
<li>Use this when the Profiler server port is stuck and cannot be restarted</li>
<li>The server will automatically stop when the Profiler window is closed</li>
<li>Current configured port: {serverPort}</li>
</ul>
</div>
</div>
)}
</div>
{isServerRunning && (
<div className="port-actions">
<button
className="action-btn danger"
onClick={handleStopServer}
disabled={isStopping}
>
<WifiOff size={16} />
<span>{isStopping ? 'Stopping...' : 'Stop Server'}</span>
</button>
</div>
)}
{!isServerRunning && (
<>
<div className="port-actions">
<button
className="action-btn primary"
onClick={handleStartServer}
disabled={isStarting}
>
<Wifi size={16} />
<span>{isStarting ? 'Starting...' : 'Start Server'}</span>
</button>
</div>
<div className="port-hint">
<p>No server is currently running.</p>
<p className="hint-text">Click "Start Server" to start the profiler server.</p>
</div>
</>
)}
</div>
<div className="port-tips">
<h4>Tips</h4>
<ul>
<li>Use this when the Profiler server port is stuck and cannot be restarted</li>
<li>The server will automatically stop when the Profiler window is closed</li>
<li>Current configured port: {serverPort}</li>
</ul>
</div>
</div>
</div>
</div>
);
);
}

394
packages/editor-app/src/components/ProfilerDockPanel.tsx
View File

@@ -7,220 +7,220 @@ import { MessageHub } from '@esengine/editor-core';
import '../styles/ProfilerDockPanel.css';
export function ProfilerDockPanel() {
const [profilerData, setProfilerData] = useState<ProfilerData | null>(null);
const [isConnected, setIsConnected] = useState(false);
const [isServerRunning, setIsServerRunning] = useState(false);
const [port, setPort] = useState('8080');
const [isPaused, setIsPaused] = useState(false);
const [profilerData, setProfilerData] = useState<ProfilerData | null>(null);
const [isConnected, setIsConnected] = useState(false);
const [isServerRunning, setIsServerRunning] = useState(false);
const [port, setPort] = useState('8080');
const [isPaused, setIsPaused] = useState(false);
useEffect(() => {
const settings = SettingsService.getInstance();
setPort(settings.get('profiler.port', '8080'));
useEffect(() => {
const settings = SettingsService.getInstance();
setPort(settings.get('profiler.port', '8080'));
const handleSettingsChange = ((event: CustomEvent) => {
const newPort = event.detail['profiler.port'];
if (newPort) {
setPort(newPort);
}
}) as EventListener;
const handleSettingsChange = ((event: CustomEvent) => {
const newPort = event.detail['profiler.port'];
if (newPort) {
setPort(newPort);
}
}) as EventListener;
window.addEventListener('settings:changed', handleSettingsChange);
window.addEventListener('settings:changed', handleSettingsChange);
return () => {
window.removeEventListener('settings:changed', handleSettingsChange);
};
}, []);
return () => {
window.removeEventListener('settings:changed', handleSettingsChange);
};
}, []);
useEffect(() => {
const profilerService = (window as any).__PROFILER_SERVICE__ as ProfilerService | undefined;
useEffect(() => {
const profilerService = (window as any).__PROFILER_SERVICE__ as ProfilerService | undefined;
if (!profilerService) {
console.warn('[ProfilerDockPanel] ProfilerService not available - plugin may be disabled');
setIsServerRunning(false);
setIsConnected(false);
return;
}
if (!profilerService) {
console.warn('[ProfilerDockPanel] ProfilerService not available - plugin may be disabled');
setIsServerRunning(false);
setIsConnected(false);
return;
}
// 订阅数据更新
const unsubscribe = profilerService.subscribe((data: ProfilerData) => {
if (!isPaused) {
setProfilerData(data);
}
});
// 订阅数据更新
const unsubscribe = profilerService.subscribe((data: ProfilerData) => {
if (!isPaused) {
setProfilerData(data);
}
});
// 定期检查连接状态
const checkStatus = () => {
setIsConnected(profilerService.isConnected());
setIsServerRunning(profilerService.isServerActive());
// 定期检查连接状态
const checkStatus = () => {
setIsConnected(profilerService.isConnected());
setIsServerRunning(profilerService.isServerActive());
};
checkStatus();
const interval = setInterval(checkStatus, 1000);
return () => {
unsubscribe();
clearInterval(interval);
};
}, [isPaused]);
const fps = profilerData?.fps || 0;
const totalFrameTime = profilerData?.totalFrameTime || 0;
const systems = (profilerData?.systems || []).slice(0, 5); // Only show top 5 systems in dock panel
const entityCount = profilerData?.entityCount || 0;
const componentCount = profilerData?.componentCount || 0;
const targetFrameTime = 16.67;
const handleOpenDetails = () => {
const messageHub = Core.services.resolve(MessageHub);
if (messageHub) {
messageHub.publish('ui:openWindow', { windowId: 'profiler' });
}
};
checkStatus();
const interval = setInterval(checkStatus, 1000);
return () => {
unsubscribe();
clearInterval(interval);
const handleTogglePause = () => {
setIsPaused(!isPaused);
};
}, [isPaused]);
const fps = profilerData?.fps || 0;
const totalFrameTime = profilerData?.totalFrameTime || 0;
const systems = (profilerData?.systems || []).slice(0, 5); // Only show top 5 systems in dock panel
const entityCount = profilerData?.entityCount || 0;
const componentCount = profilerData?.componentCount || 0;
const targetFrameTime = 16.67;
const handleOpenDetails = () => {
const messageHub = Core.services.resolve(MessageHub);
if (messageHub) {
messageHub.publish('ui:openWindow', { windowId: 'profiler' });
}
};
const handleTogglePause = () => {
setIsPaused(!isPaused);
};
return (
<div className="profiler-dock-panel">
<div className="profiler-dock-header">
<h3>Performance Monitor</h3>
<div className="profiler-dock-header-actions">
{isConnected && (
<>
<button
className="profiler-dock-pause-btn"
onClick={handleTogglePause}
title={isPaused ? 'Resume data updates' : 'Pause data updates'}
>
{isPaused ? <Play size={14} /> : <Pause size={14} />}
</button>
<button
className="profiler-dock-details-btn"
onClick={handleOpenDetails}
title="Open detailed profiler"
>
<Maximize2 size={14} />
</button>
</>
)}
<div className="profiler-dock-status">
{isConnected ? (
<>
<Wifi size={12} />
<span className="status-text connected">Connected</span>
</>
) : isServerRunning ? (
<>
<WifiOff size={12} />
<span className="status-text waiting">Waiting...</span>
</>
) : (
<>
<WifiOff size={12} />
<span className="status-text disconnected">Server Off</span>
</>
)}
</div>
</div>
</div>
{!isServerRunning ? (
<div className="profiler-dock-empty">
<Cpu size={32} />
<p>Profiler server not running</p>
<p className="hint">Open Profiler window and connect to start monitoring</p>
</div>
) : !isConnected ? (
<div className="profiler-dock-empty">
<Activity size={32} />
<p>Waiting for game connection...</p>
<p className="hint">Connect to: <code>ws://localhost:{port}</code></p>
</div>
) : (
<div className="profiler-dock-content">
<div className="profiler-dock-stats">
<div className="stat-card">
<div className="stat-icon">
<Activity size={16} />
</div>
<div className="stat-info">
<div className="stat-label">FPS</div>
<div className={`stat-value ${fps < 55 ? 'warning' : ''}`}>{fps}</div>
</div>
</div>
<div className="stat-card">
<div className="stat-icon">
<Cpu size={16} />
</div>
<div className="stat-info">
<div className="stat-label">Frame Time</div>
<div className={`stat-value ${totalFrameTime > targetFrameTime ? 'warning' : ''}`}>
{totalFrameTime.toFixed(1)}ms
return (
<div className="profiler-dock-panel">
<div className="profiler-dock-header">
<h3>Performance Monitor</h3>
<div className="profiler-dock-header-actions">
{isConnected && (
<>
<button
className="profiler-dock-pause-btn"
onClick={handleTogglePause}
title={isPaused ? 'Resume data updates' : 'Pause data updates'}
>
{isPaused ? <Play size={14} /> : <Pause size={14} />}
</button>
<button
className="profiler-dock-details-btn"
onClick={handleOpenDetails}
title="Open detailed profiler"
>
<Maximize2 size={14} />
</button>
</>
)}
<div className="profiler-dock-status">
{isConnected ? (
<>
<Wifi size={12} />
<span className="status-text connected">Connected</span>
</>
) : isServerRunning ? (
<>
<WifiOff size={12} />
<span className="status-text waiting">Waiting...</span>
</>
) : (
<>
<WifiOff size={12} />
<span className="status-text disconnected">Server Off</span>
</>
)}
</div>
</div>
</div>
</div>
<div className="stat-card">
<div className="stat-icon">
<Layers size={16} />
</div>
<div className="stat-info">
<div className="stat-label">Entities</div>
<div className="stat-value">{entityCount}</div>
</div>
</div>
{!isServerRunning ? (
<div className="profiler-dock-empty">
<Cpu size={32} />
<p>Profiler server not running</p>
<p className="hint">Open Profiler window and connect to start monitoring</p>
</div>
) : !isConnected ? (
<div className="profiler-dock-empty">
<Activity size={32} />
<p>Waiting for game connection...</p>
<p className="hint">Connect to: <code>ws://localhost:{port}</code></p>
</div>
) : (
<div className="profiler-dock-content">
<div className="profiler-dock-stats">
<div className="stat-card">
<div className="stat-icon">
<Activity size={16} />
</div>
<div className="stat-info">
<div className="stat-label">FPS</div>
<div className={`stat-value ${fps < 55 ? 'warning' : ''}`}>{fps}</div>
</div>
</div>
<div className="stat-card">
<div className="stat-icon">
<Package size={16} />
</div>
<div className="stat-info">
<div className="stat-label">Components</div>
<div className="stat-value">{componentCount}</div>
</div>
</div>
</div>
<div className="stat-card">
<div className="stat-icon">
<Cpu size={16} />
</div>
<div className="stat-info">
<div className="stat-label">Frame Time</div>
<div className={`stat-value ${totalFrameTime > targetFrameTime ? 'warning' : ''}`}>
{totalFrameTime.toFixed(1)}ms
</div>
</div>
</div>
{systems.length > 0 && (
<div className="profiler-dock-systems">
<h4>Top Systems</h4>
<div className="systems-list">
{systems.map((system) => (
<div key={system.name} className="system-item">
<div className="system-item-header">
<span className="system-item-name">{system.name}</span>
<span className="system-item-time">
{system.executionTime.toFixed(2)}ms
</span>
<div className="stat-card">
<div className="stat-icon">
<Layers size={16} />
</div>
<div className="stat-info">
<div className="stat-label">Entities</div>
<div className="stat-value">{entityCount}</div>
</div>
</div>
<div className="stat-card">
<div className="stat-icon">
<Package size={16} />
</div>
<div className="stat-info">
<div className="stat-label">Components</div>
<div className="stat-value">{componentCount}</div>
</div>
</div>
</div>
<div className="system-item-bar">
<div
className="system-item-bar-fill"
style={{
width: `${Math.min(system.percentage, 100)}%`,
backgroundColor: system.executionTime > targetFrameTime
? 'var(--color-danger)'
: system.executionTime > targetFrameTime * 0.5
? 'var(--color-warning)'
: 'var(--color-success)'
}}
/>
</div>
<div className="system-item-footer">
<span className="system-item-percentage">{system.percentage.toFixed(1)}%</span>
{system.entityCount > 0 && (
<span className="system-item-entities">{system.entityCount} entities</span>
)}
</div>
</div>
))}
</div>
</div>
)}
{systems.length > 0 && (
<div className="profiler-dock-systems">
<h4>Top Systems</h4>
<div className="systems-list">
{systems.map((system) => (
<div key={system.name} className="system-item">
<div className="system-item-header">
<span className="system-item-name">{system.name}</span>
<span className="system-item-time">
{system.executionTime.toFixed(2)}ms
</span>
</div>
<div className="system-item-bar">
<div
className="system-item-bar-fill"
style={{
width: `${Math.min(system.percentage, 100)}%`,
backgroundColor: system.executionTime > targetFrameTime
? 'var(--color-danger)'
: system.executionTime > targetFrameTime * 0.5
? 'var(--color-warning)'
: 'var(--color-success)'
}}
/>
</div>
<div className="system-item-footer">
<span className="system-item-percentage">{system.percentage.toFixed(1)}%</span>
{system.entityCount > 0 && (
<span className="system-item-entities">{system.entityCount} entities</span>
)}
</div>
</div>
))}
</div>
</div>
)}
</div>
)}
</div>
)}
</div>
);
);
}

406
packages/editor-app/src/components/ProfilerPanel.tsx
View File

@@ -14,221 +14,221 @@ interface SystemPerformanceData {
}
export function ProfilerPanel() {
const [systems, setSystems] = useState<SystemPerformanceData[]>([]);
const [totalFrameTime, setTotalFrameTime] = useState(0);
const [isPaused, setIsPaused] = useState(false);
const [sortBy, setSortBy] = useState<'time' | 'average' | 'name'>('time');
const animationRef = useRef<number>();
const [systems, setSystems] = useState<SystemPerformanceData[]>([]);
const [totalFrameTime, setTotalFrameTime] = useState(0);
const [isPaused, setIsPaused] = useState(false);
const [sortBy, setSortBy] = useState<'time' | 'average' | 'name'>('time');
const animationRef = useRef<number>();
useEffect(() => {
const updateProfilerData = () => {
if (isPaused) {
animationRef.current = requestAnimationFrame(updateProfilerData);
return;
}
const coreInstance = Core.Instance;
if (!coreInstance || !coreInstance._performanceMonitor?.isEnabled) {
animationRef.current = requestAnimationFrame(updateProfilerData);
return;
}
const performanceMonitor = coreInstance._performanceMonitor;
const systemDataMap = performanceMonitor.getAllSystemData();
const systemStatsMap = performanceMonitor.getAllSystemStats();
const systemsData: SystemPerformanceData[] = [];
let total = 0;
for (const [name, data] of systemDataMap.entries()) {
const stats = systemStatsMap.get(name);
if (stats) {
systemsData.push({
name,
executionTime: data.executionTime,
entityCount: data.entityCount,
averageTime: stats.averageTime,
minTime: stats.minTime,
maxTime: stats.maxTime,
percentage: 0
});
total += data.executionTime;
}
}
// Calculate percentages
systemsData.forEach((system) => {
system.percentage = total > 0 ? (system.executionTime / total) * 100 : 0;
});
// Sort systems
systemsData.sort((a, b) => {
switch (sortBy) {
case 'time':
return b.executionTime - a.executionTime;
case 'average':
return b.averageTime - a.averageTime;
case 'name':
return a.name.localeCompare(b.name);
default:
return 0;
}
});
setSystems(systemsData);
setTotalFrameTime(total);
animationRef.current = requestAnimationFrame(updateProfilerData);
};
useEffect(() => {
const updateProfilerData = () => {
if (isPaused) {
animationRef.current = requestAnimationFrame(updateProfilerData);
return;
}
const coreInstance = Core.Instance;
if (!coreInstance || !coreInstance._performanceMonitor?.isEnabled) {
animationRef.current = requestAnimationFrame(updateProfilerData);
return;
}
return () => {
if (animationRef.current) {
cancelAnimationFrame(animationRef.current);
}
};
}, [isPaused, sortBy]);
const performanceMonitor = coreInstance._performanceMonitor;
const systemDataMap = performanceMonitor.getAllSystemData();
const systemStatsMap = performanceMonitor.getAllSystemStats();
const systemsData: SystemPerformanceData[] = [];
let total = 0;
for (const [name, data] of systemDataMap.entries()) {
const stats = systemStatsMap.get(name);
if (stats) {
systemsData.push({
name,
executionTime: data.executionTime,
entityCount: data.entityCount,
averageTime: stats.averageTime,
minTime: stats.minTime,
maxTime: stats.maxTime,
percentage: 0
});
total += data.executionTime;
const handleReset = () => {
const coreInstance = Core.Instance;
if (coreInstance && coreInstance._performanceMonitor) {
coreInstance._performanceMonitor.reset();
}
}
// Calculate percentages
systemsData.forEach(system => {
system.percentage = total > 0 ? (system.executionTime / total) * 100 : 0;
});
// Sort systems
systemsData.sort((a, b) => {
switch (sortBy) {
case 'time':
return b.executionTime - a.executionTime;
case 'average':
return b.averageTime - a.averageTime;
case 'name':
return a.name.localeCompare(b.name);
default:
return 0;
}
});
setSystems(systemsData);
setTotalFrameTime(total);
animationRef.current = requestAnimationFrame(updateProfilerData);
};
animationRef.current = requestAnimationFrame(updateProfilerData);
const fps = totalFrameTime > 0 ? Math.round(1000 / totalFrameTime) : 0;
const targetFrameTime = 16.67; // 60 FPS
const isOverBudget = totalFrameTime > targetFrameTime;
return () => {
if (animationRef.current) {
cancelAnimationFrame(animationRef.current);
}
};
}, [isPaused, sortBy]);
const handleReset = () => {
const coreInstance = Core.Instance;
if (coreInstance && coreInstance._performanceMonitor) {
coreInstance._performanceMonitor.reset();
}
};
const fps = totalFrameTime > 0 ? Math.round(1000 / totalFrameTime) : 0;
const targetFrameTime = 16.67; // 60 FPS
const isOverBudget = totalFrameTime > targetFrameTime;
return (
<div className="profiler-panel">
<div className="profiler-toolbar">
<div className="profiler-toolbar-left">
<div className="profiler-stats-summary">
<div className="summary-item">
<Clock size={14} />
<span className="summary-label">Frame:</span>
<span className={`summary-value ${isOverBudget ? 'over-budget' : ''}`}>
{totalFrameTime.toFixed(2)}ms
</span>
return (
<div className="profiler-panel">
<div className="profiler-toolbar">
<div className="profiler-toolbar-left">
<div className="profiler-stats-summary">
<div className="summary-item">
<Clock size={14} />
<span className="summary-label">Frame:</span>
<span className={`summary-value ${isOverBudget ? 'over-budget' : ''}`}>
{totalFrameTime.toFixed(2)}ms
</span>
</div>
<div className="summary-item">
<Activity size={14} />
<span className="summary-label">FPS:</span>
<span className={`summary-value ${fps < 55 ? 'low-fps' : ''}`}>{fps}</span>
</div>
<div className="summary-item">
<BarChart3 size={14} />
<span className="summary-label">Systems:</span>
<span className="summary-value">{systems.length}</span>
</div>
</div>
</div>
<div className="profiler-toolbar-right">
<select
className="profiler-sort"
value={sortBy}
onChange={(e) => setSortBy(e.target.value as any)}
>
<option value="time">Sort by Time</option>
<option value="average">Sort by Average</option>
<option value="name">Sort by Name</option>
</select>
<button
className="profiler-btn"
onClick={() => setIsPaused(!isPaused)}
title={isPaused ? 'Resume' : 'Pause'}
>
{isPaused ? <Play size={14} /> : <Pause size={14} />}
</button>
<button
className="profiler-btn"
onClick={handleReset}
title="Reset Statistics"
>
<RefreshCw size={14} />
</button>
</div>
</div>
<div className="summary-item">
<Activity size={14} />
<span className="summary-label">FPS:</span>
<span className={`summary-value ${fps < 55 ? 'low-fps' : ''}`}>{fps}</span>
</div>
<div className="summary-item">
<BarChart3 size={14} />
<span className="summary-label">Systems:</span>
<span className="summary-value">{systems.length}</span>
</div>
</div>
</div>
<div className="profiler-toolbar-right">
<select
className="profiler-sort"
value={sortBy}
onChange={(e) => setSortBy(e.target.value as any)}
>
<option value="time">Sort by Time</option>
<option value="average">Sort by Average</option>
<option value="name">Sort by Name</option>
</select>
<button
className="profiler-btn"
onClick={() => setIsPaused(!isPaused)}
title={isPaused ? 'Resume' : 'Pause'}
>
{isPaused ? <Play size={14} /> : <Pause size={14} />}
</button>
<button
className="profiler-btn"
onClick={handleReset}
title="Reset Statistics"
>
<RefreshCw size={14} />
</button>
</div>
</div>
<div className="profiler-content">
{systems.length === 0 ? (
<div className="profiler-empty">
<Cpu size={48} />
<p>No performance data available</p>
<p className="profiler-empty-hint">
<div className="profiler-content">
{systems.length === 0 ? (
<div className="profiler-empty">
<Cpu size={48} />
<p>No performance data available</p>
<p className="profiler-empty-hint">
Make sure Core debug mode is enabled and systems are running
</p>
</div>
) : (
<div className="profiler-systems">
{systems.map((system, index) => (
<div key={system.name} className="system-row">
<div className="system-header">
<div className="system-info">
<span className="system-rank">#{index + 1}</span>
<span className="system-name">{system.name}</span>
{system.entityCount > 0 && (
<span className="system-entities">
</p>
</div>
) : (
<div className="profiler-systems">
{systems.map((system, index) => (
<div key={system.name} className="system-row">
<div className="system-header">
<div className="system-info">
<span className="system-rank">#{index + 1}</span>
<span className="system-name">{system.name}</span>
{system.entityCount > 0 && (
<span className="system-entities">
({system.entityCount} entities)
</span>
)}
</div>
<div className="system-metrics">
<span className="metric-time">{system.executionTime.toFixed(2)}ms</span>
<span className="metric-percentage">{system.percentage.toFixed(1)}%</span>
</div>
</div>
<div className="system-bar">
<div
className="system-bar-fill"
style={{
width: `${Math.min(system.percentage, 100)}%`,
backgroundColor: system.executionTime > targetFrameTime
? 'var(--color-danger)'
: system.executionTime > targetFrameTime * 0.5
? 'var(--color-warning)'
: 'var(--color-success)'
}}
/>
</div>
<div className="system-stats">
<div className="stat-item">
<span className="stat-label">Avg:</span>
<span className="stat-value">{system.averageTime.toFixed(2)}ms</span>
</div>
<div className="stat-item">
<span className="stat-label">Min:</span>
<span className="stat-value">{system.minTime.toFixed(2)}ms</span>
</div>
<div className="stat-item">
<span className="stat-label">Max:</span>
<span className="stat-value">{system.maxTime.toFixed(2)}ms</span>
</div>
</div>
</div>
))}
</div>
)}
</div>
</span>
)}
</div>
<div className="system-metrics">
<span className="metric-time">{system.executionTime.toFixed(2)}ms</span>
<span className="metric-percentage">{system.percentage.toFixed(1)}%</span>
</div>
</div>
<div className="system-bar">
<div
className="system-bar-fill"
style={{
width: `${Math.min(system.percentage, 100)}%`,
backgroundColor: system.executionTime > targetFrameTime
? 'var(--color-danger)'
: system.executionTime > targetFrameTime * 0.5
? 'var(--color-warning)'
: 'var(--color-success)'
}}
/>
</div>
<div className="system-stats">
<div className="stat-item">
<span className="stat-label">Avg:</span>
<span className="stat-value">{system.averageTime.toFixed(2)}ms</span>
</div>
<div className="stat-item">
<span className="stat-label">Min:</span>
<span className="stat-value">{system.minTime.toFixed(2)}ms</span>
</div>
<div className="stat-item">
<span className="stat-label">Max:</span>
<span className="stat-value">{system.maxTime.toFixed(2)}ms</span>
</div>
</div>
</div>
))}
</div>
)}
</div>
<div className="profiler-footer">
<div className="profiler-legend">
<div className="legend-item">
<div className="legend-color" style={{ background: 'var(--color-success)' }} />
<span>Good (&lt;8ms)</span>
</div>
<div className="legend-item">
<div className="legend-color" style={{ background: 'var(--color-warning)' }} />
<span>Warning (8-16ms)</span>
</div>
<div className="legend-item">
<div className="legend-color" style={{ background: 'var(--color-danger)' }} />
<span>Critical (&gt;16ms)</span>
</div>
<div className="profiler-footer">
<div className="profiler-legend">
<div className="legend-item">
<div className="legend-color" style={{ background: 'var(--color-success)' }} />
<span>Good (&lt;8ms)</span>
</div>
<div className="legend-item">
<div className="legend-color" style={{ background: 'var(--color-warning)' }} />
<span>Warning (8-16ms)</span>
</div>
<div className="legend-item">
<div className="legend-color" style={{ background: 'var(--color-danger)' }} />
<span>Critical (&gt;16ms)</span>
</div>
</div>
</div>
</div>
</div>
</div>
);
);
}

994
packages/editor-app/src/components/ProfilerWindow.tsx
View File

File diff suppressed because it is too large Load Diff

808
packages/editor-app/src/components/PropertyInspector.tsx
View File

@@ -10,136 +10,136 @@ interface PropertyInspectorProps {
}
export function PropertyInspector({ component, onChange }: PropertyInspectorProps) {
const [properties, setProperties] = useState<Record<string, PropertyMetadata>>({});
const [values, setValues] = useState<Record<string, any>>({});
const [properties, setProperties] = useState<Record<string, PropertyMetadata>>({});
const [values, setValues] = useState<Record<string, any>>({});
useEffect(() => {
const propertyMetadataService = Core.services.resolve(PropertyMetadataService);
if (!propertyMetadataService) return;
useEffect(() => {
const propertyMetadataService = Core.services.resolve(PropertyMetadataService);
if (!propertyMetadataService) return;
const metadata = propertyMetadataService.getEditableProperties(component);
setProperties(metadata);
const metadata = propertyMetadataService.getEditableProperties(component);
setProperties(metadata);
const componentAsAny = component as any;
const currentValues: Record<string, any> = {};
for (const key in metadata) {
currentValues[key] = componentAsAny[key];
}
setValues(currentValues);
}, [component]);
const componentAsAny = component as any;
const currentValues: Record<string, any> = {};
for (const key in metadata) {
currentValues[key] = componentAsAny[key];
}
setValues(currentValues);
}, [component]);
const handleChange = (propertyName: string, value: any) => {
const componentAsAny = component as any;
componentAsAny[propertyName] = value;
const handleChange = (propertyName: string, value: any) => {
const componentAsAny = component as any;
componentAsAny[propertyName] = value;
setValues(prev => ({
...prev,
[propertyName]: value
}));
setValues((prev) => ({
...prev,
[propertyName]: value
}));
if (onChange) {
onChange(propertyName, value);
}
};
if (onChange) {
onChange(propertyName, value);
}
};
const renderProperty = (propertyName: string, metadata: PropertyMetadata) => {
const value = values[propertyName];
const label = metadata.label || propertyName;
const renderProperty = (propertyName: string, metadata: PropertyMetadata) => {
const value = values[propertyName];
const label = metadata.label || propertyName;
switch (metadata.type) {
case 'number':
return (
<NumberField
key={propertyName}
label={label}
value={value ?? 0}
min={metadata.min}
max={metadata.max}
step={metadata.step}
readOnly={metadata.readOnly}
onChange={(newValue) => handleChange(propertyName, newValue)}
/>
);
switch (metadata.type) {
case 'number':
return (
<NumberField
key={propertyName}
label={label}
value={value ?? 0}
min={metadata.min}
max={metadata.max}
step={metadata.step}
readOnly={metadata.readOnly}
onChange={(newValue) => handleChange(propertyName, newValue)}
/>
);
case 'string':
return (
<StringField
key={propertyName}
label={label}
value={value ?? ''}
readOnly={metadata.readOnly}
onChange={(newValue) => handleChange(propertyName, newValue)}
/>
);
case 'string':
return (
<StringField
key={propertyName}
label={label}
value={value ?? ''}
readOnly={metadata.readOnly}
onChange={(newValue) => handleChange(propertyName, newValue)}
/>
);
case 'boolean':
return (
<BooleanField
key={propertyName}
label={label}
value={value ?? false}
readOnly={metadata.readOnly}
onChange={(newValue) => handleChange(propertyName, newValue)}
/>
);
case 'boolean':
return (
<BooleanField
key={propertyName}
label={label}
value={value ?? false}
readOnly={metadata.readOnly}
onChange={(newValue) => handleChange(propertyName, newValue)}
/>
);
case 'color':
return (
<ColorField
key={propertyName}
label={label}
value={value ?? '#ffffff'}
readOnly={metadata.readOnly}
onChange={(newValue) => handleChange(propertyName, newValue)}
/>
);
case 'color':
return (
<ColorField
key={propertyName}
label={label}
value={value ?? '#ffffff'}
readOnly={metadata.readOnly}
onChange={(newValue) => handleChange(propertyName, newValue)}
/>
);
case 'vector2':
return (
<Vector2Field
key={propertyName}
label={label}
value={value ?? { x: 0, y: 0 }}
readOnly={metadata.readOnly}
onChange={(newValue) => handleChange(propertyName, newValue)}
/>
);
case 'vector2':
return (
<Vector2Field
key={propertyName}
label={label}
value={value ?? { x: 0, y: 0 }}
readOnly={metadata.readOnly}
onChange={(newValue) => handleChange(propertyName, newValue)}
/>
);
case 'vector3':
return (
<Vector3Field
key={propertyName}
label={label}
value={value ?? { x: 0, y: 0, z: 0 }}
readOnly={metadata.readOnly}
onChange={(newValue) => handleChange(propertyName, newValue)}
/>
);
case 'vector3':
return (
<Vector3Field
key={propertyName}
label={label}
value={value ?? { x: 0, y: 0, z: 0 }}
readOnly={metadata.readOnly}
onChange={(newValue) => handleChange(propertyName, newValue)}
/>
);
case 'enum':
return (
<EnumField
key={propertyName}
label={label}
value={value}
options={metadata.options || []}
readOnly={metadata.readOnly}
onChange={(newValue) => handleChange(propertyName, newValue)}
/>
);
case 'enum':
return (
<EnumField
key={propertyName}
label={label}
value={value}
options={metadata.options || []}
readOnly={metadata.readOnly}
onChange={(newValue) => handleChange(propertyName, newValue)}
/>
);
default:
return null;
}
};
default:
return null;
}
};
return (
<div className="property-inspector">
{Object.entries(properties).map(([propertyName, metadata]) =>
renderProperty(propertyName, metadata)
)}
</div>
);
return (
<div className="property-inspector">
{Object.entries(properties).map(([propertyName, metadata]) =>
renderProperty(propertyName, metadata)
)}
</div>
);
}
interface NumberFieldProps {
@@ -153,69 +153,69 @@ interface NumberFieldProps {
}
function NumberField({ label, value, min, max, step = 0.1, readOnly, onChange }: NumberFieldProps) {
const [isDragging, setIsDragging] = useState(false);
const [dragStartX, setDragStartX] = useState(0);
const [dragStartValue, setDragStartValue] = useState(0);
const inputRef = useRef<HTMLInputElement>(null);
const [isDragging, setIsDragging] = useState(false);
const [dragStartX, setDragStartX] = useState(0);
const [dragStartValue, setDragStartValue] = useState(0);
const inputRef = useRef<HTMLInputElement>(null);
const handleMouseDown = (e: React.MouseEvent) => {
if (readOnly) return;
setIsDragging(true);
setDragStartX(e.clientX);
setDragStartValue(value);
e.preventDefault();
};
useEffect(() => {
if (!isDragging) return;
const handleMouseMove = (e: MouseEvent) => {
const delta = e.clientX - dragStartX;
const sensitivity = e.shiftKey ? 0.1 : 1;
let newValue = dragStartValue + delta * step * sensitivity;
if (min !== undefined) newValue = Math.max(min, newValue);
if (max !== undefined) newValue = Math.min(max, newValue);
onChange(parseFloat(newValue.toFixed(3)));
const handleMouseDown = (e: React.MouseEvent) => {
if (readOnly) return;
setIsDragging(true);
setDragStartX(e.clientX);
setDragStartValue(value);
e.preventDefault();
};
const handleMouseUp = () => {
setIsDragging(false);
};
useEffect(() => {
if (!isDragging) return;
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
const handleMouseMove = (e: MouseEvent) => {
const delta = e.clientX - dragStartX;
const sensitivity = e.shiftKey ? 0.1 : 1;
let newValue = dragStartValue + delta * step * sensitivity;
return () => {
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
};
}, [isDragging, dragStartX, dragStartValue, step, min, max, onChange]);
if (min !== undefined) newValue = Math.max(min, newValue);
if (max !== undefined) newValue = Math.min(max, newValue);
return (
<div className="property-field">
<label
className="property-label property-label-draggable"
onMouseDown={handleMouseDown}
style={{ cursor: readOnly ? 'default' : 'ew-resize' }}
>
{label}
</label>
<input
ref={inputRef}
type="number"
className="property-input property-input-number"
value={value}
min={min}
max={max}
step={step}
disabled={readOnly}
onChange={(e) => onChange(parseFloat(e.target.value) || 0)}
onFocus={(e) => e.target.select()}
/>
</div>
);
onChange(parseFloat(newValue.toFixed(3)));
};
const handleMouseUp = () => {
setIsDragging(false);
};
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
return () => {
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
};
}, [isDragging, dragStartX, dragStartValue, step, min, max, onChange]);
return (
<div className="property-field">
<label
className="property-label property-label-draggable"
onMouseDown={handleMouseDown}
style={{ cursor: readOnly ? 'default' : 'ew-resize' }}
>
{label}
</label>
<input
ref={inputRef}
type="number"
className="property-input property-input-number"
value={value}
min={min}
max={max}
step={step}
disabled={readOnly}
onChange={(e) => onChange(parseFloat(e.target.value) || 0)}
onFocus={(e) => e.target.select()}
/>
</div>
);
}
interface StringFieldProps {
@@ -226,19 +226,19 @@ interface StringFieldProps {
}
function StringField({ label, value, readOnly, onChange }: StringFieldProps) {
return (
<div className="property-field">
<label className="property-label">{label}</label>
<input
type="text"
className="property-input property-input-text"
value={value}
disabled={readOnly}
onChange={(e) => onChange(e.target.value)}
onFocus={(e) => e.target.select()}
/>
</div>
);
return (
<div className="property-field">
<label className="property-label">{label}</label>
<input
type="text"
className="property-input property-input-text"
value={value}
disabled={readOnly}
onChange={(e) => onChange(e.target.value)}
onFocus={(e) => e.target.select()}
/>
</div>
);
}
interface BooleanFieldProps {
@@ -249,18 +249,18 @@ interface BooleanFieldProps {
}
function BooleanField({ label, value, readOnly, onChange }: BooleanFieldProps) {
return (
<div className="property-field property-field-boolean">
<label className="property-label">{label}</label>
<button
className={`property-toggle ${value ? 'property-toggle-on' : 'property-toggle-off'}`}
disabled={readOnly}
onClick={() => onChange(!value)}
>
<span className="property-toggle-thumb" />
</button>
</div>
);
return (
<div className="property-field property-field-boolean">
<label className="property-label">{label}</label>
<button
className={`property-toggle ${value ? 'property-toggle-on' : 'property-toggle-off'}`}
disabled={readOnly}
onClick={() => onChange(!value)}
>
<span className="property-toggle-thumb" />
</button>
</div>
);
}
interface ColorFieldProps {
@@ -271,29 +271,29 @@ interface ColorFieldProps {
}
function ColorField({ label, value, readOnly, onChange }: ColorFieldProps) {
return (
<div className="property-field">
<label className="property-label">{label}</label>
<div className="property-color-wrapper">
<div className="property-color-preview" style={{ backgroundColor: value }} />
<input
type="color"
className="property-input property-input-color"
value={value}
disabled={readOnly}
onChange={(e) => onChange(e.target.value)}
/>
<input
type="text"
className="property-input property-input-color-text"
value={value.toUpperCase()}
disabled={readOnly}
onChange={(e) => onChange(e.target.value)}
onFocus={(e) => e.target.select()}
/>
</div>
</div>
);
return (
<div className="property-field">
<label className="property-label">{label}</label>
<div className="property-color-wrapper">
<div className="property-color-preview" style={{ backgroundColor: value }} />
<input
type="color"
className="property-input property-input-color"
value={value}
disabled={readOnly}
onChange={(e) => onChange(e.target.value)}
/>
<input
type="text"
className="property-input property-input-color-text"
value={value.toUpperCase()}
disabled={readOnly}
onChange={(e) => onChange(e.target.value)}
onFocus={(e) => e.target.select()}
/>
</div>
</div>
);
}
interface Vector2FieldProps {
@@ -304,76 +304,76 @@ interface Vector2FieldProps {
}
function Vector2Field({ label, value, readOnly, onChange }: Vector2FieldProps) {
const [isExpanded, setIsExpanded] = useState(false);
const [isExpanded, setIsExpanded] = useState(false);
return (
<div className="property-field">
<div className="property-label-row">
<button
className="property-expand-btn"
onClick={() => setIsExpanded(!isExpanded)}
>
{isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
</button>
<label className="property-label">{label}</label>
</div>
{isExpanded ? (
<div className="property-vector-expanded">
<div className="property-vector-axis">
<span className="property-vector-axis-label property-vector-axis-x">X</span>
<input
type="number"
className="property-input property-input-number"
value={value?.x ?? 0}
disabled={readOnly}
step={0.1}
onChange={(e) => onChange({ ...value, x: parseFloat(e.target.value) || 0 })}
onFocus={(e) => e.target.select()}
/>
</div>
<div className="property-vector-axis">
<span className="property-vector-axis-label property-vector-axis-y">Y</span>
<input
type="number"
className="property-input property-input-number"
value={value?.y ?? 0}
disabled={readOnly}
step={0.1}
onChange={(e) => onChange({ ...value, y: parseFloat(e.target.value) || 0 })}
onFocus={(e) => e.target.select()}
/>
</div>
return (
<div className="property-field">
<div className="property-label-row">
<button
className="property-expand-btn"
onClick={() => setIsExpanded(!isExpanded)}
>
{isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
</button>
<label className="property-label">{label}</label>
</div>
{isExpanded ? (
<div className="property-vector-expanded">
<div className="property-vector-axis">
<span className="property-vector-axis-label property-vector-axis-x">X</span>
<input
type="number"
className="property-input property-input-number"
value={value?.x ?? 0}
disabled={readOnly}
step={0.1}
onChange={(e) => onChange({ ...value, x: parseFloat(e.target.value) || 0 })}
onFocus={(e) => e.target.select()}
/>
</div>
<div className="property-vector-axis">
<span className="property-vector-axis-label property-vector-axis-y">Y</span>
<input
type="number"
className="property-input property-input-number"
value={value?.y ?? 0}
disabled={readOnly}
step={0.1}
onChange={(e) => onChange({ ...value, y: parseFloat(e.target.value) || 0 })}
onFocus={(e) => e.target.select()}
/>
</div>
</div>
) : (
<div className="property-vector-compact">
<div className="property-vector-axis-compact">
<span className="property-vector-axis-label property-vector-axis-x">X</span>
<input
type="number"
className="property-input property-input-number-compact"
value={value?.x ?? 0}
disabled={readOnly}
step={0.1}
onChange={(e) => onChange({ ...value, x: parseFloat(e.target.value) || 0 })}
onFocus={(e) => e.target.select()}
/>
</div>
<div className="property-vector-axis-compact">
<span className="property-vector-axis-label property-vector-axis-y">Y</span>
<input
type="number"
className="property-input property-input-number-compact"
value={value?.y ?? 0}
disabled={readOnly}
step={0.1}
onChange={(e) => onChange({ ...value, y: parseFloat(e.target.value) || 0 })}
onFocus={(e) => e.target.select()}
/>
</div>
</div>
)}
</div>
) : (
<div className="property-vector-compact">
<div className="property-vector-axis-compact">
<span className="property-vector-axis-label property-vector-axis-x">X</span>
<input
type="number"
className="property-input property-input-number-compact"
value={value?.x ?? 0}
disabled={readOnly}
step={0.1}
onChange={(e) => onChange({ ...value, x: parseFloat(e.target.value) || 0 })}
onFocus={(e) => e.target.select()}
/>
</div>
<div className="property-vector-axis-compact">
<span className="property-vector-axis-label property-vector-axis-y">Y</span>
<input
type="number"
className="property-input property-input-number-compact"
value={value?.y ?? 0}
disabled={readOnly}
step={0.1}
onChange={(e) => onChange({ ...value, y: parseFloat(e.target.value) || 0 })}
onFocus={(e) => e.target.select()}
/>
</div>
</div>
)}
</div>
);
);
}
interface Vector3FieldProps {
@@ -384,100 +384,100 @@ interface Vector3FieldProps {
}
function Vector3Field({ label, value, readOnly, onChange }: Vector3FieldProps) {
const [isExpanded, setIsExpanded] = useState(false);
const [isExpanded, setIsExpanded] = useState(false);
return (
<div className="property-field">
<div className="property-label-row">
<button
className="property-expand-btn"
onClick={() => setIsExpanded(!isExpanded)}
>
{isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
</button>
<label className="property-label">{label}</label>
</div>
{isExpanded ? (
<div className="property-vector-expanded">
<div className="property-vector-axis">
<span className="property-vector-axis-label property-vector-axis-x">X</span>
<input
type="number"
className="property-input property-input-number"
value={value?.x ?? 0}
disabled={readOnly}
step={0.1}
onChange={(e) => onChange({ ...value, x: parseFloat(e.target.value) || 0 })}
onFocus={(e) => e.target.select()}
/>
</div>
<div className="property-vector-axis">
<span className="property-vector-axis-label property-vector-axis-y">Y</span>
<input
type="number"
className="property-input property-input-number"
value={value?.y ?? 0}
disabled={readOnly}
step={0.1}
onChange={(e) => onChange({ ...value, y: parseFloat(e.target.value) || 0 })}
onFocus={(e) => e.target.select()}
/>
</div>
<div className="property-vector-axis">
<span className="property-vector-axis-label property-vector-axis-z">Z</span>
<input
type="number"
className="property-input property-input-number"
value={value?.z ?? 0}
disabled={readOnly}
step={0.1}
onChange={(e) => onChange({ ...value, z: parseFloat(e.target.value) || 0 })}
onFocus={(e) => e.target.select()}
/>
</div>
return (
<div className="property-field">
<div className="property-label-row">
<button
className="property-expand-btn"
onClick={() => setIsExpanded(!isExpanded)}
>
{isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
</button>
<label className="property-label">{label}</label>
</div>
{isExpanded ? (
<div className="property-vector-expanded">
<div className="property-vector-axis">
<span className="property-vector-axis-label property-vector-axis-x">X</span>
<input
type="number"
className="property-input property-input-number"
value={value?.x ?? 0}
disabled={readOnly}
step={0.1}
onChange={(e) => onChange({ ...value, x: parseFloat(e.target.value) || 0 })}
onFocus={(e) => e.target.select()}
/>
</div>
<div className="property-vector-axis">
<span className="property-vector-axis-label property-vector-axis-y">Y</span>
<input
type="number"
className="property-input property-input-number"
value={value?.y ?? 0}
disabled={readOnly}
step={0.1}
onChange={(e) => onChange({ ...value, y: parseFloat(e.target.value) || 0 })}
onFocus={(e) => e.target.select()}
/>
</div>
<div className="property-vector-axis">
<span className="property-vector-axis-label property-vector-axis-z">Z</span>
<input
type="number"
className="property-input property-input-number"
value={value?.z ?? 0}
disabled={readOnly}
step={0.1}
onChange={(e) => onChange({ ...value, z: parseFloat(e.target.value) || 0 })}
onFocus={(e) => e.target.select()}
/>
</div>
</div>
) : (
<div className="property-vector-compact">
<div className="property-vector-axis-compact">
<span className="property-vector-axis-label property-vector-axis-x">X</span>
<input
type="number"
className="property-input property-input-number-compact"
value={value?.x ?? 0}
disabled={readOnly}
step={0.1}
onChange={(e) => onChange({ ...value, x: parseFloat(e.target.value) || 0 })}
onFocus={(e) => e.target.select()}
/>
</div>
<div className="property-vector-axis-compact">
<span className="property-vector-axis-label property-vector-axis-y">Y</span>
<input
type="number"
className="property-input property-input-number-compact"
value={value?.y ?? 0}
disabled={readOnly}
step={0.1}
onChange={(e) => onChange({ ...value, y: parseFloat(e.target.value) || 0 })}
onFocus={(e) => e.target.select()}
/>
</div>
<div className="property-vector-axis-compact">
<span className="property-vector-axis-label property-vector-axis-z">Z</span>
<input
type="number"
className="property-input property-input-number-compact"
value={value?.z ?? 0}
disabled={readOnly}
step={0.1}
onChange={(e) => onChange({ ...value, z: parseFloat(e.target.value) || 0 })}
onFocus={(e) => e.target.select()}
/>
</div>
</div>
)}
</div>
) : (
<div className="property-vector-compact">
<div className="property-vector-axis-compact">
<span className="property-vector-axis-label property-vector-axis-x">X</span>
<input
type="number"
className="property-input property-input-number-compact"
value={value?.x ?? 0}
disabled={readOnly}
step={0.1}
onChange={(e) => onChange({ ...value, x: parseFloat(e.target.value) || 0 })}
onFocus={(e) => e.target.select()}
/>
</div>
<div className="property-vector-axis-compact">
<span className="property-vector-axis-label property-vector-axis-y">Y</span>
<input
type="number"
className="property-input property-input-number-compact"
value={value?.y ?? 0}
disabled={readOnly}
step={0.1}
onChange={(e) => onChange({ ...value, y: parseFloat(e.target.value) || 0 })}
onFocus={(e) => e.target.select()}
/>
</div>
<div className="property-vector-axis-compact">
<span className="property-vector-axis-label property-vector-axis-z">Z</span>
<input
type="number"
className="property-input property-input-number-compact"
value={value?.z ?? 0}
disabled={readOnly}
step={0.1}
onChange={(e) => onChange({ ...value, z: parseFloat(e.target.value) || 0 })}
onFocus={(e) => e.target.select()}
/>
</div>
</div>
)}
</div>
);
);
}
interface EnumFieldProps {
@@ -489,29 +489,29 @@ interface EnumFieldProps {
}
function EnumField({ label, value, options, readOnly, onChange }: EnumFieldProps) {
return (
<div className="property-field">
<label className="property-label">{label}</label>
<select
className="property-input property-input-select"
value={value ?? ''}
disabled={readOnly}
onChange={(e) => {
const selectedOption = options.find(opt => String(opt.value) === e.target.value);
if (selectedOption) {
onChange(selectedOption.value);
}
}}
>
{options.length === 0 && (
<option value="">No options</option>
)}
{options.map((option, index) => (
<option key={index} value={String(option.value)}>
{option.label}
</option>
))}
</select>
</div>
);
return (
<div className="property-field">
<label className="property-label">{label}</label>
<select
className="property-input property-input-select"
value={value ?? ''}
disabled={readOnly}
onChange={(e) => {
const selectedOption = options.find((opt) => String(opt.value) === e.target.value);
if (selectedOption) {
onChange(selectedOption.value);
}
}}
>
{options.length === 0 && (
<option value="">No options</option>
)}
{options.map((option, index) => (
<option key={index} value={String(option.value)}>
{option.label}
</option>
))}
</select>
</div>
);
}

282
packages/editor-app/src/components/ResizablePanel.tsx
View File

@@ -13,160 +13,160 @@ interface ResizablePanelProps {
}
export function ResizablePanel({
direction,
leftOrTop,
rightOrBottom,
defaultSize = 250,
minSize = 150,
maxSize = 600,
side = 'left',
storageKey
direction,
leftOrTop,
rightOrBottom,
defaultSize = 250,
minSize = 150,
maxSize = 600,
side = 'left',
storageKey
}: ResizablePanelProps) {
const getInitialSize = () => {
if (storageKey) {
const saved = localStorage.getItem(storageKey);
if (saved) {
const parsedSize = parseInt(saved, 10);
if (!isNaN(parsedSize)) {
return Math.max(minSize, Math.min(maxSize, parsedSize));
const getInitialSize = () => {
if (storageKey) {
const saved = localStorage.getItem(storageKey);
if (saved) {
const parsedSize = parseInt(saved, 10);
if (!isNaN(parsedSize)) {
return Math.max(minSize, Math.min(maxSize, parsedSize));
}
}
}
}
}
return defaultSize;
};
return defaultSize;
};
const [size, setSize] = useState(getInitialSize);
const [isDragging, setIsDragging] = useState(false);
const containerRef = useRef<HTMLDivElement>(null);
const [size, setSize] = useState(getInitialSize);
const [isDragging, setIsDragging] = useState(false);
const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (storageKey && !isDragging) {
localStorage.setItem(storageKey, size.toString());
}
}, [size, isDragging, storageKey]);
useEffect(() => {
if (storageKey && !isDragging) {
localStorage.setItem(storageKey, size.toString());
}
}, [size, isDragging, storageKey]);
useEffect(() => {
if (!isDragging) return;
useEffect(() => {
if (!isDragging) return;
const handleMouseMove = (e: MouseEvent) => {
if (!containerRef.current) return;
const handleMouseMove = (e: MouseEvent) => {
if (!containerRef.current) return;
const rect = containerRef.current.getBoundingClientRect();
let newSize: number;
const rect = containerRef.current.getBoundingClientRect();
let newSize: number;
if (direction === 'horizontal') {
if (direction === 'horizontal') {
if (side === 'right') {
newSize = rect.right - e.clientX;
} else {
newSize = e.clientX - rect.left;
}
} else {
if (side === 'bottom') {
newSize = rect.bottom - e.clientY;
} else {
newSize = e.clientY - rect.top;
}
}
newSize = Math.max(minSize, Math.min(maxSize, newSize));
setSize(newSize);
};
const handleMouseUp = () => {
setIsDragging(false);
};
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
return () => {
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
};
}, [isDragging, direction, minSize, maxSize, side]);
const handleMouseDown = () => {
setIsDragging(true);
};
const className = `resizable-panel resizable-panel-${direction}`;
const resizerClassName = `resizer resizer-${direction}`;
if (direction === 'horizontal') {
if (side === 'right') {
newSize = rect.right - e.clientX;
return (
<div ref={containerRef} className={className}>
<div className="panel-section" style={{ flex: 1 }}>
{leftOrTop}
</div>
<div
className={resizerClassName}
onMouseDown={handleMouseDown}
style={{ cursor: isDragging ? 'ew-resize' : 'col-resize' }}
>
<div className="resizer-handle" />
</div>
<div className="panel-section" style={{ width: `${size}px` }}>
{rightOrBottom}
</div>
</div>
);
} else {
newSize = e.clientX - rect.left;
return (
<div ref={containerRef} className={className}>
<div className="panel-section" style={{ width: `${size}px` }}>
{leftOrTop}
</div>
<div
className={resizerClassName}
onMouseDown={handleMouseDown}
style={{ cursor: isDragging ? 'ew-resize' : 'col-resize' }}
>
<div className="resizer-handle" />
</div>
<div className="panel-section" style={{ flex: 1 }}>
{rightOrBottom}
</div>
</div>
);
}
} else {
} else {
if (side === 'bottom') {
newSize = rect.bottom - e.clientY;
return (
<div ref={containerRef} className={className}>
<div className="panel-section" style={{ flex: 1 }}>
{leftOrTop}
</div>
<div
className={resizerClassName}
onMouseDown={handleMouseDown}
style={{ cursor: isDragging ? 'ns-resize' : 'row-resize' }}
>
<div className="resizer-handle" />
</div>
<div className="panel-section" style={{ height: `${size}px` }}>
{rightOrBottom}
</div>
</div>
);
} else {
newSize = e.clientY - rect.top;
return (
<div ref={containerRef} className={className}>
<div className="panel-section" style={{ height: `${size}px` }}>
{leftOrTop}
</div>
<div
className={resizerClassName}
onMouseDown={handleMouseDown}
style={{ cursor: isDragging ? 'ns-resize' : 'row-resize' }}
>
<div className="resizer-handle" />
</div>
<div className="panel-section" style={{ flex: 1 }}>
{rightOrBottom}
</div>
</div>
);
}
}
newSize = Math.max(minSize, Math.min(maxSize, newSize));
setSize(newSize);
};
const handleMouseUp = () => {
setIsDragging(false);
};
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
return () => {
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
};
}, [isDragging, direction, minSize, maxSize, side]);
const handleMouseDown = () => {
setIsDragging(true);
};
const className = `resizable-panel resizable-panel-${direction}`;
const resizerClassName = `resizer resizer-${direction}`;
if (direction === 'horizontal') {
if (side === 'right') {
return (
<div ref={containerRef} className={className}>
<div className="panel-section" style={{ flex: 1 }}>
{leftOrTop}
</div>
<div
className={resizerClassName}
onMouseDown={handleMouseDown}
style={{ cursor: isDragging ? 'ew-resize' : 'col-resize' }}
>
<div className="resizer-handle" />
</div>
<div className="panel-section" style={{ width: `${size}px` }}>
{rightOrBottom}
</div>
</div>
);
} else {
return (
<div ref={containerRef} className={className}>
<div className="panel-section" style={{ width: `${size}px` }}>
{leftOrTop}
</div>
<div
className={resizerClassName}
onMouseDown={handleMouseDown}
style={{ cursor: isDragging ? 'ew-resize' : 'col-resize' }}
>
<div className="resizer-handle" />
</div>
<div className="panel-section" style={{ flex: 1 }}>
{rightOrBottom}
</div>
</div>
);
}
} else {
if (side === 'bottom') {
return (
<div ref={containerRef} className={className}>
<div className="panel-section" style={{ flex: 1 }}>
{leftOrTop}
</div>
<div
className={resizerClassName}
onMouseDown={handleMouseDown}
style={{ cursor: isDragging ? 'ns-resize' : 'row-resize' }}
>
<div className="resizer-handle" />
</div>
<div className="panel-section" style={{ height: `${size}px` }}>
{rightOrBottom}
</div>
</div>
);
} else {
return (
<div ref={containerRef} className={className}>
<div className="panel-section" style={{ height: `${size}px` }}>
{leftOrTop}
</div>
<div
className={resizerClassName}
onMouseDown={handleMouseDown}
style={{ cursor: isDragging ? 'ns-resize' : 'row-resize' }}
>
<div className="resizer-handle" />
</div>
<div className="panel-section" style={{ flex: 1 }}>
{rightOrBottom}
</div>
</div>
);
}
}
}

628
packages/editor-app/src/components/SceneHierarchy.tsx
View File

@@ -13,358 +13,358 @@ interface SceneHierarchyProps {
}
export function SceneHierarchy({ entityStore, messageHub }: SceneHierarchyProps) {
const [entities, setEntities] = useState<Entity[]>([]);
const [remoteEntities, setRemoteEntities] = useState<RemoteEntity[]>([]);
const [isRemoteConnected, setIsRemoteConnected] = useState(false);
const [selectedId, setSelectedId] = useState<number | null>(null);
const [searchQuery, setSearchQuery] = useState('');
const [sceneName, setSceneName] = useState<string>('Untitled');
const [remoteSceneName, setRemoteSceneName] = useState<string | null>(null);
const [sceneFilePath, setSceneFilePath] = useState<string | null>(null);
const [isSceneModified, setIsSceneModified] = useState<boolean>(false);
const { t, locale } = useLocale();
const [entities, setEntities] = useState<Entity[]>([]);
const [remoteEntities, setRemoteEntities] = useState<RemoteEntity[]>([]);
const [isRemoteConnected, setIsRemoteConnected] = useState(false);
const [selectedId, setSelectedId] = useState<number | null>(null);
const [searchQuery, setSearchQuery] = useState('');
const [sceneName, setSceneName] = useState<string>('Untitled');
const [remoteSceneName, setRemoteSceneName] = useState<string | null>(null);
const [sceneFilePath, setSceneFilePath] = useState<string | null>(null);
const [isSceneModified, setIsSceneModified] = useState<boolean>(false);
const { t, locale } = useLocale();
// Subscribe to scene changes
useEffect(() => {
const sceneManager = Core.services.resolve(SceneManagerService);
// Subscribe to scene changes
useEffect(() => {
const sceneManager = Core.services.resolve(SceneManagerService);
const updateSceneInfo = () => {
if (sceneManager) {
const state = sceneManager.getSceneState();
setSceneName(state.sceneName);
setIsSceneModified(state.isModified);
}
};
const updateSceneInfo = () => {
if (sceneManager) {
const state = sceneManager.getSceneState();
setSceneName(state.sceneName);
setIsSceneModified(state.isModified);
}
};
updateSceneInfo();
const unsubLoaded = messageHub.subscribe('scene:loaded', (data: any) => {
if (data.sceneName) {
setSceneName(data.sceneName);
setSceneFilePath(data.path || null);
setIsSceneModified(data.isModified || false);
} else {
updateSceneInfo();
}
});
const unsubNew = messageHub.subscribe('scene:new', () => {
updateSceneInfo();
});
const unsubSaved = messageHub.subscribe('scene:saved', () => {
updateSceneInfo();
});
const unsubModified = messageHub.subscribe('scene:modified', () => {
updateSceneInfo();
});
return () => {
unsubLoaded();
unsubNew();
unsubSaved();
unsubModified();
};
}, [messageHub]);
const unsubLoaded = messageHub.subscribe('scene:loaded', (data: any) => {
if (data.sceneName) {
setSceneName(data.sceneName);
setSceneFilePath(data.path || null);
setIsSceneModified(data.isModified || false);
} else {
updateSceneInfo();
}
});
const unsubNew = messageHub.subscribe('scene:new', () => {
updateSceneInfo();
});
const unsubSaved = messageHub.subscribe('scene:saved', () => {
updateSceneInfo();
});
const unsubModified = messageHub.subscribe('scene:modified', () => {
updateSceneInfo();
});
// Subscribe to local entity changes
useEffect(() => {
const updateEntities = () => {
setEntities(entityStore.getRootEntities());
};
return () => {
unsubLoaded();
unsubNew();
unsubSaved();
unsubModified();
};
}, [messageHub]);
const handleSelection = (data: { entity: Entity | null }) => {
setSelectedId(data.entity?.id ?? null);
};
// Subscribe to local entity changes
useEffect(() => {
const updateEntities = () => {
setEntities(entityStore.getRootEntities());
};
updateEntities();
const handleSelection = (data: { entity: Entity | null }) => {
setSelectedId(data.entity?.id ?? null);
};
const unsubAdd = messageHub.subscribe('entity:added', updateEntities);
const unsubRemove = messageHub.subscribe('entity:removed', updateEntities);
const unsubClear = messageHub.subscribe('entities:cleared', updateEntities);
const unsubSelect = messageHub.subscribe('entity:selected', handleSelection);
updateEntities();
return () => {
unsubAdd();
unsubRemove();
unsubClear();
unsubSelect();
};
}, [entityStore, messageHub]);
const unsubAdd = messageHub.subscribe('entity:added', updateEntities);
const unsubRemove = messageHub.subscribe('entity:removed', updateEntities);
const unsubClear = messageHub.subscribe('entities:cleared', updateEntities);
const unsubSelect = messageHub.subscribe('entity:selected', handleSelection);
// Subscribe to remote entity data from ProfilerService
useEffect(() => {
const profilerService = (window as any).__PROFILER_SERVICE__ as ProfilerService | undefined;
return () => {
unsubAdd();
unsubRemove();
unsubClear();
unsubSelect();
};
}, [entityStore, messageHub]);
if (!profilerService) {
return;
}
// Subscribe to remote entity data from ProfilerService
useEffect(() => {
const profilerService = (window as any).__PROFILER_SERVICE__ as ProfilerService | undefined;
const initiallyConnected = profilerService.isConnected();
setIsRemoteConnected(initiallyConnected);
if (!profilerService) {
return;
}
const unsubscribe = profilerService.subscribe((data) => {
const connected = profilerService.isConnected();
setIsRemoteConnected(connected);
const initiallyConnected = profilerService.isConnected();
setIsRemoteConnected(initiallyConnected);
if (connected && data.entities && data.entities.length > 0) {
// 只在实体列表发生实质性变化时才更新
setRemoteEntities(prev => {
if (prev.length !== data.entities!.length) {
return data.entities!;
}
const unsubscribe = profilerService.subscribe((data) => {
const connected = profilerService.isConnected();
setIsRemoteConnected(connected);
// 检查实体ID和名称是否变化
const hasChanged = data.entities!.some((entity, index) => {
const prevEntity = prev[index];
return !prevEntity ||
if (connected && data.entities && data.entities.length > 0) {
// 只在实体列表发生实质性变化时才更新
setRemoteEntities((prev) => {
if (prev.length !== data.entities!.length) {
return data.entities!;
}
// 检查实体ID和名称是否变化
const hasChanged = data.entities!.some((entity, index) => {
const prevEntity = prev[index];
return !prevEntity ||
prevEntity.id !== entity.id ||
prevEntity.name !== entity.name ||
prevEntity.componentCount !== entity.componentCount;
});
});
return hasChanged ? data.entities! : prev;
return hasChanged ? data.entities! : prev;
});
// 请求第一个实体的详情以获取场景名称
if (!remoteSceneName && data.entities.length > 0 && data.entities[0]) {
profilerService.requestEntityDetails(data.entities[0].id);
}
} else if (!connected) {
setRemoteEntities([]);
setRemoteSceneName(null);
}
});
// 请求第一个实体的详情以获取场景名称
if (!remoteSceneName && data.entities.length > 0 && data.entities[0]) {
profilerService.requestEntityDetails(data.entities[0].id);
}
} else if (!connected) {
setRemoteEntities([]);
setRemoteSceneName(null);
}
});
return () => unsubscribe();
}, [remoteSceneName]);
return () => unsubscribe();
}, [remoteSceneName]);
// Listen for entity details to get remote scene name
useEffect(() => {
const handleEntityDetails = ((event: CustomEvent) => {
const details = event.detail;
if (details && details.sceneName) {
setRemoteSceneName(details.sceneName);
}
}) as EventListener;
// Listen for entity details to get remote scene name
useEffect(() => {
const handleEntityDetails = ((event: CustomEvent) => {
const details = event.detail;
if (details && details.sceneName) {
setRemoteSceneName(details.sceneName);
}
}) as EventListener;
window.addEventListener('profiler:entity-details', handleEntityDetails);
return () => window.removeEventListener('profiler:entity-details', handleEntityDetails);
}, []);
window.addEventListener('profiler:entity-details', handleEntityDetails);
return () => window.removeEventListener('profiler:entity-details', handleEntityDetails);
}, []);
const handleEntityClick = (entity: Entity) => {
entityStore.selectEntity(entity);
};
const handleRemoteEntityClick = (entity: RemoteEntity) => {
setSelectedId(entity.id);
// 请求完整的实体详情（包含组件属性）
const profilerService = (window as any).__PROFILER_SERVICE__ as ProfilerService | undefined;
if (profilerService) {
profilerService.requestEntityDetails(entity.id);
}
// 先发布基本信息，详细信息稍后通过 ProfilerService 异步返回
messageHub.publish('remote-entity:selected', {
entity: {
id: entity.id,
name: entity.name,
enabled: entity.enabled,
componentCount: entity.componentCount,
componentTypes: entity.componentTypes
}
});
};
const handleSceneNameClick = () => {
if (sceneFilePath) {
messageHub.publish('asset:reveal', { path: sceneFilePath });
}
};
const handleCreateEntity = () => {
const scene = Core.scene;
if (!scene) return;
const entityCount = entityStore.getAllEntities().length;
const entityName = `Entity ${entityCount + 1}`;
const entity = scene.createEntity(entityName);
entityStore.addEntity(entity);
entityStore.selectEntity(entity);
};
const handleDeleteEntity = async () => {
if (!selectedId) return;
const entity = entityStore.getEntity(selectedId);
if (!entity) return;
const confirmed = await confirm(
locale === 'zh'
? `确定要删除实体 "${entity.name}" 吗？此操作无法撤销。`
: `Are you sure you want to delete entity "${entity.name}"? This action cannot be undone.`,
{
title: locale === 'zh' ? '删除实体' : 'Delete Entity',
kind: 'warning'
}
);
if (confirmed) {
entity.destroy();
entityStore.removeEntity(entity);
}
};
// Listen for Delete key
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Delete' && selectedId && !isRemoteConnected) {
handleDeleteEntity();
}
const handleEntityClick = (entity: Entity) => {
entityStore.selectEntity(entity);
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [selectedId, isRemoteConnected]);
const handleRemoteEntityClick = (entity: RemoteEntity) => {
setSelectedId(entity.id);
// Filter entities based on search query
const filterRemoteEntities = (entityList: RemoteEntity[]): RemoteEntity[] => {
if (!searchQuery.trim()) return entityList;
// 请求完整的实体详情（包含组件属性）
const profilerService = (window as any).__PROFILER_SERVICE__ as ProfilerService | undefined;
if (profilerService) {
profilerService.requestEntityDetails(entity.id);
}
const query = searchQuery.toLowerCase();
return entityList.filter(entity => {
const name = entity.name;
const id = entity.id.toString();
// 先发布基本信息，详细信息稍后通过 ProfilerService 异步返回
messageHub.publish('remote-entity:selected', {
entity: {
id: entity.id,
name: entity.name,
enabled: entity.enabled,
componentCount: entity.componentCount,
componentTypes: entity.componentTypes
}
});
};
// Search by name or ID
if (name.toLowerCase().includes(query) || id.includes(query)) {
return true;
}
const handleSceneNameClick = () => {
if (sceneFilePath) {
messageHub.publish('asset:reveal', { path: sceneFilePath });
}
};
// Search by component types
if (Array.isArray(entity.componentTypes)) {
return entity.componentTypes.some(type =>
type.toLowerCase().includes(query)
const handleCreateEntity = () => {
const scene = Core.scene;
if (!scene) return;
const entityCount = entityStore.getAllEntities().length;
const entityName = `Entity ${entityCount + 1}`;
const entity = scene.createEntity(entityName);
entityStore.addEntity(entity);
entityStore.selectEntity(entity);
};
const handleDeleteEntity = async () => {
if (!selectedId) return;
const entity = entityStore.getEntity(selectedId);
if (!entity) return;
const confirmed = await confirm(
locale === 'zh'
? `确定要删除实体 "${entity.name}" 吗？此操作无法撤销。`
: `Are you sure you want to delete entity "${entity.name}"? This action cannot be undone.`,
{
title: locale === 'zh' ? '删除实体' : 'Delete Entity',
kind: 'warning'
}
);
}
return false;
});
};
if (confirmed) {
entity.destroy();
entityStore.removeEntity(entity);
}
};
const filterLocalEntities = (entityList: Entity[]): Entity[] => {
if (!searchQuery.trim()) return entityList;
// Listen for Delete key
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Delete' && selectedId && !isRemoteConnected) {
handleDeleteEntity();
}
};
const query = searchQuery.toLowerCase();
return entityList.filter(entity => {
const id = entity.id.toString();
return id.includes(query);
});
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [selectedId, isRemoteConnected]);
// Determine which entities to display
const displayEntities = isRemoteConnected
? filterRemoteEntities(remoteEntities)
: filterLocalEntities(entities);
const showRemoteIndicator = isRemoteConnected && remoteEntities.length > 0;
const displaySceneName = isRemoteConnected && remoteSceneName ? remoteSceneName : sceneName;
// Filter entities based on search query
const filterRemoteEntities = (entityList: RemoteEntity[]): RemoteEntity[] => {
if (!searchQuery.trim()) return entityList;
return (
<div className="scene-hierarchy">
<div className="hierarchy-header">
<Layers size={16} className="hierarchy-header-icon" />
<h3>{t('hierarchy.title')}</h3>
<div
className={`scene-name-container ${!isRemoteConnected && sceneFilePath ? 'clickable' : ''}`}
onClick={!isRemoteConnected ? handleSceneNameClick : undefined}
title={!isRemoteConnected && sceneFilePath ? `${displaySceneName} - 点击跳转到文件` : displaySceneName}
>
<span className="scene-name">
{displaySceneName}{!isRemoteConnected && isSceneModified ? '*' : ''}
</span>
</div>
{showRemoteIndicator && (
<div className="remote-indicator" title="Showing remote entities">
<Wifi size={12} />
</div>
)}
</div>
<div className="hierarchy-search">
<Search size={14} />
<input
type="text"
placeholder={t('hierarchy.search') || 'Search entities...'}
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
</div>
{!isRemoteConnected && (
<div className="hierarchy-toolbar">
<button
className="toolbar-btn"
onClick={handleCreateEntity}
title={locale === 'zh' ? '创建实体' : 'Create Entity'}
>
<Plus size={14} />
<span>{locale === 'zh' ? '创建实体' : 'Create Entity'}</span>
</button>
<button
className="toolbar-btn"
onClick={handleDeleteEntity}
disabled={!selectedId}
title={locale === 'zh' ? '删除实体' : 'Delete Entity'}
>
<Trash2 size={14} />
</button>
</div>
)}
<div className="hierarchy-content scrollable">
{displayEntities.length === 0 ? (
<div className="empty-state">
<Box size={48} strokeWidth={1.5} className="empty-icon" />
<div className="empty-title">{t('hierarchy.empty')}</div>
<div className="empty-hint">
{isRemoteConnected
? 'No entities in remote game'
: 'Create an entity to get started'}
const query = searchQuery.toLowerCase();
return entityList.filter((entity) => {
const name = entity.name;
const id = entity.id.toString();
// Search by name or ID
if (name.toLowerCase().includes(query) || id.includes(query)) {
return true;
}
// Search by component types
if (Array.isArray(entity.componentTypes)) {
return entity.componentTypes.some((type) =>
type.toLowerCase().includes(query)
);
}
return false;
});
};
const filterLocalEntities = (entityList: Entity[]): Entity[] => {
if (!searchQuery.trim()) return entityList;
const query = searchQuery.toLowerCase();
return entityList.filter((entity) => {
const id = entity.id.toString();
return id.includes(query);
});
};
// Determine which entities to display
const displayEntities = isRemoteConnected
? filterRemoteEntities(remoteEntities)
: filterLocalEntities(entities);
const showRemoteIndicator = isRemoteConnected && remoteEntities.length > 0;
const displaySceneName = isRemoteConnected && remoteSceneName ? remoteSceneName : sceneName;
return (
<div className="scene-hierarchy">
<div className="hierarchy-header">
<Layers size={16} className="hierarchy-header-icon" />
<h3>{t('hierarchy.title')}</h3>
<div
className={`scene-name-container ${!isRemoteConnected && sceneFilePath ? 'clickable' : ''}`}
onClick={!isRemoteConnected ? handleSceneNameClick : undefined}
title={!isRemoteConnected && sceneFilePath ? `${displaySceneName} - 点击跳转到文件` : displaySceneName}
>
<span className="scene-name">
{displaySceneName}{!isRemoteConnected && isSceneModified ? '*' : ''}
</span>
</div>
{showRemoteIndicator && (
<div className="remote-indicator" title="Showing remote entities">
<Wifi size={12} />
</div>
)}
</div>
</div>
) : isRemoteConnected ? (
<ul className="entity-list">
{(displayEntities as RemoteEntity[]).map(entity => (
<li
key={entity.id}
className={`entity-item remote-entity ${selectedId === entity.id ? 'selected' : ''} ${!entity.enabled ? 'disabled' : ''}`}
title={`${entity.name} - ${entity.componentTypes.join(', ')}`}
onClick={() => handleRemoteEntityClick(entity)}
>
<Box size={14} className="entity-icon" />
<span className="entity-name">{entity.name}</span>
{entity.tag !== 0 && (
<span className="entity-tag" title={`Tag: ${entity.tag}`}>
<div className="hierarchy-search">
<Search size={14} />
<input
type="text"
placeholder={t('hierarchy.search') || 'Search entities...'}
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
</div>
{!isRemoteConnected && (
<div className="hierarchy-toolbar">
<button
className="toolbar-btn"
onClick={handleCreateEntity}
title={locale === 'zh' ? '创建实体' : 'Create Entity'}
>
<Plus size={14} />
<span>{locale === 'zh' ? '创建实体' : 'Create Entity'}</span>
</button>
<button
className="toolbar-btn"
onClick={handleDeleteEntity}
disabled={!selectedId}
title={locale === 'zh' ? '删除实体' : 'Delete Entity'}
>
<Trash2 size={14} />
</button>
</div>
)}
<div className="hierarchy-content scrollable">
{displayEntities.length === 0 ? (
<div className="empty-state">
<Box size={48} strokeWidth={1.5} className="empty-icon" />
<div className="empty-title">{t('hierarchy.empty')}</div>
<div className="empty-hint">
{isRemoteConnected
? 'No entities in remote game'
: 'Create an entity to get started'}
</div>
</div>
) : isRemoteConnected ? (
<ul className="entity-list">
{(displayEntities as RemoteEntity[]).map((entity) => (
<li
key={entity.id}
className={`entity-item remote-entity ${selectedId === entity.id ? 'selected' : ''} ${!entity.enabled ? 'disabled' : ''}`}
title={`${entity.name} - ${entity.componentTypes.join(', ')}`}
onClick={() => handleRemoteEntityClick(entity)}
>
<Box size={14} className="entity-icon" />
<span className="entity-name">{entity.name}</span>
{entity.tag !== 0 && (
<span className="entity-tag" title={`Tag: ${entity.tag}`}>
#{entity.tag}
</span>
</span>
)}
{entity.componentCount > 0 && (
<span className="component-count">{entity.componentCount}</span>
)}
</li>
))}
</ul>
) : (
<ul className="entity-list">
{entities.map((entity) => (
<li
key={entity.id}
className={`entity-item ${selectedId === entity.id ? 'selected' : ''}`}
onClick={() => handleEntityClick(entity)}
>
<Box size={14} className="entity-icon" />
<span className="entity-name">Entity {entity.id}</span>
</li>
))}
</ul>
)}
{entity.componentCount > 0 && (
<span className="component-count">{entity.componentCount}</span>
)}
</li>
))}
</ul>
) : (
<ul className="entity-list">
{entities.map(entity => (
<li
key={entity.id}
className={`entity-item ${selectedId === entity.id ? 'selected' : ''}`}
onClick={() => handleEntityClick(entity)}
>
<Box size={14} className="entity-icon" />
<span className="entity-name">Entity {entity.id}</span>
</li>
))}
</ul>
)}
</div>
</div>
);
</div>
</div>
);
}

504
packages/editor-app/src/components/SettingsWindow.tsx
View File

@@ -10,286 +10,286 @@ interface SettingsWindowProps {
}
export function SettingsWindow({ onClose, settingsRegistry }: SettingsWindowProps) {
const [categories, setCategories] = useState<SettingCategory[]>([]);
const [selectedCategoryId, setSelectedCategoryId] = useState<string | null>(null);
const [values, setValues] = useState<Map<string, any>>(new Map());
const [errors, setErrors] = useState<Map<string, string>>(new Map());
const [categories, setCategories] = useState<SettingCategory[]>([]);
const [selectedCategoryId, setSelectedCategoryId] = useState<string | null>(null);
const [values, setValues] = useState<Map<string, any>>(new Map());
const [errors, setErrors] = useState<Map<string, string>>(new Map());
useEffect(() => {
const allCategories = settingsRegistry.getAllCategories();
setCategories(allCategories);
useEffect(() => {
const allCategories = settingsRegistry.getAllCategories();
setCategories(allCategories);
if (allCategories.length > 0 && !selectedCategoryId) {
const firstCategory = allCategories[0];
if (firstCategory) {
setSelectedCategoryId(firstCategory.id);
}
}
if (allCategories.length > 0 && !selectedCategoryId) {
const firstCategory = allCategories[0];
if (firstCategory) {
setSelectedCategoryId(firstCategory.id);
}
}
const settings = SettingsService.getInstance();
const allSettings = settingsRegistry.getAllSettings();
const initialValues = new Map<string, any>();
const settings = SettingsService.getInstance();
const allSettings = settingsRegistry.getAllSettings();
const initialValues = new Map<string, any>();
for (const [key, descriptor] of allSettings.entries()) {
const value = settings.get(key, descriptor.defaultValue);
initialValues.set(key, value);
}
for (const [key, descriptor] of allSettings.entries()) {
const value = settings.get(key, descriptor.defaultValue);
initialValues.set(key, value);
}
setValues(initialValues);
}, [settingsRegistry, selectedCategoryId]);
setValues(initialValues);
}, [settingsRegistry, selectedCategoryId]);
const handleValueChange = (key: string, value: any, descriptor: SettingDescriptor) => {
const newValues = new Map(values);
newValues.set(key, value);
setValues(newValues);
const handleValueChange = (key: string, value: any, descriptor: SettingDescriptor) => {
const newValues = new Map(values);
newValues.set(key, value);
setValues(newValues);
const newErrors = new Map(errors);
if (!settingsRegistry.validateSetting(descriptor, value)) {
newErrors.set(key, descriptor.validator?.errorMessage || 'Invalid value');
} else {
newErrors.delete(key);
}
setErrors(newErrors);
};
const newErrors = new Map(errors);
if (!settingsRegistry.validateSetting(descriptor, value)) {
newErrors.set(key, descriptor.validator?.errorMessage || 'Invalid value');
} else {
newErrors.delete(key);
}
setErrors(newErrors);
};
const handleSave = () => {
if (errors.size > 0) {
return;
}
const handleSave = () => {
if (errors.size > 0) {
return;
}
const settings = SettingsService.getInstance();
const changedSettings: Record<string, any> = {};
const settings = SettingsService.getInstance();
const changedSettings: Record<string, any> = {};
for (const [key, value] of values.entries()) {
settings.set(key, value);
changedSettings[key] = value;
}
for (const [key, value] of values.entries()) {
settings.set(key, value);
changedSettings[key] = value;
}
window.dispatchEvent(new CustomEvent('settings:changed', {
detail: changedSettings
}));
window.dispatchEvent(new CustomEvent('settings:changed', {
detail: changedSettings
}));
onClose();
};
onClose();
};
const handleCancel = () => {
onClose();
};
const handleCancel = () => {
onClose();
};
const renderSettingInput = (setting: SettingDescriptor) => {
const value = values.get(setting.key) ?? setting.defaultValue;
const error = errors.get(setting.key);
const renderSettingInput = (setting: SettingDescriptor) => {
const value = values.get(setting.key) ?? setting.defaultValue;
const error = errors.get(setting.key);
switch (setting.type) {
case 'boolean':
return (
<div className="settings-field">
<label className="settings-label settings-label-checkbox">
<input
type="checkbox"
className="settings-checkbox"
checked={value}
onChange={(e) => handleValueChange(setting.key, e.target.checked, setting)}
/>
<span>{setting.label}</span>
{setting.description && (
<span className="settings-hint">{setting.description}</span>
)}
</label>
{error && <span className="settings-error">{error}</span>}
</div>
);
switch (setting.type) {
case 'boolean':
return (
<div className="settings-field">
<label className="settings-label settings-label-checkbox">
<input
type="checkbox"
className="settings-checkbox"
checked={value}
onChange={(e) => handleValueChange(setting.key, e.target.checked, setting)}
/>
<span>{setting.label}</span>
{setting.description && (
<span className="settings-hint">{setting.description}</span>
)}
</label>
{error && <span className="settings-error">{error}</span>}
</div>
);
case 'number':
return (
<div className="settings-field">
<label className="settings-label">
{setting.label}
{setting.description && (
<span className="settings-hint">{setting.description}</span>
)}
</label>
<input
type="number"
className={`settings-input ${error ? 'settings-input-error' : ''}`}
value={value}
onChange={(e) => handleValueChange(setting.key, parseInt(e.target.value) || 0, setting)}
placeholder={setting.placeholder}
min={setting.min}
max={setting.max}
step={setting.step}
/>
{error && <span className="settings-error">{error}</span>}
</div>
);
case 'number':
return (
<div className="settings-field">
<label className="settings-label">
{setting.label}
{setting.description && (
<span className="settings-hint">{setting.description}</span>
)}
</label>
<input
type="number"
className={`settings-input ${error ? 'settings-input-error' : ''}`}
value={value}
onChange={(e) => handleValueChange(setting.key, parseInt(e.target.value) || 0, setting)}
placeholder={setting.placeholder}
min={setting.min}
max={setting.max}
step={setting.step}
/>
{error && <span className="settings-error">{error}</span>}
</div>
);
case 'string':
return (
<div className="settings-field">
<label className="settings-label">
{setting.label}
{setting.description && (
<span className="settings-hint">{setting.description}</span>
)}
</label>
<input
type="text"
className={`settings-input ${error ? 'settings-input-error' : ''}`}
value={value}
onChange={(e) => handleValueChange(setting.key, e.target.value, setting)}
placeholder={setting.placeholder}
/>
{error && <span className="settings-error">{error}</span>}
</div>
);
case 'string':
return (
<div className="settings-field">
<label className="settings-label">
{setting.label}
{setting.description && (
<span className="settings-hint">{setting.description}</span>
)}
</label>
<input
type="text"
className={`settings-input ${error ? 'settings-input-error' : ''}`}
value={value}
onChange={(e) => handleValueChange(setting.key, e.target.value, setting)}
placeholder={setting.placeholder}
/>
{error && <span className="settings-error">{error}</span>}
</div>
);
case 'select':
return (
<div className="settings-field">
<label className="settings-label">
{setting.label}
{setting.description && (
<span className="settings-hint">{setting.description}</span>
)}
</label>
<select
className={`settings-select ${error ? 'settings-input-error' : ''}`}
value={value}
onChange={(e) => {
const option = setting.options?.find(opt => String(opt.value) === e.target.value);
if (option) {
handleValueChange(setting.key, option.value, setting);
}
}}
>
{setting.options?.map((option) => (
<option key={String(option.value)} value={String(option.value)}>
{option.label}
</option>
))}
</select>
{error && <span className="settings-error">{error}</span>}
</div>
);
case 'select':
return (
<div className="settings-field">
<label className="settings-label">
{setting.label}
{setting.description && (
<span className="settings-hint">{setting.description}</span>
)}
</label>
<select
className={`settings-select ${error ? 'settings-input-error' : ''}`}
value={value}
onChange={(e) => {
const option = setting.options?.find((opt) => String(opt.value) === e.target.value);
if (option) {
handleValueChange(setting.key, option.value, setting);
}
}}
>
{setting.options?.map((option) => (
<option key={String(option.value)} value={String(option.value)}>
{option.label}
</option>
))}
</select>
{error && <span className="settings-error">{error}</span>}
</div>
);
case 'range':
return (
<div className="settings-field">
<label className="settings-label">
{setting.label}
{setting.description && (
<span className="settings-hint">{setting.description}</span>
)}
</label>
<div className="settings-range-wrapper">
<input
type="range"
className="settings-range"
value={value}
onChange={(e) => handleValueChange(setting.key, parseFloat(e.target.value), setting)}
min={setting.min}
max={setting.max}
step={setting.step}
/>
<span className="settings-range-value">{value}</span>
</div>
{error && <span className="settings-error">{error}</span>}
</div>
);
case 'range':
return (
<div className="settings-field">
<label className="settings-label">
{setting.label}
{setting.description && (
<span className="settings-hint">{setting.description}</span>
)}
</label>
<div className="settings-range-wrapper">
<input
type="range"
className="settings-range"
value={value}
onChange={(e) => handleValueChange(setting.key, parseFloat(e.target.value), setting)}
min={setting.min}
max={setting.max}
step={setting.step}
/>
<span className="settings-range-value">{value}</span>
</div>
{error && <span className="settings-error">{error}</span>}
</div>
);
case 'color':
return (
<div className="settings-field">
<label className="settings-label">
{setting.label}
{setting.description && (
<span className="settings-hint">{setting.description}</span>
)}
</label>
<input
type="color"
className="settings-color-input"
value={value}
onChange={(e) => handleValueChange(setting.key, e.target.value, setting)}
/>
{error && <span className="settings-error">{error}</span>}
</div>
);
case 'color':
return (
<div className="settings-field">
<label className="settings-label">
{setting.label}
{setting.description && (
<span className="settings-hint">{setting.description}</span>
)}
</label>
<input
type="color"
className="settings-color-input"
value={value}
onChange={(e) => handleValueChange(setting.key, e.target.value, setting)}
/>
{error && <span className="settings-error">{error}</span>}
</div>
);
default:
return null;
}
};
default:
return null;
}
};
const selectedCategory = categories.find(c => c.id === selectedCategoryId);
const selectedCategory = categories.find((c) => c.id === selectedCategoryId);
return (
<div className="settings-overlay">
<div className="settings-window">
<div className="settings-header">
<div className="settings-title">
<SettingsIcon size={18} />
<h2>设置</h2>
</div>
<button className="settings-close-btn" onClick={handleCancel}>
<X size={18} />
</button>
</div>
return (
<div className="settings-overlay">
<div className="settings-window">
<div className="settings-header">
<div className="settings-title">
<SettingsIcon size={18} />
<h2>设置</h2>
</div>
<button className="settings-close-btn" onClick={handleCancel}>
<X size={18} />
</button>
</div>
<div className="settings-body">
<div className="settings-sidebar">
{categories.map((category) => (
<button
key={category.id}
className={`settings-category-btn ${selectedCategoryId === category.id ? 'active' : ''}`}
onClick={() => setSelectedCategoryId(category.id)}
>
<span className="settings-category-title">{category.title}</span>
{category.description && (
<span className="settings-category-desc">{category.description}</span>
)}
<ChevronRight size={14} className="settings-category-arrow" />
</button>
))}
</div>
<div className="settings-body">
<div className="settings-sidebar">
{categories.map((category) => (
<button
key={category.id}
className={`settings-category-btn ${selectedCategoryId === category.id ? 'active' : ''}`}
onClick={() => setSelectedCategoryId(category.id)}
>
<span className="settings-category-title">{category.title}</span>
{category.description && (
<span className="settings-category-desc">{category.description}</span>
)}
<ChevronRight size={14} className="settings-category-arrow" />
</button>
))}
</div>
<div className="settings-content">
{selectedCategory && selectedCategory.sections.map((section) => (
<div key={section.id} className="settings-section">
<h3 className="settings-section-title">{section.title}</h3>
{section.description && (
<p className="settings-section-description">{section.description}</p>
)}
{section.settings.map((setting) => (
<div key={setting.key}>
{renderSettingInput(setting)}
</div>
))}
</div>
))}
<div className="settings-content">
{selectedCategory && selectedCategory.sections.map((section) => (
<div key={section.id} className="settings-section">
<h3 className="settings-section-title">{section.title}</h3>
{section.description && (
<p className="settings-section-description">{section.description}</p>
)}
{section.settings.map((setting) => (
<div key={setting.key}>
{renderSettingInput(setting)}
</div>
))}
</div>
))}
{!selectedCategory && (
<div className="settings-empty">
<SettingsIcon size={48} />
<p>请选择一个设置分类</p>
</div>
)}
</div>
</div>
{!selectedCategory && (
<div className="settings-empty">
<SettingsIcon size={48} />
<p>请选择一个设置分类</p>
</div>
)}
</div>
</div>
<div className="settings-footer">
<button className="settings-btn settings-btn-cancel" onClick={handleCancel}>
<div className="settings-footer">
<button className="settings-btn settings-btn-cancel" onClick={handleCancel}>
取消
</button>
<button
className="settings-btn settings-btn-save"
onClick={handleSave}
disabled={errors.size > 0}
>
</button>
<button
className="settings-btn settings-btn-save"
onClick={handleSave}
disabled={errors.size > 0}
>
保存
</button>
</button>
</div>
</div>
</div>
</div>
</div>
);
);
}

174
packages/editor-app/src/components/StartupPage.tsx
View File

@@ -11,98 +11,98 @@ interface StartupPageProps {
}
export function StartupPage({ onOpenProject, onCreateProject, onOpenRecentProject, onProfilerMode, recentProjects = [], locale }: StartupPageProps) {
const [hoveredProject, setHoveredProject] = useState<string | null>(null);
const [hoveredProject, setHoveredProject] = useState<string | null>(null);
const translations = {
en: {
title: 'ECS Framework Editor',
subtitle: 'Professional Game Development Tool',
openProject: 'Open Project',
createProject: 'Create Project',
profilerMode: 'Profiler Mode',
recentProjects: 'Recent Projects',
noRecentProjects: 'No recent projects',
version: 'Version 1.0.0',
comingSoon: 'Coming Soon'
},
zh: {
title: 'ECS 框架编辑器',
subtitle: '专业游戏开发工具',
openProject: '打开项目',
createProject: '创建新项目',
profilerMode: '性能分析模式',
recentProjects: '最近的项目',
noRecentProjects: '没有最近的项目',
version: '版本 1.0.0',
comingSoon: '即将推出'
}
};
const translations = {
en: {
title: 'ECS Framework Editor',
subtitle: 'Professional Game Development Tool',
openProject: 'Open Project',
createProject: 'Create Project',
profilerMode: 'Profiler Mode',
recentProjects: 'Recent Projects',
noRecentProjects: 'No recent projects',
version: 'Version 1.0.0',
comingSoon: 'Coming Soon'
},
zh: {
title: 'ECS 框架编辑器',
subtitle: '专业游戏开发工具',
openProject: '打开项目',
createProject: '创建新项目',
profilerMode: '性能分析模式',
recentProjects: '最近的项目',
noRecentProjects: '没有最近的项目',
version: '版本 1.0.0',
comingSoon: '即将推出'
}
};
const t = translations[locale as keyof typeof translations] || translations.en;
const t = translations[locale as keyof typeof translations] || translations.en;
return (
<div className="startup-page">
<div className="startup-header">
<h1 className="startup-title">{t.title}</h1>
<p className="startup-subtitle">{t.subtitle}</p>
</div>
return (
<div className="startup-page">
<div className="startup-header">
<h1 className="startup-title">{t.title}</h1>
<p className="startup-subtitle">{t.subtitle}</p>
</div>
<div className="startup-content">
<div className="startup-actions">
<button className="startup-action-btn primary" onClick={onOpenProject}>
<svg className="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M3 7V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V9C21 7.89543 20.1046 7 19 7H13L11 5H5C3.89543 5 3 5.89543 3 7Z" strokeWidth="2"/>
</svg>
<span>{t.openProject}</span>
</button>
<div className="startup-content">
<div className="startup-actions">
<button className="startup-action-btn primary" onClick={onOpenProject}>
<svg className="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M3 7V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V9C21 7.89543 20.1046 7 19 7H13L11 5H5C3.89543 5 3 5.89543 3 7Z" strokeWidth="2"/>
</svg>
<span>{t.openProject}</span>
</button>
<button className="startup-action-btn" onClick={onCreateProject}>
<svg className="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M12 5V19M5 12H19" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
<span>{t.createProject}</span>
</button>
<button className="startup-action-btn" onClick={onCreateProject}>
<svg className="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M12 5V19M5 12H19" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
<span>{t.createProject}</span>
</button>
<button className="startup-action-btn" onClick={onProfilerMode}>
<svg className="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
<span>{t.profilerMode}</span>
</button>
<button className="startup-action-btn" onClick={onProfilerMode}>
<svg className="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
<span>{t.profilerMode}</span>
</button>
</div>
<div className="startup-recent">
<h2 className="recent-title">{t.recentProjects}</h2>
{recentProjects.length === 0 ? (
<p className="recent-empty">{t.noRecentProjects}</p>
) : (
<ul className="recent-list">
{recentProjects.map((project, index) => (
<li
key={index}
className={`recent-item ${hoveredProject === project ? 'hovered' : ''}`}
onMouseEnter={() => setHoveredProject(project)}
onMouseLeave={() => setHoveredProject(null)}
onClick={() => onOpenRecentProject?.(project)}
style={{ cursor: onOpenRecentProject ? 'pointer' : 'default' }}
>
<svg className="recent-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M3 7V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V9C21 7.89543 20.1046 7 19 7H13L11 5H5C3.89543 5 3 5.89543 3 7Z" strokeWidth="2"/>
</svg>
<div className="recent-info">
<div className="recent-name">{project.split(/[\\/]/).pop()}</div>
<div className="recent-path">{project}</div>
</div>
</li>
))}
</ul>
)}
</div>
</div>
<div className="startup-footer">
<span className="startup-version">{t.version}</span>
</div>
</div>
<div className="startup-recent">
<h2 className="recent-title">{t.recentProjects}</h2>
{recentProjects.length === 0 ? (
<p className="recent-empty">{t.noRecentProjects}</p>
) : (
<ul className="recent-list">
{recentProjects.map((project, index) => (
<li
key={index}
className={`recent-item ${hoveredProject === project ? 'hovered' : ''}`}
onMouseEnter={() => setHoveredProject(project)}
onMouseLeave={() => setHoveredProject(null)}
onClick={() => onOpenRecentProject?.(project)}
style={{ cursor: onOpenRecentProject ? 'pointer' : 'default' }}
>
<svg className="recent-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M3 7V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V9C21 7.89543 20.1046 7 19 7H13L11 5H5C3.89543 5 3 5.89543 3 7Z" strokeWidth="2"/>
</svg>
<div className="recent-info">
<div className="recent-name">{project.split(/[\\/]/).pop()}</div>
<div className="recent-path">{project}</div>
</div>
</li>
))}
</ul>
)}
</div>
</div>
<div className="startup-footer">
<span className="startup-version">{t.version}</span>
</div>
</div>
);
);
}

6
packages/editor-app/src/components/Toast.tsx
View File

@@ -37,7 +37,7 @@ export const ToastProvider: React.FC<ToastProviderProps> = ({ children }) => {
const id = `toast-${Date.now()}-${Math.random()}`;
const toast: Toast = { id, message, type, duration };
setToasts(prev => [...prev, toast]);
setToasts((prev) => [...prev, toast]);
if (duration > 0) {
setTimeout(() => {
@@ -47,7 +47,7 @@ export const ToastProvider: React.FC<ToastProviderProps> = ({ children }) => {
}, []);
const hideToast = useCallback((id: string) => {
setToasts(prev => prev.filter(t => t.id !== id));
setToasts((prev) => prev.filter((t) => t.id !== id));
}, []);
const getIcon = (type: ToastType) => {
@@ -67,7 +67,7 @@ export const ToastProvider: React.FC<ToastProviderProps> = ({ children }) => {
<ToastContext.Provider value={{ showToast, hideToast }}>
{children}
<div className="toast-container">
{toasts.map(toast => (
{toasts.map((toast) => (
<div key={toast.id} className={`toast toast-${toast.type}`}>
<div className="toast-icon">
{getIcon(toast.type)}

1152
packages/editor-app/src/components/Viewport.tsx
View File

File diff suppressed because it is too large Load Diff