/** * Project Settings Plugin * 项目设置插件 * * Registers project-level settings like UI design resolution. * 注册项目级别的设置,如 UI 设计分辨率。 */ import type { ServiceContainer } from '@esengine/esengine'; import { createLogger, Core } from '@esengine/esengine'; import type { IPlugin, IEditorModuleLoader, ModuleManifest } from '@esengine/editor-core'; import { SettingsRegistry, ProjectService, moduleRegistry } from '@esengine/editor-core'; import EngineService from '../../services/EngineService'; /** * Get engine modules from ModuleRegistry. * 从 ModuleRegistry 获取引擎模块。 * * Returns all registered modules from the module registry. * 返回模块注册表中的所有已注册模块。 */ function getModuleManifests(): ModuleManifest[] { // Get modules from moduleRegistry singleton // 从 moduleRegistry 单例获取模块 const modules = moduleRegistry.getAllModules(); console.log('[ProjectSettingsPlugin] getModuleManifests: got', modules.length, 'modules from registry'); return modules; } const logger = createLogger('ProjectSettingsPlugin'); /** * Common UI design resolution presets * 常见的 UI 设计分辨率预设 */ export const UI_RESOLUTION_PRESETS = [ { label: '1920 x 1080 (Full HD)', value: { width: 1920, height: 1080 } }, { label: '1280 x 720 (HD)', value: { width: 1280, height: 720 } }, { label: '1366 x 768 (HD+)', value: { width: 1366, height: 768 } }, { label: '2560 x 1440 (2K)', value: { width: 2560, height: 1440 } }, { label: '3840 x 2160 (4K)', value: { width: 3840, height: 2160 } }, { label: '750 x 1334 (iPhone 6/7/8)', value: { width: 750, height: 1334 } }, { label: '1125 x 2436 (iPhone X/11/12)', value: { width: 1125, height: 2436 } }, { label: '1080 x 1920 (Mobile Portrait)', value: { width: 1080, height: 1920 } }, { label: '800 x 600 (SVGA)', value: { width: 800, height: 600 } }, { label: '1024 x 768 (XGA)', value: { width: 1024, height: 768 } }, ]; /** * Project Settings 编辑器模块 */ class ProjectSettingsEditorModule implements IEditorModuleLoader { private settingsListener: ((event: Event) => void) | null = null; async install(services: ServiceContainer): Promise { const settingsRegistry = services.resolve(SettingsRegistry); // Setup listener for UI design resolution changes this.setupSettingsListener(); settingsRegistry.registerCategory({ id: 'project', title: '项目', description: '项目级别的配置', sections: [ { id: 'ui-settings', title: 'UI 设置', description: '配置 UI 系统的基础参数', settings: [ { key: 'project.uiDesignResolution.width', label: '设计宽度', type: 'number', defaultValue: 1920, description: 'UI 画布的设计宽度(像素)', min: 320, max: 7680, step: 1 }, { key: 'project.uiDesignResolution.height', label: '设计高度', type: 'number', defaultValue: 1080, description: 'UI 画布的设计高度(像素)', min: 240, max: 4320, step: 1 }, { key: 'project.uiDesignResolution.preset', label: '分辨率预设', type: 'select', defaultValue: '1920x1080', description: '选择常见的分辨率预设', options: UI_RESOLUTION_PRESETS.map(p => ({ label: p.label, value: `${p.value.width}x${p.value.height}` })) } ] }, { id: 'modules', title: '引擎模块', description: '管理项目使用的引擎模块。每个模块包含运行时组件和编辑器工具。禁用不需要的模块可以减小构建体积。', settings: [ { key: 'project.disabledModules', label: '模块列表', type: 'moduleList', // Default: no modules disabled (all enabled) // 默认:没有禁用的模块(全部启用) defaultValue: [], description: '取消勾选不需要的模块。核心模块不能禁用。新增的模块会自动启用。', // Custom props for moduleList type // Modules are loaded dynamically from ModuleRegistry (sizes from module.json) // 模块从 ModuleRegistry 动态加载(大小来自 module.json) getModules: getModuleManifests, // Use blacklist mode: store disabled modules instead of enabled // 使用黑名单模式:存储禁用的模块而不是启用的 useBlacklist: true, validateDisable: async (moduleId: string) => { // Use moduleRegistry singleton for validation // 使用 moduleRegistry 单例进行验证 const validation = await moduleRegistry.validateDisable(moduleId); if (!validation.canDisable) { return { canDisable: false, reason: validation.message }; } return { canDisable: true }; } } as any // Cast to any to allow custom props ] } ] }); logger.info('Installed'); } async uninstall(): Promise { // Remove settings listener if (this.settingsListener) { window.removeEventListener('settings:changed', this.settingsListener); this.settingsListener = null; } logger.info('Uninstalled'); } async onEditorReady(): Promise { logger.info('Editor is ready'); } /** * Setup listener for settings changes * 设置设置变化监听器 */ private setupSettingsListener(): void { this.settingsListener = ((event: CustomEvent) => { const changedSettings = event.detail; // Check if UI design resolution changed if ('project.uiDesignResolution.width' in changedSettings || 'project.uiDesignResolution.height' in changedSettings || 'project.uiDesignResolution.preset' in changedSettings) { logger.info('UI design resolution changed, applying...'); this.applyUIDesignResolution(); } }) as EventListener; window.addEventListener('settings:changed', this.settingsListener); } /** * Apply UI design resolution from ProjectService * 从 ProjectService 应用 UI 设计分辨率 */ private applyUIDesignResolution(): void { const projectService = Core.services.tryResolve(ProjectService); if (!projectService) { logger.warn('ProjectService not available'); return; } const resolution = projectService.getUIDesignResolution(); const engineService = EngineService.getInstance(); if (engineService.isInitialized()) { engineService.setUICanvasSize(resolution.width, resolution.height); logger.info(`Applied UI design resolution: ${resolution.width}x${resolution.height}`); } } } const manifest: ModuleManifest = { id: '@esengine/project-settings', name: '@esengine/project-settings', displayName: 'Project Settings', version: '1.0.0', description: 'Configure project-level settings', category: 'Other', icon: 'Settings', isCore: true, defaultEnabled: true, isEngineModule: true, canContainContent: false, dependencies: [], exports: {} }; export const ProjectSettingsPlugin: IPlugin = { manifest, editorModule: new ProjectSettingsEditorModule() };