484 lines
18 KiB
TypeScript
484 lines
18 KiB
TypeScript
|
/**
|
||
|
|
* UI Editor Plugin
|
||
|
|
* 为编辑器提供 UI 组件的创建和编辑功能
|
||
|
|
*/
|
||
|
|
|
||
|
|
import React from 'react';
|
||
|
|
import { LayoutGrid, Square, Type, MousePointer2, Sliders, BarChart3, ScrollText, PanelTop } from 'lucide-react';
|
||
|
|
import type { ServiceContainer, Entity } from '@esengine/ecs-framework';
|
||
|
|
import { Core } from '@esengine/ecs-framework';
|
||
|
|
import type {
|
||
|
|
IEditorPlugin,
|
||
|
|
EntityCreationTemplate,
|
||
|
|
} from '@esengine/editor-core';
|
||
|
|
import {
|
||
|
|
EditorPluginCategory,
|
||
|
|
EntityStoreService,
|
||
|
|
MessageHub,
|
||
|
|
ComponentRegistry,
|
||
|
|
ComponentInspectorRegistry
|
||
|
|
} from '@esengine/editor-core';
|
||
|
|
import { UITransformInspector } from './inspectors';
|
||
|
|
import { registerUITransformGizmo, unregisterUITransformGizmo } from './gizmos';
|
||
|
|
|
||
|
|
// UI Components from @esengine/ui
|
||
|
|
import {
|
||
|
|
UITransformComponent,
|
||
|
|
UIRenderComponent,
|
||
|
|
UIInteractableComponent,
|
||
|
|
UITextComponent,
|
||
|
|
UILayoutComponent,
|
||
|
|
UILayoutType,
|
||
|
|
UIJustifyContent,
|
||
|
|
UIAlignItems,
|
||
|
|
UIButtonComponent,
|
||
|
|
UIProgressBarComponent,
|
||
|
|
UISliderComponent,
|
||
|
|
UIScrollViewComponent
|
||
|
|
} from '@esengine/ui';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* UI 编辑器插件
|
||
|
|
*/
|
||
|
|
export class UIEditorPlugin implements IEditorPlugin {
|
||
|
|
readonly name = '@esengine/ui-editor';
|
||
|
|
readonly version = '1.0.0';
|
||
|
|
readonly category = EditorPluginCategory.Tool;
|
||
|
|
|
||
|
|
get displayName(): string {
|
||
|
|
return 'UI Editor';
|
||
|
|
}
|
||
|
|
|
||
|
|
get description(): string {
|
||
|
|
return 'UI components and tools for creating game user interfaces';
|
||
|
|
}
|
||
|
|
|
||
|
|
async install(_core: Core, services: ServiceContainer): Promise<void> {
|
||
|
|
// Register UI components to component registry
|
||
|
|
const componentRegistry = services.resolve(ComponentRegistry);
|
||
|
|
if (componentRegistry) {
|
||
|
|
// Core UI Components
|
||
|
|
componentRegistry.register({
|
||
|
|
name: 'UITransform',
|
||
|
|
type: UITransformComponent,
|
||
|
|
category: 'components.category.ui',
|
||
|
|
description: 'UI element positioning and sizing'
|
||
|
|
});
|
||
|
|
|
||
|
|
componentRegistry.register({
|
||
|
|
name: 'UIRender',
|
||
|
|
type: UIRenderComponent,
|
||
|
|
category: 'components.category.ui',
|
||
|
|
description: 'UI element visual appearance'
|
||
|
|
});
|
||
|
|
|
||
|
|
componentRegistry.register({
|
||
|
|
name: 'UIInteractable',
|
||
|
|
type: UIInteractableComponent,
|
||
|
|
category: 'components.category.ui',
|
||
|
|
description: 'UI element interaction handling'
|
||
|
|
});
|
||
|
|
|
||
|
|
componentRegistry.register({
|
||
|
|
name: 'UIText',
|
||
|
|
type: UITextComponent,
|
||
|
|
category: 'components.category.ui',
|
||
|
|
description: 'Text rendering component'
|
||
|
|
});
|
||
|
|
|
||
|
|
componentRegistry.register({
|
||
|
|
name: 'UILayout',
|
||
|
|
type: UILayoutComponent,
|
||
|
|
category: 'components.category.ui',
|
||
|
|
description: 'Automatic child layout (Flexbox-like)'
|
||
|
|
});
|
||
|
|
|
||
|
|
// Widget Components
|
||
|
|
componentRegistry.register({
|
||
|
|
name: 'UIButton',
|
||
|
|
type: UIButtonComponent,
|
||
|
|
category: 'components.category.ui.widgets',
|
||
|
|
description: 'Interactive button component'
|
||
|
|
});
|
||
|
|
|
||
|
|
componentRegistry.register({
|
||
|
|
name: 'UIProgressBar',
|
||
|
|
type: UIProgressBarComponent,
|
||
|
|
category: 'components.category.ui.widgets',
|
||
|
|
description: 'Progress indicator component'
|
||
|
|
});
|
||
|
|
|
||
|
|
componentRegistry.register({
|
||
|
|
name: 'UISlider',
|
||
|
|
type: UISliderComponent,
|
||
|
|
category: 'components.category.ui.widgets',
|
||
|
|
description: 'Value slider component'
|
||
|
|
});
|
||
|
|
|
||
|
|
componentRegistry.register({
|
||
|
|
name: 'UIScrollView',
|
||
|
|
type: UIScrollViewComponent,
|
||
|
|
category: 'components.category.ui.widgets',
|
||
|
|
description: 'Scrollable container component'
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Register custom component inspectors
|
||
|
|
const componentInspectorRegistry = services.tryResolve(ComponentInspectorRegistry);
|
||
|
|
if (componentInspectorRegistry) {
|
||
|
|
componentInspectorRegistry.register(new UITransformInspector());
|
||
|
|
}
|
||
|
|
|
||
|
|
// Register gizmo providers
|
||
|
|
registerUITransformGizmo();
|
||
|
|
|
||
|
|
console.log('[UIEditorPlugin] Installed');
|
||
|
|
}
|
||
|
|
|
||
|
|
async uninstall(): Promise<void> {
|
||
|
|
unregisterUITransformGizmo();
|
||
|
|
console.log('[UIEditorPlugin] Uninstalled');
|
||
|
|
}
|
||
|
|
|
||
|
|
registerEntityCreationTemplates(): EntityCreationTemplate[] {
|
||
|
|
return [
|
||
|
|
// UI Canvas (Root container)
|
||
|
|
{
|
||
|
|
id: 'create-ui-canvas',
|
||
|
|
label: 'UI Canvas',
|
||
|
|
icon: React.createElement(PanelTop, { size: 12 }),
|
||
|
|
category: 'ui',
|
||
|
|
order: 200,
|
||
|
|
create: (_parentEntityId?: number): number => {
|
||
|
|
return this.createUIEntity('UI Canvas', (entity) => {
|
||
|
|
const transform = entity.getComponent(UITransformComponent)!;
|
||
|
|
transform.width = 1920;
|
||
|
|
transform.height = 1080;
|
||
|
|
transform.anchorMinX = 0;
|
||
|
|
transform.anchorMinY = 0;
|
||
|
|
transform.anchorMaxX = 1;
|
||
|
|
transform.anchorMaxY = 1;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// UI Panel
|
||
|
|
{
|
||
|
|
id: 'create-ui-panel',
|
||
|
|
label: 'Panel',
|
||
|
|
icon: React.createElement(Square, { size: 12 }),
|
||
|
|
category: 'ui',
|
||
|
|
order: 201,
|
||
|
|
create: (_parentEntityId?: number): number => {
|
||
|
|
return this.createUIEntity('Panel', (entity) => {
|
||
|
|
const render = entity.getComponent(UIRenderComponent)!;
|
||
|
|
render.backgroundColor = 0x2D2D2D;
|
||
|
|
render.backgroundAlpha = 0.9;
|
||
|
|
render.setCornerRadius(8);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// UI Text
|
||
|
|
{
|
||
|
|
id: 'create-ui-text',
|
||
|
|
label: 'Text',
|
||
|
|
icon: React.createElement(Type, { size: 12 }),
|
||
|
|
category: 'ui',
|
||
|
|
order: 202,
|
||
|
|
create: (_parentEntityId?: number): number => {
|
||
|
|
return this.createUIEntity('Text', (entity) => {
|
||
|
|
const transform = entity.getComponent(UITransformComponent)!;
|
||
|
|
transform.width = 200;
|
||
|
|
transform.height = 30;
|
||
|
|
|
||
|
|
// Make background transparent for text
|
||
|
|
const render = entity.getComponent(UIRenderComponent)!;
|
||
|
|
render.backgroundAlpha = 0;
|
||
|
|
|
||
|
|
// Add text component
|
||
|
|
const text = new UITextComponent();
|
||
|
|
text.text = 'Hello World';
|
||
|
|
text.fontSize = 16;
|
||
|
|
text.color = 0xFFFFFF;
|
||
|
|
entity.addComponent(text);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// UI Button
|
||
|
|
{
|
||
|
|
id: 'create-ui-button',
|
||
|
|
label: 'Button',
|
||
|
|
icon: React.createElement(MousePointer2, { size: 12 }),
|
||
|
|
category: 'ui',
|
||
|
|
order: 203,
|
||
|
|
create: (_parentEntityId?: number): number => {
|
||
|
|
return this.createUIEntity('Button', (entity) => {
|
||
|
|
const transform = entity.getComponent(UITransformComponent)!;
|
||
|
|
transform.width = 120;
|
||
|
|
transform.height = 40;
|
||
|
|
|
||
|
|
const render = entity.getComponent(UIRenderComponent)!;
|
||
|
|
render.setCornerRadius(4);
|
||
|
|
|
||
|
|
// Add button component
|
||
|
|
const button = new UIButtonComponent();
|
||
|
|
button.label = 'Button';
|
||
|
|
entity.addComponent(button);
|
||
|
|
|
||
|
|
// Make interactable
|
||
|
|
const interactable = entity.getComponent(UIInteractableComponent)!;
|
||
|
|
interactable.enabled = true;
|
||
|
|
interactable.cursor = 'pointer';
|
||
|
|
|
||
|
|
// Add text for button label
|
||
|
|
const text = new UITextComponent();
|
||
|
|
text.text = 'Button';
|
||
|
|
text.fontSize = 14;
|
||
|
|
text.color = 0xFFFFFF;
|
||
|
|
text.align = 'center';
|
||
|
|
text.verticalAlign = 'middle';
|
||
|
|
entity.addComponent(text);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// UI Slider
|
||
|
|
{
|
||
|
|
id: 'create-ui-slider',
|
||
|
|
label: 'Slider',
|
||
|
|
icon: React.createElement(Sliders, { size: 12 }),
|
||
|
|
category: 'ui',
|
||
|
|
order: 204,
|
||
|
|
create: (_parentEntityId?: number): number => {
|
||
|
|
return this.createUIEntity('Slider', (entity) => {
|
||
|
|
const transform = entity.getComponent(UITransformComponent)!;
|
||
|
|
transform.width = 200;
|
||
|
|
transform.height = 20;
|
||
|
|
|
||
|
|
// Remove default render, slider renders itself
|
||
|
|
const render = entity.getComponent(UIRenderComponent);
|
||
|
|
if (render) {
|
||
|
|
entity.removeComponent(render);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Add slider component
|
||
|
|
const slider = new UISliderComponent();
|
||
|
|
slider.value = 50;
|
||
|
|
slider.minValue = 0;
|
||
|
|
slider.maxValue = 100;
|
||
|
|
entity.addComponent(slider);
|
||
|
|
|
||
|
|
// Make interactable
|
||
|
|
const interactable = entity.getComponent(UIInteractableComponent)!;
|
||
|
|
interactable.enabled = true;
|
||
|
|
interactable.cursor = 'pointer';
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// UI Progress Bar
|
||
|
|
{
|
||
|
|
id: 'create-ui-progressbar',
|
||
|
|
label: 'ProgressBar',
|
||
|
|
icon: React.createElement(BarChart3, { size: 12 }),
|
||
|
|
category: 'ui',
|
||
|
|
order: 205,
|
||
|
|
create: (_parentEntityId?: number): number => {
|
||
|
|
return this.createUIEntity('ProgressBar', (entity) => {
|
||
|
|
const transform = entity.getComponent(UITransformComponent)!;
|
||
|
|
transform.width = 200;
|
||
|
|
transform.height = 20;
|
||
|
|
|
||
|
|
// Remove default render, progressbar renders itself
|
||
|
|
const render = entity.getComponent(UIRenderComponent);
|
||
|
|
if (render) {
|
||
|
|
entity.removeComponent(render);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Add progress bar component
|
||
|
|
const progress = new UIProgressBarComponent();
|
||
|
|
progress.value = 50;
|
||
|
|
progress.minValue = 0;
|
||
|
|
progress.maxValue = 100;
|
||
|
|
progress.cornerRadius = 4;
|
||
|
|
entity.addComponent(progress);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// UI ScrollView
|
||
|
|
{
|
||
|
|
id: 'create-ui-scrollview',
|
||
|
|
label: 'ScrollView',
|
||
|
|
icon: React.createElement(ScrollText, { size: 12 }),
|
||
|
|
category: 'ui',
|
||
|
|
order: 206,
|
||
|
|
create: (_parentEntityId?: number): number => {
|
||
|
|
return this.createUIEntity('ScrollView', (entity) => {
|
||
|
|
const transform = entity.getComponent(UITransformComponent)!;
|
||
|
|
transform.width = 300;
|
||
|
|
transform.height = 400;
|
||
|
|
|
||
|
|
const render = entity.getComponent(UIRenderComponent)!;
|
||
|
|
render.backgroundColor = 0x1A1A1A;
|
||
|
|
render.setCornerRadius(4);
|
||
|
|
|
||
|
|
// Add scroll view component
|
||
|
|
const scrollView = new UIScrollViewComponent();
|
||
|
|
scrollView.verticalScroll = true;
|
||
|
|
scrollView.horizontalScroll = false;
|
||
|
|
scrollView.contentHeight = 800;
|
||
|
|
entity.addComponent(scrollView);
|
||
|
|
|
||
|
|
// Make interactable for scroll
|
||
|
|
const interactable = entity.getComponent(UIInteractableComponent)!;
|
||
|
|
interactable.enabled = true;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// UI Layout Container (Horizontal)
|
||
|
|
{
|
||
|
|
id: 'create-ui-hlayout',
|
||
|
|
label: 'HLayout',
|
||
|
|
icon: React.createElement(LayoutGrid, { size: 12 }),
|
||
|
|
category: 'ui',
|
||
|
|
order: 207,
|
||
|
|
create: (_parentEntityId?: number): number => {
|
||
|
|
return this.createUIEntity('HLayout', (entity) => {
|
||
|
|
const transform = entity.getComponent(UITransformComponent)!;
|
||
|
|
transform.width = 400;
|
||
|
|
transform.height = 100;
|
||
|
|
|
||
|
|
// Add layout component
|
||
|
|
const layout = new UILayoutComponent();
|
||
|
|
layout.type = UILayoutType.Horizontal;
|
||
|
|
layout.gap = 10;
|
||
|
|
layout.justifyContent = UIJustifyContent.Start;
|
||
|
|
layout.alignItems = UIAlignItems.Center;
|
||
|
|
entity.addComponent(layout);
|
||
|
|
|
||
|
|
// Make background transparent
|
||
|
|
const render = entity.getComponent(UIRenderComponent)!;
|
||
|
|
render.backgroundAlpha = 0;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// UI Layout Container (Vertical)
|
||
|
|
{
|
||
|
|
id: 'create-ui-vlayout',
|
||
|
|
label: 'VLayout',
|
||
|
|
icon: React.createElement(LayoutGrid, { size: 12 }),
|
||
|
|
category: 'ui',
|
||
|
|
order: 208,
|
||
|
|
create: (_parentEntityId?: number): number => {
|
||
|
|
return this.createUIEntity('VLayout', (entity) => {
|
||
|
|
const transform = entity.getComponent(UITransformComponent)!;
|
||
|
|
transform.width = 200;
|
||
|
|
transform.height = 400;
|
||
|
|
|
||
|
|
// Add layout component
|
||
|
|
const layout = new UILayoutComponent();
|
||
|
|
layout.type = UILayoutType.Vertical;
|
||
|
|
layout.gap = 10;
|
||
|
|
layout.justifyContent = UIJustifyContent.Start;
|
||
|
|
layout.alignItems = UIAlignItems.Stretch;
|
||
|
|
entity.addComponent(layout);
|
||
|
|
|
||
|
|
// Make background transparent
|
||
|
|
const render = entity.getComponent(UIRenderComponent)!;
|
||
|
|
render.backgroundAlpha = 0;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// UI Grid Layout
|
||
|
|
{
|
||
|
|
id: 'create-ui-grid',
|
||
|
|
label: 'Grid',
|
||
|
|
icon: React.createElement(LayoutGrid, { size: 12 }),
|
||
|
|
category: 'ui',
|
||
|
|
order: 209,
|
||
|
|
create: (_parentEntityId?: number): number => {
|
||
|
|
return this.createUIEntity('Grid', (entity) => {
|
||
|
|
const transform = entity.getComponent(UITransformComponent)!;
|
||
|
|
transform.width = 400;
|
||
|
|
transform.height = 400;
|
||
|
|
|
||
|
|
// Add layout component
|
||
|
|
const layout = new UILayoutComponent();
|
||
|
|
layout.type = UILayoutType.Grid;
|
||
|
|
layout.columns = 3;
|
||
|
|
layout.gap = 10;
|
||
|
|
entity.addComponent(layout);
|
||
|
|
|
||
|
|
// Make background transparent
|
||
|
|
const render = entity.getComponent(UIRenderComponent)!;
|
||
|
|
render.backgroundAlpha = 0;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
];
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 创建 UI 实体的辅助方法
|
||
|
|
*/
|
||
|
|
private createUIEntity(baseName: string, configure?: (entity: Entity) => void): 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');
|
||
|
|
}
|
||
|
|
|
||
|
|
// Count existing entities with same base name
|
||
|
|
const existingCount = entityStore.getAllEntities()
|
||
|
|
.filter((e: Entity) => e.name.startsWith(baseName)).length;
|
||
|
|
const entityName = existingCount > 0 ? `${baseName} ${existingCount + 1}` : baseName;
|
||
|
|
|
||
|
|
// Create entity via scene
|
||
|
|
const entity = scene.createEntity(entityName);
|
||
|
|
|
||
|
|
// Add base UI components
|
||
|
|
const transform = new UITransformComponent();
|
||
|
|
transform.width = 100;
|
||
|
|
transform.height = 100;
|
||
|
|
entity.addComponent(transform);
|
||
|
|
|
||
|
|
const render = new UIRenderComponent();
|
||
|
|
render.backgroundColor = 0x4A90D9;
|
||
|
|
entity.addComponent(render);
|
||
|
|
|
||
|
|
const interactable = new UIInteractableComponent();
|
||
|
|
entity.addComponent(interactable);
|
||
|
|
|
||
|
|
// Apply custom configuration
|
||
|
|
if (configure) {
|
||
|
|
configure(entity);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Register with entity store
|
||
|
|
entityStore.addEntity(entity);
|
||
|
|
|
||
|
|
// Notify
|
||
|
|
messageHub.publish('entity:added', { entity });
|
||
|
|
messageHub.publish('scene:modified', {});
|
||
|
|
|
||
|
|
// Select the new entity
|
||
|
|
entityStore.selectEntity(entity);
|
||
|
|
|
||
|
|
return entity.id;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export const uiEditorPlugin = new UIEditorPlugin();
|