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

更新图标及场景序列化系统

Browse Source
This commit is contained in:
YHH
2025-10-17 18:13:31 +08:00
parent 2ce7dad8d8
commit b826bbc4c7
74 changed files with 1382 additions and 721 deletions
Download Patch File Download Diff File Expand all files Collapse all files

291
packages/editor-app/src/App.tsx
View File

@@ -1,6 +1,6 @@
import { useState, useEffect, useRef } from 'react';
import { useState, useEffect, useRef, useCallback } from 'react';
import { Core, Scene } from '@esengine/ecs-framework';
import { EditorPluginManager, UIRegistry, MessageHub, SerializerRegistry, EntityStoreService, ComponentRegistry, LocaleService, ProjectService, ComponentDiscoveryService, ComponentLoaderService, PropertyMetadataService, LogService, SettingsRegistry } from '@esengine/editor-core';
import { EditorPluginManager, UIRegistry, MessageHub, SerializerRegistry, EntityStoreService, ComponentRegistry, LocaleService, ProjectService, ComponentDiscoveryService, PropertyMetadataService, LogService, SettingsRegistry, SceneManagerService } from '@esengine/editor-core';
import { SceneInspectorPlugin } from './plugins/SceneInspectorPlugin';
import { ProfilerPlugin } from './plugins/ProfilerPlugin';
import { StartupPage } from './components/StartupPage';
@@ -13,10 +13,13 @@ import { ProfilerWindow } from './components/ProfilerWindow';
import { PortManager } from './components/PortManager';
import { SettingsWindow } from './components/SettingsWindow';
import { AboutDialog } from './components/AboutDialog';
import { ErrorDialog } from './components/ErrorDialog';
import { ConfirmDialog } from './components/ConfirmDialog';
import { Viewport } from './components/Viewport';
import { MenuBar } from './components/MenuBar';
import { DockContainer, DockablePanel } from './components/DockContainer';
import { TauriAPI } from './api/tauri';
import { TauriFileAPI } from './adapters/TauriFileAPI';
import { SettingsService } from './services/SettingsService';
import { checkForUpdatesOnStartup } from './utils/updater';
import { useLocale } from './hooks/useLocale';
@@ -44,6 +47,7 @@ function App() {
const [logService, setLogService] = useState<LogService | null>(null);
const [uiRegistry, setUiRegistry] = useState<UIRegistry | null>(null);
const [settingsRegistry, setSettingsRegistry] = useState<SettingsRegistry | null>(null);
const [sceneManager, setSceneManager] = useState<SceneManagerService | null>(null);
const { t, locale, changeLocale } = useLocale();
const [status, setStatus] = useState(t('header.status.initializing'));
const [panels, setPanels] = useState<DockablePanel[]>([]);
@@ -55,6 +59,14 @@ function App() {
const [pluginUpdateTrigger, setPluginUpdateTrigger] = useState(0);
const [isRemoteConnected, setIsRemoteConnected] = useState(false);
const [isProfilerMode, setIsProfilerMode] = useState(false);
const [errorDialog, setErrorDialog] = useState<{ title: string; message: string } | null>(null);
const [confirmDialog, setConfirmDialog] = useState<{
title: string;
message: string;
confirmText: string;
cancelText: string;
onConfirm: () => void;
} | null>(null);
useEffect(() => {
// 禁用默认右键菜单
@@ -72,12 +84,10 @@ function App() {
useEffect(() => {
if (messageHub) {
const unsubscribeEnabled = messageHub.subscribe('plugin:enabled', () => {
console.log('[App] Plugin enabled, updating panels');
setPluginUpdateTrigger(prev => prev + 1);
});
const unsubscribeDisabled = messageHub.subscribe('plugin:disabled', () => {
console.log('[App] Plugin disabled, updating panels');
setPluginUpdateTrigger(prev => prev + 1);
});
@@ -94,13 +104,11 @@ function App() {
const profilerService = (window as any).__PROFILER_SERVICE__;
if (profilerService && profilerService.isConnected()) {
if (!isRemoteConnected) {
console.log('[App] Remote game connected');
setIsRemoteConnected(true);
setStatus(t('header.status.remoteConnected'));
}
} else {
if (isRemoteConnected) {
console.log('[App] Remote game disconnected');
setIsRemoteConnected(false);
if (projectLoaded) {
const componentRegistry = Core.services.resolve(ComponentRegistry);
@@ -123,13 +131,11 @@ function App() {
const initializeEditor = async () => {
// 使用 ref 防止 React StrictMode 的双重调用
if (initRef.current) {
console.log('[App] Already initialized via ref, skipping second initialization');
return;
}
initRef.current = true;
try {
console.log('[App] Starting editor initialization...');
(window as any).__ECS_FRAMEWORK__ = await import('@esengine/ecs-framework');
const editorScene = new Scene();
@@ -140,12 +146,13 @@ function App() {
const serializerRegistry = new SerializerRegistry();
const entityStore = new EntityStoreService(messageHub);
const componentRegistry = new ComponentRegistry();
const projectService = new ProjectService(messageHub);
const fileAPI = new TauriFileAPI();
const projectService = new ProjectService(messageHub, fileAPI);
const componentDiscovery = new ComponentDiscoveryService(messageHub);
const componentLoader = new ComponentLoaderService(messageHub, componentRegistry);
const propertyMetadata = new PropertyMetadataService();
const logService = new LogService();
const settingsRegistry = new SettingsRegistry();
const sceneManagerService = new SceneManagerService(messageHub, fileAPI, projectService);
// 监听远程日志事件
window.addEventListener('profiler:remote-log', ((event: CustomEvent) => {
@@ -160,10 +167,10 @@ function App() {
Core.services.registerInstance(ComponentRegistry, componentRegistry);
Core.services.registerInstance(ProjectService, projectService);
Core.services.registerInstance(ComponentDiscoveryService, componentDiscovery);
Core.services.registerInstance(ComponentLoaderService, componentLoader);
Core.services.registerInstance(PropertyMetadataService, propertyMetadata);
Core.services.registerInstance(LogService, logService);
Core.services.registerInstance(SettingsRegistry, settingsRegistry);
Core.services.registerInstance(SceneManagerService, sceneManagerService);
const pluginMgr = new EditorPluginManager();
pluginMgr.initialize(coreInstance, Core.services);
@@ -172,11 +179,6 @@ function App() {
await pluginMgr.installEditor(new SceneInspectorPlugin());
await pluginMgr.installEditor(new ProfilerPlugin());
console.log('[App] All plugins installed');
console.log('[App] UIRegistry menu count:', uiRegistry.getAllMenus().length);
console.log('[App] UIRegistry all menus:', uiRegistry.getAllMenus());
console.log('[App] UIRegistry window menus:', uiRegistry.getChildMenus('window'));
messageHub.subscribe('ui:openWindow', (data: any) => {
if (data.windowId === 'profiler') {
setShowProfiler(true);
@@ -185,8 +187,7 @@ function App() {
}
});
const greeting = await TauriAPI.greet('Developer');
console.log(greeting);
await TauriAPI.greet('Developer');
setInitialized(true);
setPluginManager(pluginMgr);
@@ -195,6 +196,7 @@ function App() {
setLogService(logService);
setUiRegistry(uiRegistry);
setSettingsRegistry(settingsRegistry);
setSceneManager(sceneManagerService);
setStatus(t('header.status.ready'));
// Check for updates on startup (after 3 seconds)
@@ -211,13 +213,11 @@ function App() {
const handleOpenRecentProject = async (projectPath: string) => {
try {
setIsLoading(true);
setLoadingMessage(locale === 'zh' ? '正在打开项目...' : 'Opening project...');
setLoadingMessage(locale === 'zh' ? '步骤 1/2: 打开项目配置...' : 'Step 1/2: Opening project config...');
const projectService = Core.services.resolve(ProjectService);
const discoveryService = Core.services.resolve(ComponentDiscoveryService);
const loaderService = Core.services.resolve(ComponentLoaderService);
if (!projectService || !discoveryService || !loaderService) {
if (!projectService) {
console.error('Required services not available');
setIsLoading(false);
return;
@@ -231,31 +231,27 @@ function App() {
body: JSON.stringify({ path: projectPath })
});
setLoadingMessage(locale === 'zh' ? '正在扫描组件...' : 'Scanning components...');
setStatus('Scanning components...');
setStatus(t('header.status.projectOpened'));
const componentsPath = projectService.getComponentsPath();
if (componentsPath) {
const componentInfos = await discoveryService.scanComponents({
basePath: componentsPath,
pattern: '**/*.ts',
scanFunction: TauriAPI.scanDirectory,
readFunction: TauriAPI.readFileContent
});
setLoadingMessage(locale === 'zh' ? '步骤 2/2: 加载场景...' : 'Step 2/2: Loading scene...');
setLoadingMessage(locale === 'zh' ? `正在加载 ${componentInfos.length} 个组件...` : `Loading ${componentInfos.length} components...`);
setStatus(`Loading ${componentInfos.length} components...`);
const sceneManagerService = Core.services.resolve(SceneManagerService);
const scenesPath = projectService.getScenesPath();
if (scenesPath && sceneManagerService) {
try {
const sceneFiles = await TauriAPI.scanDirectory(scenesPath, '*.ecs');
const modulePathTransform = (filePath: string) => {
const relativePath = filePath.replace(projectPath, '').replace(/\\/g, '/');
return `/@user-project${relativePath}`;
};
if (sceneFiles.length > 0) {
const defaultScenePath = projectService.getDefaultScenePath();
const sceneToLoad = sceneFiles.find(f => f === defaultScenePath) || sceneFiles[0];
await loaderService.loadComponents(componentInfos, modulePathTransform);
setStatus(t('header.status.projectOpened') + ` (${componentInfos.length} components registered)`);
} else {
setStatus(t('header.status.projectOpened'));
await sceneManagerService.openScene(sceneToLoad);
} else {
await sceneManagerService.newScene();
}
} catch (error) {
await sceneManagerService.newScene();
}
}
const settings = SettingsService.getInstance();
@@ -268,6 +264,14 @@ function App() {
console.error('Failed to open project:', error);
setStatus(t('header.status.failed'));
setIsLoading(false);
const errorMessage = error instanceof Error ? error.message : String(error);
setErrorDialog({
title: locale === 'zh' ? '打开项目失败' : 'Failed to Open Project',
message: locale === 'zh'
? `无法打开项目:\n${errorMessage}`
: `Failed to open project:\n${errorMessage}`
});
}
};
@@ -283,7 +287,72 @@ function App() {
};
const handleCreateProject = async () => {
console.log('Create project not implemented yet');
let selectedProjectPath: string | null = null;
try {
selectedProjectPath = await TauriAPI.openProjectDialog();
if (!selectedProjectPath) return;
setIsLoading(true);
setLoadingMessage(locale === 'zh' ? '正在创建项目...' : 'Creating project...');
const projectService = Core.services.resolve(ProjectService);
if (!projectService) {
console.error('ProjectService not available');
setIsLoading(false);
setErrorDialog({
title: locale === 'zh' ? '创建项目失败' : 'Failed to Create Project',
message: locale === 'zh' ? '项目服务不可用，请重启编辑器' : 'Project service is not available. Please restart the editor.'
});
return;
}
await projectService.createProject(selectedProjectPath);
setLoadingMessage(locale === 'zh' ? '项目创建成功，正在打开...' : 'Project created, opening...');
await handleOpenRecentProject(selectedProjectPath);
} catch (error) {
console.error('Failed to create project:', error);
setIsLoading(false);
const errorMessage = error instanceof Error ? error.message : String(error);
const pathToOpen = selectedProjectPath;
if (errorMessage.includes('already exists') && pathToOpen) {
setConfirmDialog({
title: locale === 'zh' ? '项目已存在' : 'Project Already Exists',
message: locale === 'zh'
? '该目录下已存在 ECS 项目，是否要打开该项目？'
: 'An ECS project already exists in this directory. Do you want to open it?',
confirmText: locale === 'zh' ? '打开项目' : 'Open Project',
cancelText: locale === 'zh' ? '取消' : 'Cancel',
onConfirm: () => {
setConfirmDialog(null);
setIsLoading(true);
setLoadingMessage(locale === 'zh' ? '正在打开项目...' : 'Opening project...');
handleOpenRecentProject(pathToOpen).catch((err) => {
console.error('Failed to open project:', err);
setIsLoading(false);
setErrorDialog({
title: locale === 'zh' ? '打开项目失败' : 'Failed to Open Project',
message: locale === 'zh'
? `无法打开项目:\n${err instanceof Error ? err.message : String(err)}`
: `Failed to open project:\n${err instanceof Error ? err.message : String(err)}`
});
});
}
});
} else {
setStatus(locale === 'zh' ? '创建项目失败' : 'Failed to create project');
setErrorDialog({
title: locale === 'zh' ? '创建项目失败' : 'Failed to Create Project',
message: locale === 'zh'
? `无法创建项目:\n${errorMessage}`
: `Failed to create project:\n${errorMessage}`
});
}
}
};
const handleProfilerMode = async () => {
@@ -292,20 +361,109 @@ function App() {
setStatus(t('header.status.profilerMode') || 'Profiler Mode - Waiting for connection...');
};
const handleNewScene = () => {
console.log('New scene not implemented yet');
const handleNewScene = async () => {
if (!sceneManager) {
console.error('SceneManagerService not available');
return;
}
try {
await sceneManager.newScene();
setStatus(locale === 'zh' ? '已创建新场景' : 'New scene created');
} catch (error) {
console.error('Failed to create new scene:', error);
setStatus(locale === 'zh' ? '创建场景失败' : 'Failed to create scene');
}
};
const handleOpenScene = () => {
console.log('Open scene not implemented yet');
const handleOpenScene = async () => {
if (!sceneManager) {
console.error('SceneManagerService not available');
return;
}
try {
await sceneManager.openScene();
const sceneState = sceneManager.getSceneState();
setStatus(locale === 'zh' ? `已打开场景: ${sceneState.sceneName}` : `Scene opened: ${sceneState.sceneName}`);
} catch (error) {
console.error('Failed to open scene:', error);
setStatus(locale === 'zh' ? '打开场景失败' : 'Failed to open scene');
}
};
const handleSaveScene = () => {
console.log('Save scene not implemented yet');
const handleOpenSceneByPath = useCallback(async (scenePath: string) => {
console.log('[App] handleOpenSceneByPath called with:', scenePath);
if (!sceneManager) {
console.error('SceneManagerService not available');
return;
}
try {
console.log('[App] Opening scene:', scenePath);
await sceneManager.openScene(scenePath);
const sceneState = sceneManager.getSceneState();
console.log('[App] Scene opened, state:', sceneState);
setStatus(locale === 'zh' ? `已打开场景: ${sceneState.sceneName}` : `Scene opened: ${sceneState.sceneName}`);
} catch (error) {
console.error('Failed to open scene:', error);
setStatus(locale === 'zh' ? '打开场景失败' : 'Failed to open scene');
setErrorDialog({
title: locale === 'zh' ? '打开场景失败' : 'Failed to Open Scene',
message: locale === 'zh'
? `无法打开场景:\n${error instanceof Error ? error.message : String(error)}`
: `Failed to open scene:\n${error instanceof Error ? error.message : String(error)}`
});
}
}, [sceneManager, locale]);
const handleSaveScene = async () => {
if (!sceneManager) {
console.error('SceneManagerService not available');
return;
}
try {
await sceneManager.saveScene();
const sceneState = sceneManager.getSceneState();
setStatus(locale === 'zh' ? `已保存场景: ${sceneState.sceneName}` : `Scene saved: ${sceneState.sceneName}`);
} catch (error) {
console.error('Failed to save scene:', error);
setStatus(locale === 'zh' ? '保存场景失败' : 'Failed to save scene');
}
};
const handleSaveSceneAs = () => {
console.log('Save scene as not implemented yet');
const handleSaveSceneAs = async () => {
if (!sceneManager) {
console.error('SceneManagerService not available');
return;
}
try {
await sceneManager.saveSceneAs();
const sceneState = sceneManager.getSceneState();
setStatus(locale === 'zh' ? `已保存场景: ${sceneState.sceneName}` : `Scene saved: ${sceneState.sceneName}`);
} catch (error) {
console.error('Failed to save scene as:', error);
setStatus(locale === 'zh' ? '另存场景失败' : 'Failed to save scene as');
}
};
const handleExportScene = async () => {
if (!sceneManager) {
console.error('SceneManagerService not available');
return;
}
try {
await sceneManager.exportScene();
const sceneState = sceneManager.getSceneState();
setStatus(locale === 'zh' ? `已导出场景: ${sceneState.sceneName}` : `Scene exported: ${sceneState.sceneName}`);
} catch (error) {
console.error('Failed to export scene:', error);
setStatus(locale === 'zh' ? '导出场景失败' : 'Failed to export scene');
}
};
const handleCloseProject = () => {
@@ -391,7 +549,7 @@ function App() {
id: 'assets',
title: locale === 'zh' ? '资产' : 'Assets',
position: 'bottom',
content: <AssetBrowser projectPath={currentProjectPath} locale={locale} />,
content: <AssetBrowser projectPath={currentProjectPath} locale={locale} onOpenScene={handleOpenSceneByPath} />,
closable: false
},
{
@@ -436,7 +594,7 @@ function App() {
console.log('[App] Loading plugin panels:', pluginPanels);
setPanels([...corePanels, ...pluginPanels]);
}
}, [projectLoaded, entityStore, messageHub, logService, uiRegistry, pluginManager, locale, currentProjectPath, t, pluginUpdateTrigger, isProfilerMode]);
}, [projectLoaded, entityStore, messageHub, logService, uiRegistry, pluginManager, locale, currentProjectPath, t, pluginUpdateTrigger, isProfilerMode, handleOpenSceneByPath]);
const handlePanelMove = (panelId: string, newPosition: any) => {
setPanels(prevPanels =>
@@ -477,6 +635,23 @@ function App() {
</div>
</div>
)}
{errorDialog && (
<ErrorDialog
title={errorDialog.title}
message={errorDialog.message}
onClose={() => setErrorDialog(null)}
/>
)}
{confirmDialog && (
<ConfirmDialog
title={confirmDialog.title}
message={confirmDialog.message}
confirmText={confirmDialog.confirmText}
cancelText={confirmDialog.cancelText}
onConfirm={confirmDialog.onConfirm}
onCancel={() => setConfirmDialog(null)}
/>
)}
</>
);
}
@@ -543,6 +718,14 @@ function App() {
{showAbout && (
<AboutDialog onClose={() => setShowAbout(false)} locale={locale} />
)}
{errorDialog && (
<ErrorDialog
title={errorDialog.title}
message={errorDialog.message}
onClose={() => setErrorDialog(null)}
/>
)}
</div>
);
}

41
packages/editor-app/src/adapters/TauriFileAPI.ts Normal file
View File

@@ -0,0 +1,41 @@
import type { IFileAPI } from '@esengine/editor-core';
import { TauriAPI } from '../api/tauri';
/**
* Tauri 文件 API 适配器
*
* 实现 IFileAPI 接口，连接 editor-core 和 Tauri 后端
*/
export class TauriFileAPI implements IFileAPI {
public async openSceneDialog(): Promise<string | null> {
return await TauriAPI.openSceneDialog();
}
public async saveSceneDialog(defaultName?: string): Promise<string | null> {
return await TauriAPI.saveSceneDialog(defaultName);
}
public async readFileContent(path: string): Promise<string> {
return await TauriAPI.readFileContent(path);
}
public async saveProject(path: string, data: string): Promise<void> {
return await TauriAPI.saveProject(path, data);
}
public async exportBinary(data: Uint8Array, path: string): Promise<void> {
return await TauriAPI.exportBinary(data, path);
}
public async createDirectory(path: string): Promise<void> {
return await TauriAPI.createDirectory(path);
}
public async writeFileContent(path: string, content: string): Promise<void> {
return await TauriAPI.writeFileContent(path, content);
}
public async pathExists(path: string): Promise<boolean> {
return await TauriAPI.pathExists(path);
}
}

43
packages/editor-app/src/api/tauri.ts
View File

@@ -70,6 +70,49 @@ export class TauriAPI {
static async toggleDevtools(): Promise<void> {
return await invoke<void>('toggle_devtools');
}
/**
* 打开保存场景对话框
* @param defaultName 默认文件名（可选）
* @returns 用户选择的文件路径，取消则返回 null
*/
static async saveSceneDialog(defaultName?: string): Promise<string | null> {
return await invoke<string | null>('save_scene_dialog', { defaultName });
}
/**
* 打开场景文件选择对话框
* @returns 用户选择的文件路径，取消则返回 null
*/
static async openSceneDialog(): Promise<string | null> {
return await invoke<string | null>('open_scene_dialog');
}
/**
* 创建目录
* @param path 目录路径
*/
static async createDirectory(path: string): Promise<void> {
return await invoke<void>('create_directory', { path });
}
/**
* 写入文件内容
* @param path 文件路径
* @param content 文件内容
*/
static async writeFileContent(path: string, content: string): Promise<void> {
return await invoke<void>('write_file_content', { path, content });
}
/**
* 检查路径是否存在
* @param path 文件或目录路径
* @returns 路径是否存在
*/
static async pathExists(path: string): Promise<boolean> {
return await invoke<boolean>('path_exists', { path });
}
}
export interface DirectoryEntry {

175
packages/editor-app/src/components/AddComponent.css
View File

@@ -1,175 +0,0 @@
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.add-component-dialog {
background-color: #2d2d2d;
border-radius: 8px;
width: 500px;
max-width: 90%;
max-height: 80vh;
display: flex;
flex-direction: column;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.dialog-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid #404040;
}
.dialog-header h3 {
margin: 0;
font-size: 16px;
color: #fff;
}
.close-btn {
background: none;
border: none;
color: #aaa;
font-size: 24px;
cursor: pointer;
padding: 0;
width: 24px;
height: 24px;
line-height: 20px;
transition: color 0.2s;
}
.close-btn:hover {
color: #fff;
}
.dialog-content {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
padding: 16px 20px;
}
.component-filter {
width: 100%;
padding: 8px 12px;
background-color: #1e1e1e;
border: 1px solid #404040;
border-radius: 4px;
color: #fff;
font-size: 14px;
margin-bottom: 12px;
}
.component-filter:focus {
outline: none;
border-color: #007acc;
}
.component-list {
flex: 1;
overflow-y: auto;
min-height: 200px;
max-height: 400px;
}
.component-category {
margin-bottom: 16px;
}
.category-header {
font-size: 12px;
font-weight: 600;
color: #888;
text-transform: uppercase;
margin-bottom: 8px;
padding-bottom: 4px;
border-bottom: 1px solid #404040;
}
.component-option {
padding: 10px 12px;
cursor: pointer;
border-radius: 4px;
margin-bottom: 4px;
transition: background-color 0.2s;
}
.component-option:hover {
background-color: #3a3a3a;
}
.component-option.selected {
background-color: #094771;
border: 1px solid #007acc;
}
.component-name {
font-size: 14px;
color: #fff;
font-weight: 500;
margin-bottom: 2px;
}
.component-description {
font-size: 12px;
color: #aaa;
}
.empty-message {
color: #888;
text-align: center;
padding: 40px 20px;
font-size: 14px;
}
.dialog-footer {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 16px 20px;
border-top: 1px solid #404040;
}
.btn {
padding: 8px 16px;
border-radius: 4px;
border: none;
cursor: pointer;
font-size: 14px;
transition: all 0.2s;
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn-cancel {
background-color: #3a3a3a;
color: #fff;
}
.btn-cancel:hover:not(:disabled) {
background-color: #4a4a4a;
}
.btn-primary {
background-color: #007acc;
color: #fff;
}
.btn-primary:hover:not(:disabled) {
background-color: #0098ff;
}

121
packages/editor-app/src/components/AddComponent.tsx
View File

@@ -1,121 +0,0 @@
import { useState, useEffect } from 'react';
import { Entity } from '@esengine/ecs-framework';
import { ComponentRegistry, ComponentTypeInfo } from '@esengine/editor-core';
import './AddComponent.css';
interface AddComponentProps {
entity: Entity;
componentRegistry: ComponentRegistry;
onAdd: (componentName: string) => void;
onCancel: () => void;
}
export function AddComponent({ entity, componentRegistry, onAdd, onCancel }: AddComponentProps) {
const [components, setComponents] = useState<ComponentTypeInfo[]>([]);
const [selectedComponent, setSelectedComponent] = useState<string | null>(null);
const [filter, setFilter] = useState('');
useEffect(() => {
if (!componentRegistry) {
console.error('ComponentRegistry is null');
return;
}
const allComponents = componentRegistry.getAllComponents();
console.log('All registered components:', allComponents);
allComponents.forEach(comp => {
console.log(`Component ${comp.name}: has type = ${!!comp.type}`);
});
const existingComponentNames = entity.components.map(c => c.constructor.name);
const availableComponents = allComponents.filter(
comp => comp.type && !existingComponentNames.includes(comp.name)
);
console.log('Available components to add:', availableComponents);
console.log('Components filtered out:', allComponents.filter(comp => !comp.type).map(c => c.name));
setComponents(availableComponents);
}, [entity, componentRegistry]);
const filteredComponents = components.filter(comp =>
comp.name.toLowerCase().includes(filter.toLowerCase()) ||
comp.category?.toLowerCase().includes(filter.toLowerCase())
);
const handleAdd = () => {
if (selectedComponent) {
onAdd(selectedComponent);
}
};
const groupedComponents = filteredComponents.reduce((groups, comp) => {
const category = comp.category || 'Other';
if (!groups[category]) {
groups[category] = [];
}
groups[category].push(comp);
return groups;
}, {} as Record<string, ComponentTypeInfo[]>);
return (
<div className="modal-overlay" onClick={onCancel}>
<div className="add-component-dialog" onClick={(e) => e.stopPropagation()}>
<div className="dialog-header">
<h3>Add Component</h3>
<button className="close-btn" onClick={onCancel}>&times;</button>
</div>
<div className="dialog-content">
<input
type="text"
className="component-filter"
placeholder="Search components..."
value={filter}
onChange={(e) => setFilter(e.target.value)}
autoFocus
/>
<div className="component-list">
{Object.keys(groupedComponents).length === 0 ? (
<div className="empty-message">No available components</div>
) : (
Object.entries(groupedComponents).map(([category, comps]) => (
<div key={category} className="component-category">
<div className="category-header">{category}</div>
{comps.map(comp => (
<div
key={comp.name}
className={`component-option ${selectedComponent === comp.name ? 'selected' : ''}`}
onClick={() => setSelectedComponent(comp.name)}
onDoubleClick={handleAdd}
>
<div className="component-name">{comp.name}</div>
{comp.description && (
<div className="component-description">{comp.description}</div>
)}
</div>
))}
</div>
))
)}
</div>
</div>
<div className="dialog-footer">
<button className="btn btn-cancel" onClick={onCancel}>
Cancel
</button>
<button
className="btn btn-primary"
onClick={handleAdd}
disabled={!selectedComponent}
>
Add Component
</button>
</div>
</div>
</div>
);
}

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

@@ -1,4 +1,6 @@
import { useState, useEffect } from 'react';
import { Core } from '@esengine/ecs-framework';
import { MessageHub } from '@esengine/editor-core';
import { TauriAPI, DirectoryEntry } from '../api/tauri';
import { FileTree } from './FileTree';
import { ResizablePanel } from './ResizablePanel';
@@ -14,11 +16,12 @@ interface AssetItem {
interface AssetBrowserProps {
projectPath: string | null;
locale: string;
onOpenScene?: (scenePath: string) => void;
}
type ViewMode = 'tree-split' | 'tree-only';
export function AssetBrowser({ projectPath, locale }: AssetBrowserProps) {
export function AssetBrowser({ projectPath, locale, onOpenScene }: AssetBrowserProps) {
const [viewMode, setViewMode] = useState<ViewMode>('tree-split');
const [selectedPath, setSelectedPath] = useState<string | null>(null);
const [assets, setAssets] = useState<AssetItem[]>([]);
@@ -67,6 +70,29 @@ export function AssetBrowser({ projectPath, locale }: AssetBrowserProps) {
}
}, [projectPath, viewMode]);
// 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);
if (viewMode === 'tree-split') {
const lastSlashIndex = Math.max(filePath.lastIndexOf('/'), filePath.lastIndexOf('\\'));
const dirPath = lastSlashIndex > 0 ? filePath.substring(0, lastSlashIndex) : null;
if (dirPath) {
loadAssets(dirPath);
}
}
}
});
return () => unsubscribe();
}, [viewMode]);
const loadAssets = async (path: string) => {
setLoading(true);
try {
@@ -105,7 +131,11 @@ export function AssetBrowser({ projectPath, locale }: AssetBrowserProps) {
};
const handleAssetDoubleClick = (asset: AssetItem) => {
console.log('Open asset:', asset);
if (asset.type === 'file' && asset.extension === 'ecs') {
if (onOpenScene) {
onOpenScene(asset.path);
}
}
};
const filteredAssets = searchQuery

37
packages/editor-app/src/components/ConfirmDialog.tsx Normal file
View File

@@ -0,0 +1,37 @@
import { X } from 'lucide-react';
import '../styles/ConfirmDialog.css';
interface ConfirmDialogProps {
title: string;
message: string;
confirmText: string;
cancelText: string;
onConfirm: () => void;
onCancel: () => void;
}
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>
</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>
);
}

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

@@ -1,9 +1,8 @@
import { useState, useEffect } from 'react';
import { Entity, Core } from '@esengine/ecs-framework';
import { EntityStoreService, MessageHub, ComponentRegistry } from '@esengine/editor-core';
import { AddComponent } from './AddComponent';
import { PropertyInspector } from './PropertyInspector';
import { FileSearch, Plus, ChevronDown, ChevronRight, X, Settings } from 'lucide-react';
import { FileSearch, ChevronDown, ChevronRight, X, Settings } from 'lucide-react';
import '../styles/EntityInspector.css';
interface EntityInspectorProps {
@@ -15,22 +14,21 @@ export function EntityInspector({ entityStore: _entityStore, messageHub }: Entit
const [selectedEntity, setSelectedEntity] = useState<Entity | null>(null);
const [remoteEntity, setRemoteEntity] = useState<any | null>(null);
const [remoteEntityDetails, setRemoteEntityDetails] = useState<any | null>(null);
const [showAddComponent, setShowAddComponent] = useState(false);
const [expandedComponents, setExpandedComponents] = useState<Set<number>>(new Set());
const [componentVersion, setComponentVersion] = useState(0);
useEffect(() => {
const handleSelection = (data: { entity: Entity | null }) => {
setSelectedEntity(data.entity);
setRemoteEntity(null);
setRemoteEntityDetails(null);
setShowAddComponent(false);
setComponentVersion(0);
};
const handleRemoteSelection = (data: { entity: any }) => {
setRemoteEntity(data.entity);
setRemoteEntityDetails(null);
setSelectedEntity(null);
setShowAddComponent(false);
};
const handleEntityDetails = (event: Event) => {
@@ -39,38 +37,26 @@ export function EntityInspector({ entityStore: _entityStore, messageHub }: Entit
setRemoteEntityDetails(details);
};
const handleComponentChange = () => {
setComponentVersion(prev => prev + 1);
};
const unsubSelect = messageHub.subscribe('entity:selected', handleSelection);
const unsubRemoteSelect = messageHub.subscribe('remote-entity:selected', handleRemoteSelection);
const unsubComponentAdded = messageHub.subscribe('component:added', handleComponentChange);
const unsubComponentRemoved = messageHub.subscribe('component:removed', handleComponentChange);
window.addEventListener('profiler:entity-details', handleEntityDetails);
return () => {
unsubSelect();
unsubRemoteSelect();
unsubComponentAdded();
unsubComponentRemoved();
window.removeEventListener('profiler:entity-details', handleEntityDetails);
};
}, [messageHub]);
const handleAddComponent = (componentName: string) => {
if (!selectedEntity) return;
const componentRegistry = Core.services.resolve(ComponentRegistry);
if (!componentRegistry) {
console.error('ComponentRegistry not found');
return;
}
const component = componentRegistry.createInstance(componentName);
if (component) {
selectedEntity.addComponent(component);
messageHub.publish('component:added', { entity: selectedEntity, component });
setShowAddComponent(false);
} else {
console.error('Failed to create component instance for:', componentName);
}
};
const handleRemoveComponent = (index: number) => {
if (!selectedEntity) return;
const component = selectedEntity.components[index];
@@ -481,19 +467,12 @@ export function EntityInspector({ entityStore: _entityStore, messageHub }: Entit
<div className="section-header">
<Settings size={12} className="section-icon" />
<span>Components ({components.length})</span>
<button
className="add-component-btn"
onClick={() => setShowAddComponent(true)}
title="Add Component"
>
<Plus size={12} />
</button>
</div>
<div className="section-content">
{components.length === 0 ? (
<div className="empty-state-small">No components</div>
) : (
<ul className="component-list">
<ul className="component-list" key={componentVersion}>
{components.map((component, index) => {
const isExpanded = expandedComponents.has(index);
return (
@@ -534,15 +513,6 @@ export function EntityInspector({ entityStore: _entityStore, messageHub }: Entit
</div>
</div>
</div>
{showAddComponent && selectedEntity && (
<AddComponent
entity={selectedEntity}
componentRegistry={Core.services.resolve(ComponentRegistry)}
onAdd={handleAddComponent}
onCancel={() => setShowAddComponent(false)}
/>
)}
</div>
);
}

31
packages/editor-app/src/components/ErrorDialog.tsx Normal file
View File

@@ -0,0 +1,31 @@
import { X } from 'lucide-react';
import '../styles/ErrorDialog.css';
interface ErrorDialogProps {
title: string;
message: string;
onClose: () => void;
}
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}>
确定
</button>
</div>
</div>
</div>
);
}

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

@@ -1,9 +1,10 @@
import { useState, useEffect } from 'react';
import { Entity } from '@esengine/ecs-framework';
import { EntityStoreService, MessageHub } from '@esengine/editor-core';
import { Entity, Core } from '@esengine/ecs-framework';
import { EntityStoreService, MessageHub, SceneManagerService } from '@esengine/editor-core';
import { useLocale } from '../hooks/useLocale';
import { Box, Layers, Wifi, Search } from 'lucide-react';
import { Box, Layers, Wifi, Search, Plus, Trash2 } from 'lucide-react';
import { ProfilerService, RemoteEntity } from '../services/ProfilerService';
import { confirm } from '@tauri-apps/plugin-dialog';
import '../styles/SceneHierarchy.css';
interface SceneHierarchyProps {
@@ -17,7 +18,51 @@ export function SceneHierarchy({ entityStore, messageHub }: SceneHierarchyProps)
const [isRemoteConnected, setIsRemoteConnected] = useState(false);
const [selectedId, setSelectedId] = useState<number | null>(null);
const [searchQuery, setSearchQuery] = useState('');
const { t } = useLocale();
const [sceneName, setSceneName] = useState<string>('Untitled');
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);
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]);
// Subscribe to local entity changes
useEffect(() => {
@@ -107,6 +152,57 @@ export function SceneHierarchy({ entityStore, messageHub }: SceneHierarchyProps)
});
};
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();
}
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [selectedId, isRemoteConnected]);
// Filter entities based on search query
const filterRemoteEntities = (entityList: RemoteEntity[]): RemoteEntity[] => {
if (!searchQuery.trim()) return entityList;
@@ -153,6 +249,15 @@ export function SceneHierarchy({ entityStore, messageHub }: SceneHierarchyProps)
<div className="hierarchy-header">
<Layers size={16} className="hierarchy-header-icon" />
<h3>{t('hierarchy.title')}</h3>
<div
className="scene-name-container clickable"
onClick={handleSceneNameClick}
title={sceneFilePath ? `${sceneName} - 点击跳转到文件` : sceneName}
>
<span className="scene-name">
{sceneName}{isSceneModified ? '*' : ''}
</span>
</div>
{showRemoteIndicator && (
<div className="remote-indicator" title="Showing remote entities">
<Wifi size={12} />
@@ -168,6 +273,26 @@ export function SceneHierarchy({ entityStore, messageHub }: SceneHierarchyProps)
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">

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

@@ -18,7 +18,7 @@ export function StartupPage({ onOpenProject, onCreateProject, onOpenRecentProjec
title: 'ECS Framework Editor',
subtitle: 'Professional Game Development Tool',
openProject: 'Open Project',
createProject: 'Create New Project',
createProject: 'Create Project',
profilerMode: 'Profiler Mode',
recentProjects: 'Recent Projects',
noRecentProjects: 'No recent projects',
@@ -49,19 +49,25 @@ export function StartupPage({ onOpenProject, onCreateProject, onOpenRecentProjec
<div className="startup-content">
<div className="startup-actions">
<button className="startup-action-btn primary" onClick={onProfilerMode}>
<button className="startup-action-btn primary" onClick={onOpenProject}>
<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"/>
<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.profilerMode}</span>
<span>{t.openProject}</span>
</button>
<button className="startup-action-btn disabled" disabled title={t.comingSoon}>
<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>
<span className="badge-coming-soon">{t.comingSoon}</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>

128
packages/editor-app/src/styles/ConfirmDialog.css Normal file
View File

@@ -0,0 +1,128 @@
.confirm-dialog-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.confirm-dialog {
background: var(--bg-secondary, #2a2a2a);
border: 1px solid var(--border-color, #404040);
border-radius: 8px;
min-width: 400px;
max-width: 600px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
animation: slideIn 0.2s ease-out;
}
@keyframes slideIn {
from {
transform: translateY(-20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.confirm-dialog-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--border-color, #404040);
}
.confirm-dialog-header h2 {
margin: 0;
font-size: 16px;
font-weight: 600;
color: var(--text-primary, #e0e0e0);
}
.confirm-dialog-header .close-btn {
background: none;
border: none;
color: var(--text-secondary, #999);
cursor: pointer;
padding: 4px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.confirm-dialog-header .close-btn:hover {
background: var(--bg-hover, #3a3a3a);
color: var(--text-primary, #fff);
}
.confirm-dialog-content {
padding: 20px;
color: var(--text-primary, #e0e0e0);
line-height: 1.6;
}
.confirm-dialog-content p {
margin: 0;
white-space: pre-wrap;
word-break: break-word;
}
.confirm-dialog-footer {
padding: 12px 20px;
border-top: 1px solid var(--border-color, #404040);
display: flex;
justify-content: flex-end;
gap: 8px;
}
.confirm-dialog-btn {
padding: 8px 24px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
}
.confirm-dialog-btn.cancel {
background: var(--bg-hover, #3a3a3a);
color: var(--text-primary, #e0e0e0);
}
.confirm-dialog-btn.cancel:hover {
background: var(--bg-active, #4a4a4a);
}
.confirm-dialog-btn.confirm {
background: #4a9eff;
color: white;
}
.confirm-dialog-btn.confirm:hover {
background: #6bb0ff;
}
.confirm-dialog-btn:active {
transform: scale(0.98);
}

1
packages/editor-app/src/styles/EntityInspector.css
View File

@@ -4,6 +4,7 @@
height: 100%;
background-color: var(--color-bg-base);
color: var(--color-text-primary);
position: relative;
}
.inspector-header {

115
packages/editor-app/src/styles/ErrorDialog.css Normal file
View File

@@ -0,0 +1,115 @@
.error-dialog-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.error-dialog {
background: var(--bg-secondary, #2a2a2a);
border: 1px solid var(--border-color, #404040);
border-radius: 8px;
min-width: 400px;
max-width: 600px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
animation: slideIn 0.2s ease-out;
}
@keyframes slideIn {
from {
transform: translateY(-20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.error-dialog-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--border-color, #404040);
}
.error-dialog-header h2 {
margin: 0;
font-size: 16px;
font-weight: 600;
color: #ff4444;
}
.error-dialog-header .close-btn {
background: none;
border: none;
color: var(--text-secondary, #999);
cursor: pointer;
padding: 4px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.error-dialog-header .close-btn:hover {
background: var(--bg-hover, #3a3a3a);
color: var(--text-primary, #fff);
}
.error-dialog-content {
padding: 20px;
color: var(--text-primary, #e0e0e0);
line-height: 1.6;
}
.error-dialog-content p {
margin: 0;
white-space: pre-wrap;
word-break: break-word;
}
.error-dialog-footer {
padding: 12px 20px;
border-top: 1px solid var(--border-color, #404040);
display: flex;
justify-content: flex-end;
}
.error-dialog-btn {
padding: 8px 24px;
background: #ff4444;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
}
.error-dialog-btn:hover {
background: #ff6666;
}
.error-dialog-btn:active {
transform: scale(0.98);
}

76
packages/editor-app/src/styles/SceneHierarchy.css
View File

@@ -29,7 +29,42 @@
color: var(--color-text-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
flex: 1;
}
.scene-name-container {
display: flex;
align-items: center;
padding: 2px 8px;
background-color: var(--color-bg-base);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-sm);
margin-left: auto;
margin-right: var(--spacing-sm);
transition: all var(--transition-fast);
}
.scene-name-container.clickable {
cursor: pointer;
}
.scene-name-container.clickable:hover {
background-color: var(--color-bg-hover);
border-color: var(--color-primary);
}
.scene-name-container.clickable:hover .scene-name {
color: var(--color-primary);
}
.scene-name {
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
font-weight: var(--font-weight-medium);
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: color var(--transition-fast);
}
.remote-indicator {
@@ -74,6 +109,45 @@
color: var(--color-text-tertiary);
}
.hierarchy-toolbar {
display: flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-sm) var(--spacing-md);
border-bottom: 1px solid var(--color-border-default);
background-color: var(--color-bg-base);
flex-shrink: 0;
}
.toolbar-btn {
display: flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-xs) var(--spacing-sm);
background-color: var(--color-bg-elevated);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-sm);
color: var(--color-text-primary);
font-size: var(--font-size-sm);
cursor: pointer;
transition: all var(--transition-fast);
}
.toolbar-btn:hover:not(:disabled) {
background-color: var(--color-bg-hover);
border-color: var(--color-primary);
color: var(--color-primary);
}
.toolbar-btn:active:not(:disabled) {
transform: scale(0.98);
}
.toolbar-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.hierarchy-content {
flex: 1;
overflow-y: auto;