feat: 预制体系统与架构改进 (#303)
* feat(prefab): 实现预制体系统和编辑器 UX 改进 ## 预制体系统 - 新增 PrefabSerializer: 预制体序列化/反序列化 - 新增 PrefabInstanceComponent: 追踪预制体实例来源和修改 - 新增 PrefabService: 预制体核心服务 - 新增 PrefabLoader: 预制体资产加载器 - 新增预制体命令: Create/Instantiate/Apply/Revert/BreakLink ## 预制体编辑模式 - 支持双击 .prefab 文件进入编辑模式 - 预制体编辑模式工具栏 (保存/退出) - 预制体实例指示器和操作菜单 ## 编辑器 UX 改进 - SceneHierarchy 快捷键: F2 重命名, Ctrl+D 复制, ↑↓ 导航 - 支持双击实体名称内联编辑 - 删除实体时显示子节点数量警告 - 右键菜单添加重命名/复制选项及快捷键提示 - 布局持久化和重置功能 ## Bug 修复 - 修复 editor-runtime 组件类重复导致的 TransformComponent 不识别问题 - 修复 .prefab-name 样式覆盖导致预制体工具栏文字不可见 - 修复 Inspector 资源字段高度不正确问题 * feat(editor): 改进编辑器 UX 交互体验 - ContentBrowser: 加载动画 spinner、搜索高亮、改进空状态设计 - SceneHierarchy: 选中项自动滚动到视图、搜索清除按钮 - PropertyInspector: 输入框本地状态管理、Enter/Escape 键处理 - EntityInspector: 组件折叠状态持久化、属性搜索清除按钮 - Viewport: 变换操作实时数值显示 - 国际化: 添加相关文本 (en/zh) * fix(build): 修复 Web 构建资产加载和编辑器 UX 改进 构建系统修复: - 修复 asset-catalog.json 字段名不匹配 (entries vs assets) - 修复 BrowserFileSystemService 支持两种目录格式 - 修复 bundle 策略检测逻辑 (空对象判断) - 修复 module.json 中 assetExtensions 声明和类型推断 行为树修复: - 修复 BehaviorTreeExecutionSystem 使用 loadAsset 替代 loadAssetByPath - 修复 BehaviorTreeAssetType 常量与 module.json 类型名一致 (behavior-tree) 编辑器 UX 改进: - 构建完成对话框添加"打开文件夹"按钮 - 构建完成对话框样式优化 (圆形图标背景、按钮布局) - SceneHierarchy 响应式布局 (窄窗口自动隐藏 Type 列) - SceneHierarchy 隐藏滚动条 错误追踪: - 添加全局错误处理器写入日志文件 (%TEMP%/esengine-editor-crash.log) - 添加 append_to_log Tauri 命令 * feat(render): 修复 UI 渲染和点击特效系统 ## UI 渲染修复 - 修复 GUID 验证 bug，使用统一的 isValidGUID() 函数 - 修复 UI 渲染顺序随机问题，Rust 端使用 IndexMap 替代 HashMap - Web 运行时添加 assetPathResolver 支持 GUID 解析 - UIInteractableComponent.blockEvents 默认值改为 false ## 点击特效系统 - 新增 ClickFxComponent 和 ClickFxSystem - 支持在点击位置播放粒子效果 - 支持多种触发模式和粒子轮换 ## Camera 系统重构 - CameraSystem 从 ecs-engine-bindgen 移至 camera 包 - 新增 CameraManager 统一管理相机 ## 编辑器改进 - 改进属性面板 UI 交互 - 粒子编辑器面板优化 - Transform 命令系统 * feat(render): 实现 Sorting Layer 系统和 Overlay 渲染层 - 新增 SortingLayerManager 管理排序层级 (Background, Default, Foreground, UI, Overlay) - 实现 ISortable 接口，统一 Sprite、UI、Particle 的排序属性 - 修复粒子 Overlay 层被 UI 遮挡问题：添加独立的 Overlay Pass 在 UI 之后渲染 - 更新粒子资产格式：从 sortingOrder 改为 sortingLayer + orderInLayer - 更新粒子编辑器面板支持新的排序属性 - 优化 UI 渲染系统使用新的排序层级 * feat(ci): 集成 SignPath 代码签名服务 - 添加 SignPath 自动签名工作流（Windows） - 配置 release-editor.yml 支持代码签名 - 将构建改为草稿模式，等待签名完成后发布 - 添加证书文件到 .gitignore 防止泄露 * fix(asset): 修复 Web 构建资产路径解析和全局单例移除 ## 资产路径修复 - 修复 Tauri 本地服务器 `/asset?path=...` 路径解析，正确与 root 目录连接 - BrowserPathResolver 支持两种模式： - 'proxy': 使用 /asset?path=... 格式（编辑器 Run in Browser） - 'direct': 使用直接路径 /assets/path.png（独立 Web 构建） - BrowserRuntime 使用 'direct' 模式，无需 Tauri 代理 ## 架构改进 - 移除全局单例 - 移除 globalAssetManager 导出，改用 AssetManagerToken 依赖注入 - 移除 globalPathResolver 导出，改用 PathResolutionService - 移除 globalPathResolutionService 导出 - ParticleUpdateSystem/ClickFxSystem 通过 setAssetManager() 注入依赖 - EngineService 使用 new AssetManager() 替代全局实例 ## 新增服务 - PathResolutionService: 统一路径解析接口 - RuntimeModeService: 运行时模式查询服务 - SerializationContext: EntityRef 序列化上下文 ## 其他改进 - 完善 ServiceToken 注释说明本地定义的意图 - 导出 BrowserPathResolveMode 类型 * fix(build): 添加 world-streaming composite 设置修复类型检查 * fix(build): 移除 world-streaming 引用避免 composite 冲突 * fix(build): 将 const enum 改为 enum 兼容 isolatedModules * fix(build): 添加缺失的 IAssetManager 导入
This commit is contained in:
YHH
GitHub
@@ -82,8 +82,8 @@ export function useAssetSystem() {
|
||||
}, [assetManager]);
|
||||
|
||||
/**
|
||||
* Load texture for sprite component
|
||||
* 为精灵组件加载纹理
|
||||
* 通过路径为精灵组件加载纹理（用户脚本使用）
|
||||
* Load texture for sprite component by path (for user scripts)
|
||||
*/
|
||||
const loadTextureForSprite = useCallback(async (path: string): Promise<number> => {
|
||||
if (!engineIntegration) return 0;
|
||||
@@ -96,6 +96,21 @@ export function useAssetSystem() {
|
||||
}
|
||||
}, [engineIntegration]);
|
||||
|
||||
/**
|
||||
* 通过 GUID 为精灵组件加载纹理（内部引用使用）
|
||||
* Load texture for sprite component by GUID (for internal references)
|
||||
*/
|
||||
const loadTextureByGuid = useCallback(async (guid: string): Promise<number> => {
|
||||
if (!engineIntegration) return 0;
|
||||
|
||||
try {
|
||||
return await engineIntegration.loadTextureByGuid(guid);
|
||||
} catch (error) {
|
||||
console.error(`Failed to load texture by GUID ${guid}:`, error);
|
||||
return 0;
|
||||
}
|
||||
}, [engineIntegration]);
|
||||
|
||||
/**
|
||||
* Create asset reference
|
||||
* 创建资产引用
|
||||
@@ -133,6 +148,7 @@ export function useAssetSystem() {
|
||||
loadProgress,
|
||||
loadAssetByPath,
|
||||
loadTextureForSprite,
|
||||
loadTextureByGuid,
|
||||
createAssetReference,
|
||||
unloadUnusedAssets,
|
||||
getStatistics
|
||||
|
||||
351
packages/editor-app/src/hooks/useStoreSubscriptions.ts
Normal file
351
packages/editor-app/src/hooks/useStoreSubscriptions.ts
Normal file
@@ -0,0 +1,351 @@
|
||||
/**
|
||||
* Store 订阅 Hook
|
||||
* Store subscriptions hook
|
||||
*
|
||||
* 集中管理所有服务和 MessageHub 订阅，初始化 Zustand stores
|
||||
* Centrally manages all service and MessageHub subscriptions, initializes Zustand stores
|
||||
*/
|
||||
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { Core, HierarchyComponent, PrefabInstanceComponent } from '@esengine/ecs-framework';
|
||||
import type { MessageHub, EntityStoreService, SceneManagerService } from '@esengine/editor-core';
|
||||
import { useHierarchyStore } from '../stores/HierarchyStore';
|
||||
import { useInspectorStore } from '../stores/InspectorStore';
|
||||
import { getProfilerService } from '../services/getService';
|
||||
import { SettingsService } from '../services/SettingsService';
|
||||
import { TauriAPI } from '../api/tauri';
|
||||
import type { AssetFileInfo } from '../components/inspectors/types';
|
||||
|
||||
interface UseStoreSubscriptionsOptions {
|
||||
messageHub: MessageHub | null;
|
||||
entityStore: EntityStoreService | null;
|
||||
sceneManager: SceneManagerService | null;
|
||||
enabled: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化 store 订阅
|
||||
* Initialize store subscriptions
|
||||
*
|
||||
* 在 App.tsx 中调用一次，集中管理所有订阅
|
||||
* Call once in App.tsx to centrally manage all subscriptions
|
||||
*/
|
||||
export function useStoreSubscriptions({
|
||||
messageHub,
|
||||
entityStore,
|
||||
sceneManager,
|
||||
enabled,
|
||||
}: UseStoreSubscriptionsOptions): void {
|
||||
const initializedRef = useRef(false);
|
||||
|
||||
// ===== HierarchyStore 订阅 | HierarchyStore subscriptions =====
|
||||
useEffect(() => {
|
||||
if (!enabled || !messageHub || !entityStore) return;
|
||||
|
||||
const {
|
||||
setSceneInfo,
|
||||
setPrefabEditMode,
|
||||
setEntities,
|
||||
setSelectedIds,
|
||||
setExpandedIds,
|
||||
} = useHierarchyStore.getState();
|
||||
|
||||
// 更新场景信息 | Update scene info
|
||||
const updateSceneInfo = () => {
|
||||
if (sceneManager) {
|
||||
const state = sceneManager.getSceneState();
|
||||
setSceneInfo({
|
||||
sceneName: state.sceneName,
|
||||
sceneFilePath: state.currentScenePath || null,
|
||||
isModified: state.isModified,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 更新实体列表 | Update entity list
|
||||
const updateEntities = () => {
|
||||
setEntities([...entityStore.getRootEntities()]);
|
||||
};
|
||||
|
||||
// 处理实体选择 | Handle entity selection
|
||||
const handleEntitySelection = (data: { entity: { id: number } | null }) => {
|
||||
if (data.entity) {
|
||||
setSelectedIds(new Set([data.entity.id]));
|
||||
} else {
|
||||
setSelectedIds(new Set());
|
||||
}
|
||||
};
|
||||
|
||||
// 处理预制体编辑模式 | Handle prefab edit mode
|
||||
const handlePrefabEditMode = (data: {
|
||||
isActive: boolean;
|
||||
prefabPath?: string;
|
||||
prefabName?: string;
|
||||
}) => {
|
||||
if (data.isActive && data.prefabName && data.prefabPath) {
|
||||
setPrefabEditMode({
|
||||
isActive: true,
|
||||
prefabName: data.prefabName,
|
||||
prefabPath: data.prefabPath,
|
||||
});
|
||||
} else {
|
||||
setPrefabEditMode(null);
|
||||
}
|
||||
updateSceneInfo();
|
||||
};
|
||||
|
||||
// 初始化 | Initialize
|
||||
updateSceneInfo();
|
||||
updateEntities();
|
||||
|
||||
// 检查预制体编辑模式状态 | Check prefab edit mode state
|
||||
if (sceneManager) {
|
||||
const prefabState = (sceneManager as any).getPrefabEditModeState?.();
|
||||
if (prefabState?.isActive) {
|
||||
setPrefabEditMode({
|
||||
isActive: true,
|
||||
prefabName: prefabState.prefabName,
|
||||
prefabPath: prefabState.prefabPath,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 订阅场景事件 | Subscribe to scene events
|
||||
const unsubLoaded = messageHub.subscribe('scene:loaded', (data: any) => {
|
||||
if (data.sceneName) {
|
||||
setSceneInfo({
|
||||
sceneName: data.sceneName,
|
||||
sceneFilePath: data.path || null,
|
||||
isModified: data.isModified || false,
|
||||
});
|
||||
} else {
|
||||
updateSceneInfo();
|
||||
}
|
||||
updateEntities();
|
||||
});
|
||||
const unsubNew = messageHub.subscribe('scene:new', () => {
|
||||
updateSceneInfo();
|
||||
updateEntities();
|
||||
});
|
||||
const unsubSaved = messageHub.subscribe('scene:saved', updateSceneInfo);
|
||||
const unsubModified = messageHub.subscribe('scene:modified', updateSceneInfo);
|
||||
const unsubRestored = messageHub.subscribe('scene:restored', updateEntities);
|
||||
|
||||
// 订阅实体事件 | Subscribe to entity events
|
||||
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', handleEntitySelection);
|
||||
const unsubReordered = messageHub.subscribe('entity:reordered', updateEntities);
|
||||
const unsubReparented = messageHub.subscribe('entity:reparented', updateEntities);
|
||||
|
||||
// 订阅预制体事件 | Subscribe to prefab events
|
||||
const unsubPrefabEditMode = messageHub.subscribe('prefab:editMode:changed', handlePrefabEditMode);
|
||||
const unsubPrefabEnter = messageHub.subscribe('prefab:editMode:enter', updateEntities);
|
||||
const unsubPrefabExit = messageHub.subscribe('prefab:editMode:exit', updateEntities);
|
||||
|
||||
return () => {
|
||||
unsubLoaded();
|
||||
unsubNew();
|
||||
unsubSaved();
|
||||
unsubModified();
|
||||
unsubRestored();
|
||||
unsubAdd();
|
||||
unsubRemove();
|
||||
unsubClear();
|
||||
unsubSelect();
|
||||
unsubReordered();
|
||||
unsubReparented();
|
||||
unsubPrefabEditMode();
|
||||
unsubPrefabEnter();
|
||||
unsubPrefabExit();
|
||||
};
|
||||
}, [enabled, messageHub, entityStore, sceneManager]);
|
||||
|
||||
// ===== HierarchyStore 远程订阅 | HierarchyStore remote subscriptions =====
|
||||
useEffect(() => {
|
||||
if (!enabled) return;
|
||||
|
||||
const profilerService = getProfilerService();
|
||||
if (!profilerService) return;
|
||||
|
||||
const {
|
||||
setIsRemoteConnected,
|
||||
setRemoteEntities,
|
||||
setRemoteSceneName,
|
||||
} = useHierarchyStore.getState();
|
||||
|
||||
// 初始状态 | Initial state
|
||||
setIsRemoteConnected(profilerService.isConnected());
|
||||
|
||||
const unsubscribe = profilerService.subscribe((data) => {
|
||||
const connected = profilerService.isConnected();
|
||||
setIsRemoteConnected(connected);
|
||||
|
||||
if (connected && data.entities && data.entities.length > 0) {
|
||||
setRemoteEntities((prev) => {
|
||||
if (prev.length !== data.entities!.length) {
|
||||
return data.entities!;
|
||||
}
|
||||
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;
|
||||
});
|
||||
|
||||
// 获取远程场景名称 | Get remote scene name
|
||||
const currentRemoteName = useHierarchyStore.getState().remoteSceneName;
|
||||
if (!currentRemoteName && data.entities[0]) {
|
||||
profilerService.requestEntityDetails(data.entities[0].id);
|
||||
}
|
||||
} else if (!connected) {
|
||||
setRemoteEntities([]);
|
||||
setRemoteSceneName(null);
|
||||
}
|
||||
});
|
||||
|
||||
// 监听实体详情获取远程场景名 | Listen for entity details to get remote scene name
|
||||
const handleEntityDetails = ((event: CustomEvent) => {
|
||||
const details = event.detail;
|
||||
if (details?.sceneName) {
|
||||
setRemoteSceneName(details.sceneName);
|
||||
}
|
||||
}) as EventListener;
|
||||
|
||||
window.addEventListener('profiler:entity-details', handleEntityDetails);
|
||||
|
||||
return () => {
|
||||
unsubscribe();
|
||||
window.removeEventListener('profiler:entity-details', handleEntityDetails);
|
||||
};
|
||||
}, [enabled]);
|
||||
|
||||
// ===== InspectorStore 订阅 | InspectorStore subscriptions =====
|
||||
useEffect(() => {
|
||||
if (!enabled || !messageHub) return;
|
||||
|
||||
const {
|
||||
setEntityTarget,
|
||||
setRemoteEntityTarget,
|
||||
setAssetFileTarget,
|
||||
setExtensionTarget,
|
||||
clearTarget,
|
||||
updateRemoteEntityDetails,
|
||||
incrementComponentVersion,
|
||||
setDecimalPlaces,
|
||||
} = useInspectorStore.getState();
|
||||
|
||||
// 初始化设置 | Initialize settings
|
||||
const settings = SettingsService.getInstance();
|
||||
setDecimalPlaces(settings.get<number>('inspector.decimalPlaces', 4));
|
||||
|
||||
// 设置变更处理 | Handle settings change
|
||||
const handleSettingsChanged = (event: Event) => {
|
||||
const customEvent = event as CustomEvent;
|
||||
const changedSettings = customEvent.detail;
|
||||
if ('inspector.decimalPlaces' in changedSettings) {
|
||||
setDecimalPlaces(changedSettings['inspector.decimalPlaces']);
|
||||
}
|
||||
};
|
||||
|
||||
// 实体选择处理 | Handle entity selection
|
||||
const handleEntitySelection = (data: { entity: any | null }) => {
|
||||
if (data.entity) {
|
||||
setEntityTarget(data.entity);
|
||||
} else {
|
||||
clearTarget();
|
||||
}
|
||||
};
|
||||
|
||||
// 远程实体选择处理 | Handle remote entity selection
|
||||
const handleRemoteEntitySelection = (data: { entity: any }) => {
|
||||
setRemoteEntityTarget(data.entity);
|
||||
const profilerService = getProfilerService();
|
||||
if (profilerService && data.entity?.id !== undefined) {
|
||||
profilerService.requestEntityDetails(data.entity.id);
|
||||
}
|
||||
};
|
||||
|
||||
// 实体详情处理 | Handle entity details
|
||||
const handleEntityDetails = (event: Event) => {
|
||||
const customEvent = event as CustomEvent;
|
||||
const details = customEvent.detail;
|
||||
if (details?.id !== undefined) {
|
||||
updateRemoteEntityDetails(details.id, details);
|
||||
}
|
||||
};
|
||||
|
||||
// 扩展选择处理 | Handle extension selection
|
||||
const handleExtensionSelection = (data: { data: unknown }) => {
|
||||
setExtensionTarget(data.data as Record<string, unknown>);
|
||||
};
|
||||
|
||||
// 资产文件选择处理 | Handle asset file selection
|
||||
const handleAssetFileSelection = async (data: { fileInfo: AssetFileInfo }) => {
|
||||
const fileInfo = data.fileInfo;
|
||||
|
||||
if (fileInfo.isDirectory) {
|
||||
setAssetFileTarget(fileInfo);
|
||||
return;
|
||||
}
|
||||
|
||||
const textExtensions = [
|
||||
'txt', 'json', 'md', 'ts', 'tsx', 'js', 'jsx', 'css', 'html', 'xml',
|
||||
'yaml', 'yml', 'toml', 'ini', 'cfg', 'conf', 'log', 'btree', 'ecs',
|
||||
'mat', 'shader', 'tilemap', 'tileset'
|
||||
];
|
||||
const imageExtensions = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp', 'svg', 'ico', 'tiff', 'tif'];
|
||||
const isTextFile = fileInfo.extension && textExtensions.includes(fileInfo.extension.toLowerCase());
|
||||
const isImageFile = fileInfo.extension && imageExtensions.includes(fileInfo.extension.toLowerCase());
|
||||
|
||||
if (isTextFile) {
|
||||
try {
|
||||
const content = await TauriAPI.readFileContent(fileInfo.path);
|
||||
setAssetFileTarget(fileInfo, content);
|
||||
} catch (error) {
|
||||
console.error('Failed to read file content:', error);
|
||||
setAssetFileTarget(fileInfo);
|
||||
}
|
||||
} else if (isImageFile) {
|
||||
setAssetFileTarget(fileInfo, undefined, true);
|
||||
} else {
|
||||
setAssetFileTarget(fileInfo);
|
||||
}
|
||||
};
|
||||
|
||||
// 场景恢复处理 | Handle scene restored
|
||||
const handleSceneRestored = () => {
|
||||
clearTarget();
|
||||
};
|
||||
|
||||
// 订阅 | Subscribe
|
||||
window.addEventListener('settings:changed', handleSettingsChanged);
|
||||
window.addEventListener('profiler:entity-details', handleEntityDetails);
|
||||
|
||||
const unsubEntitySelect = messageHub.subscribe('entity:selected', handleEntitySelection);
|
||||
const unsubSceneRestored = messageHub.subscribe('scene:restored', handleSceneRestored);
|
||||
const unsubRemoteSelect = messageHub.subscribe('remote-entity:selected', handleRemoteEntitySelection);
|
||||
const unsubNodeSelect = messageHub.subscribe('behavior-tree:node-selected', handleExtensionSelection);
|
||||
const unsubAssetFileSelect = messageHub.subscribe('asset-file:selected', handleAssetFileSelection);
|
||||
const unsubComponentAdded = messageHub.subscribe('component:added', incrementComponentVersion);
|
||||
const unsubComponentRemoved = messageHub.subscribe('component:removed', incrementComponentVersion);
|
||||
const unsubPropertyChanged = messageHub.subscribe('component:property:changed', incrementComponentVersion);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('settings:changed', handleSettingsChanged);
|
||||
window.removeEventListener('profiler:entity-details', handleEntityDetails);
|
||||
unsubEntitySelect();
|
||||
unsubSceneRestored();
|
||||
unsubRemoteSelect();
|
||||
unsubNodeSelect();
|
||||
unsubAssetFileSelect();
|
||||
unsubComponentAdded();
|
||||
unsubComponentRemoved();
|
||||
unsubPropertyChanged();
|
||||
};
|
||||
}, [enabled, messageHub]);
|
||||
}
|
||||
Reference in New Issue
Block a user