Files
esengine/packages/particle-editor/src/ParticleEditorModule.ts
YHH e24c850568 refactor: 类型安全与接口清理 (#311)
* refactor: 分解 IEngineBridge 为单一职责接口

- 新增 ITextureService, IDynamicAtlasService, ICoordinateService, IRenderConfigService
- 移除 EngineBridgeToken,改用具体服务 Token
- 更新 camera, ui, particle 等模块使用新接口
- 优化装饰器类型安全,使用 Symbol-based metadata 访问模式

* refactor: 删除 plugin-types 包,统一 createServiceToken 实现

- 移动 IEditorModuleBase 接口到 engine-core
- 移除 engine-core 和 editor-core 对 plugin-types 的依赖
- 删除冗余的 plugin-types 包
- 统一使用 core 中基于 Symbol.for() 的 createServiceToken

* refactor: 统一 IPlugin 接口,移除 deprecated 别名

- 移除 engine-core、editor-core、runtime-core 中的 IPlugin 别名
- 模块插件统一使用 IRuntimePlugin(运行时)或 IEditorPlugin(编辑器)
- 保留 core 包中的 IPlugin 作为 ECS 核心插件接口(不同概念)
- 更新所有消费方使用正确的类型

* refactor: 重命名 editor-core ComponentRegistry 为 EditorComponentRegistry

- 消除与 core 包 ComponentRegistry(ECS 位掩码管理)的命名歧义
- editor-core 的 EditorComponentRegistry 专用于编辑器组件元数据
- 更新所有编辑器包使用新名称
2025-12-19 17:48:18 +08:00

287 lines
10 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/**
* 粒子编辑器模块
* Particle Editor Module
*
* Registers file handlers, panels, and templates for .particle files.
*/
import type { ServiceContainer, Entity } from '@esengine/ecs-framework';
import { Core } from '@esengine/ecs-framework';
import type {
IEditorModuleLoader,
PanelDescriptor,
EntityCreationTemplate,
ComponentInspectorProviderDef,
FileActionHandler,
FileCreationTemplate,
IEditorPlugin,
ModuleManifest
} from '@esengine/editor-core';
import {
PanelPosition,
InspectorRegistry,
EntityStoreService,
MessageHub,
EditorComponentRegistry,
FileActionRegistry
} from '@esengine/editor-core';
import { TransformComponent } from '@esengine/engine-core';
import {
ParticleSystemComponent,
ParticleRuntimeModule,
createDefaultParticleAsset
} from '@esengine/particle';
import { ParticleEditorPanel } from './panels/ParticleEditorPanel';
import { ParticleInspectorProvider } from './providers/ParticleInspectorProvider';
import { useParticleEditorStore } from './stores/ParticleEditorStore';
import { registerParticleGizmo, unregisterParticleGizmo } from './gizmos/ParticleGizmo';
// 导入编辑器 CSS 样式(会被 vite 自动处理并注入到 DOM
// Import editor CSS styles (automatically handled and injected by vite)
import './styles/ParticleEditor.css';
/**
* 粒子编辑器模块
* Particle Editor Module
*/
export class ParticleEditorModule implements IEditorModuleLoader {
private _assetsRefreshUnsubscribe: (() => void) | null = null;
async install(services: ServiceContainer): Promise<void> {
// 注册检视器提供者 | Register inspector provider
const inspectorRegistry = services.resolve(InspectorRegistry);
if (inspectorRegistry) {
inspectorRegistry.register(new ParticleInspectorProvider());
}
// 注册组件到编辑器组件注册表 | Register to editor component registry
const componentRegistry = services.resolve(EditorComponentRegistry);
if (componentRegistry) {
componentRegistry.register({
name: 'ParticleSystem',
type: ParticleSystemComponent,
category: 'components.category.effects',
description: 'Particle system for 2D visual effects',
icon: 'Sparkles'
});
}
// 注册资产创建消息映射 | Register asset creation message mappings
const fileActionRegistry = services.resolve(FileActionRegistry);
if (fileActionRegistry) {
fileActionRegistry.registerAssetCreationMapping({
extension: '.particle',
createMessage: 'particle:create-asset'
});
}
// 注册 Gizmo | Register gizmo
registerParticleGizmo();
// 监听资产刷新事件,当 .particle 文件保存时重新加载所有粒子组件
// Listen for assets refresh event to reload particle components when .particle files are saved
const messageHub = services.resolve(MessageHub);
if (messageHub) {
this._assetsRefreshUnsubscribe = messageHub.subscribe('assets:refresh', () => {
this._reloadAllParticleAssets();
});
}
}
async uninstall(): Promise<void> {
// 取消订阅事件 | Unsubscribe events
if (this._assetsRefreshUnsubscribe) {
this._assetsRefreshUnsubscribe();
this._assetsRefreshUnsubscribe = null;
}
// 取消注册 Gizmo | Unregister gizmo
unregisterParticleGizmo();
}
/**
* 重新加载所有粒子资产
* Reload all particle assets
*
* 当资产文件变化时调用,强制所有粒子组件重新加载资产。
* Called when asset files change, forcing all particle components to reload.
*/
private _reloadAllParticleAssets(): void {
const scene = Core.scene;
if (!scene) return;
// 遍历所有带有 ParticleSystemComponent 的实体
// Iterate all entities with ParticleSystemComponent
scene.entities.forEach((entity: Entity) => {
const particle = entity.getComponent(ParticleSystemComponent) as ParticleSystemComponent | null;
if (particle && particle.particleAssetGuid) {
// 异步重新加载资产 | Async reload asset
particle.reloadAsset().then((success: boolean) => {
if (success) {
console.log(`[ParticleEditorModule] Reloaded particle asset for entity: ${entity.name}`);
// 标记需要重建并重新播放 | Mark dirty and replay
particle.markDirty();
if (particle.isPlaying) {
particle.stop(true);
particle.play();
}
}
});
}
});
}
getPanels(): PanelDescriptor[] {
return [
{
id: 'particle-editor',
title: 'Particle Editor',
position: PanelPosition.Center,
closable: true,
component: ParticleEditorPanel,
isDynamic: true
}
];
}
getInspectorProviders(): ComponentInspectorProviderDef[] {
return [
{
componentType: 'ParticleSystem',
priority: 100,
render: (component, entity, onChange) => {
const provider = new ParticleInspectorProvider();
return provider.render(
{ entityId: String(entity.id), component },
{ target: component, onChange }
);
}
}
];
}
getEntityCreationTemplates(): EntityCreationTemplate[] {
return [
{
id: 'create-particle-entity',
label: '创建粒子效果',
icon: 'Sparkles',
category: 'effects',
order: 100,
create: (): number => {
const scene = Core.scene;
if (!scene) {
throw new Error('Scene not available');
}
const entityStore = Core.services.resolve(EntityStoreService);
const messageHub = Core.services.resolve(MessageHub);
if (!entityStore || !messageHub) {
throw new Error('EntityStoreService or MessageHub not available');
}
const particleCount = entityStore.getAllEntities()
.filter((e: Entity) => e.name.startsWith('ParticleSystem ')).length;
const entityName = `ParticleSystem ${particleCount + 1}`;
const entity = scene.createEntity(entityName);
entity.addComponent(new TransformComponent());
entity.addComponent(new ParticleSystemComponent());
entityStore.addEntity(entity);
messageHub.publish('entity:added', { entity });
messageHub.publish('scene:modified', {});
entityStore.selectEntity(entity);
return entity.id;
}
}
];
}
getFileActionHandlers(): FileActionHandler[] {
return [
{
extensions: ['particle', 'json'],
onDoubleClick: (filePath: string) => {
// 只处理 .particle 和 .particle.json 文件
// Only handle .particle and .particle.json files
const lowerPath = filePath.toLowerCase();
if (!lowerPath.endsWith('.particle') && !lowerPath.endsWith('.particle.json')) {
return;
}
// 先设置待打开的文件路径到 store
// Set pending file path to store first
useParticleEditorStore.getState().setPendingFilePath(filePath);
const messageHub = Core.services.resolve(MessageHub);
if (messageHub) {
// 打开粒子编辑器面板(面板挂载后会从 store 读取 pendingFilePath
// Open particle editor panel (panel will read pendingFilePath from store after mount)
messageHub.publish('dynamic-panel:open', {
panelId: 'particle-editor',
title: `Particle Editor - ${filePath.split(/[\\/]/).pop()}`
});
}
}
}
];
}
getFileCreationTemplates(): FileCreationTemplate[] {
return [
{
id: 'create-particle',
label: 'Particle Effect',
extension: 'particle',
icon: 'Sparkles',
category: 'effects',
getContent: (fileName: string) => {
const assetData = createDefaultParticleAsset(fileName.replace('.particle', ''));
return JSON.stringify(assetData, null, 2);
}
}
];
}
}
export const particleEditorModule = new ParticleEditorModule();
/**
* 粒子插件清单
* Particle Plugin Manifest
*/
const manifest: ModuleManifest = {
id: '@esengine/particle',
name: '@esengine/particle',
displayName: 'Particle System',
version: '1.0.0',
description: 'Particle system for 2D visual effects',
category: 'Rendering',
isCore: false,
defaultEnabled: true,
isEngineModule: true,
canContainContent: true,
dependencies: ['engine-core'],
exports: {
components: ['ParticleSystemComponent'],
systems: ['ParticleUpdateSystem'],
loaders: ['ParticleLoader']
}
};
/**
* 完整的粒子插件(运行时 + 编辑器)
* Complete Particle Plugin (runtime + editor)
*/
export const ParticlePlugin: IEditorPlugin = {
manifest,
runtimeModule: new ParticleRuntimeModule(),
editorModule: particleEditorModule
};
export default particleEditorModule;