Feature/runtime cdn and plugin loader (#240)
* feat(ui): 完善 UI 布局系统和编辑器可视化工具 * refactor: 移除 ModuleRegistry，统一使用 PluginManager 插件系统 * fix: 修复 CodeQL 警告并提升测试覆盖率 * refactor: 分离运行时入口点，解决 runtime bundle 包含 React 的问题 * fix(ci): 添加 editor-core 和 editor-runtime 到 CI 依赖构建步骤 * docs: 完善 ServiceContainer 文档，新增 Symbol.for 模式和 @InjectProperty 说明 * fix(ci): 修复 type-check 失败问题 * fix(ci): 修复类型检查失败问题 * fix(ci): 修复类型检查失败问题 * fix(ci): behavior-tree 构建添加 @tauri-apps 外部依赖 * fix(ci): behavior-tree 添加 @tauri-apps/plugin-fs 类型依赖 * fix(ci): platform-web 添加缺失的 behavior-tree 依赖 * fix(lint): 移除正则表达式中不必要的转义字符
This commit is contained in:
YHH
GitHub
@@ -1,49 +0,0 @@
|
||||
{
|
||||
"name": "@esengine/ui-editor",
|
||||
"version": "1.0.0",
|
||||
"description": "UI editor plugin for ECS Framework Editor",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"module": "src/index.ts",
|
||||
"types": "src/index.ts",
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./src/index.ts",
|
||||
"import": "./src/index.ts",
|
||||
"default": "./src/index.ts"
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"bin"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "tsc",
|
||||
"build:watch": "tsc --watch",
|
||||
"clean": "rimraf bin"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/esengine/ecs-framework.git",
|
||||
"directory": "packages/ui-editor"
|
||||
},
|
||||
"keywords": [
|
||||
"ecs",
|
||||
"ui",
|
||||
"editor",
|
||||
"game-engine"
|
||||
],
|
||||
"author": "ESEngine Team",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@esengine/ecs-framework": "^2.2.8",
|
||||
"@esengine/editor-core": "workspace:*",
|
||||
"@esengine/ui": "workspace:*",
|
||||
"react": "^18.3.1",
|
||||
"lucide-react": "^0.545.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.3.12",
|
||||
"typescript": "^5.8.3",
|
||||
"rimraf": "^5.0.0"
|
||||
}
|
||||
}
|
||||
@@ -1,483 +0,0 @@
|
||||
/**
|
||||
* 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();
|
||||
@@ -1,46 +0,0 @@
|
||||
import type { Entity } from '@esengine/ecs-framework';
|
||||
import type { IGizmoRenderData, IRectGizmoData, GizmoColor } from '@esengine/editor-core';
|
||||
import { GizmoRegistry } from '@esengine/editor-core';
|
||||
import { UITransformComponent } from '@esengine/ui';
|
||||
|
||||
const UI_GIZMO_COLOR: GizmoColor = { r: 0.2, g: 0.6, b: 1, a: 0.8 };
|
||||
const UI_GIZMO_COLOR_UNSELECTED: GizmoColor = { r: 0.2, g: 0.6, b: 1, a: 0.3 };
|
||||
|
||||
function uiTransformGizmoProvider(
|
||||
transform: UITransformComponent,
|
||||
_entity: Entity,
|
||||
isSelected: boolean
|
||||
): IGizmoRenderData[] {
|
||||
if (!transform.visible) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const width = transform.width * transform.scaleX;
|
||||
const height = transform.height * transform.scaleY;
|
||||
|
||||
const centerX = transform.x + width * transform.pivotX;
|
||||
const centerY = transform.y + height * transform.pivotY;
|
||||
|
||||
const gizmo: IRectGizmoData = {
|
||||
type: 'rect',
|
||||
x: centerX,
|
||||
y: centerY,
|
||||
width,
|
||||
height,
|
||||
rotation: transform.rotation,
|
||||
originX: transform.pivotX,
|
||||
originY: transform.pivotY,
|
||||
color: isSelected ? UI_GIZMO_COLOR : UI_GIZMO_COLOR_UNSELECTED,
|
||||
showHandles: isSelected
|
||||
};
|
||||
|
||||
return [gizmo];
|
||||
}
|
||||
|
||||
export function registerUITransformGizmo(): void {
|
||||
GizmoRegistry.register(UITransformComponent, uiTransformGizmoProvider);
|
||||
}
|
||||
|
||||
export function unregisterUITransformGizmo(): void {
|
||||
GizmoRegistry.unregister(UITransformComponent);
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export * from './UITransformGizmo';
|
||||
@@ -1,6 +0,0 @@
|
||||
/**
|
||||
* @esengine/ui-editor
|
||||
* UI Editor Plugin for ECS Framework Editor
|
||||
*/
|
||||
|
||||
export { UIEditorPlugin, uiEditorPlugin } from './UIEditorPlugin';
|
||||
@@ -1,454 +0,0 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { Component } from '@esengine/ecs-framework';
|
||||
import type { IComponentInspector, ComponentInspectorContext } from '@esengine/editor-core';
|
||||
import { UITransformComponent, AnchorPreset } from '@esengine/ui';
|
||||
|
||||
const DraggableNumberInput: React.FC<{
|
||||
axis?: 'x' | 'y' | 'z' | 'w';
|
||||
label?: string;
|
||||
value: number;
|
||||
onChange: (value: number) => void;
|
||||
min?: number;
|
||||
max?: number;
|
||||
step?: number;
|
||||
readOnly?: boolean;
|
||||
}> = ({ axis, label, value, onChange, min, max, step = 0.1, readOnly }) => {
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const dragStartRef = useRef({ x: 0, value: 0 });
|
||||
|
||||
const handleMouseDown = (e: React.MouseEvent) => {
|
||||
if (readOnly) return;
|
||||
e.preventDefault();
|
||||
setIsDragging(true);
|
||||
dragStartRef.current = { x: e.clientX, value: value ?? 0 };
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!isDragging) return;
|
||||
|
||||
const handleMouseMove = (e: MouseEvent) => {
|
||||
const delta = e.clientX - dragStartRef.current.x;
|
||||
const sensitivity = e.shiftKey ? 0.01 : step;
|
||||
let newValue = dragStartRef.current.value + delta * sensitivity;
|
||||
|
||||
if (min !== undefined) newValue = Math.max(min, newValue);
|
||||
if (max !== undefined) newValue = Math.min(max, newValue);
|
||||
|
||||
onChange(Math.round(newValue * 1000) / 1000);
|
||||
};
|
||||
|
||||
const handleMouseUp = () => setIsDragging(false);
|
||||
|
||||
document.addEventListener('mousemove', handleMouseMove);
|
||||
document.addEventListener('mouseup', handleMouseUp);
|
||||
return () => {
|
||||
document.removeEventListener('mousemove', handleMouseMove);
|
||||
document.removeEventListener('mouseup', handleMouseUp);
|
||||
};
|
||||
}, [isDragging, onChange, step, min, max]);
|
||||
|
||||
const axisClass = axis ? `property-vector-axis-${axis}` : '';
|
||||
const displayLabel = label || (axis ? axis.toUpperCase() : '');
|
||||
|
||||
return (
|
||||
<div className="property-vector-axis-compact">
|
||||
<span
|
||||
className={`property-vector-axis-label ${axisClass}`}
|
||||
onMouseDown={handleMouseDown}
|
||||
style={{ cursor: readOnly ? 'default' : 'ew-resize' }}
|
||||
>
|
||||
{displayLabel}
|
||||
</span>
|
||||
<input
|
||||
type="number"
|
||||
className="property-input property-input-number-compact"
|
||||
value={value ?? 0}
|
||||
min={min}
|
||||
max={max}
|
||||
step={step}
|
||||
disabled={readOnly}
|
||||
onChange={(e) => onChange(parseFloat(e.target.value) || 0)}
|
||||
onFocus={(e) => e.target.select()}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Vector2Row: React.FC<{
|
||||
label: string;
|
||||
valueX: number;
|
||||
valueY: number;
|
||||
onChangeX: (value: number) => void;
|
||||
onChangeY: (value: number) => void;
|
||||
min?: number;
|
||||
max?: number;
|
||||
step?: number;
|
||||
readOnly?: boolean;
|
||||
}> = ({ label, valueX, valueY, onChangeX, onChangeY, min, max, step, readOnly }) => (
|
||||
<div className="property-field">
|
||||
<label className="property-label">{label}</label>
|
||||
<div className="property-vector-compact">
|
||||
<DraggableNumberInput axis="x" value={valueX} onChange={onChangeX} min={min} max={max} step={step} readOnly={readOnly} />
|
||||
<DraggableNumberInput axis="y" value={valueY} onChange={onChangeY} min={min} max={max} step={step} readOnly={readOnly} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const NumberRow: React.FC<{
|
||||
label: string;
|
||||
value: number;
|
||||
onChange: (value: number) => void;
|
||||
min?: number;
|
||||
max?: number;
|
||||
step?: number;
|
||||
readOnly?: boolean;
|
||||
}> = ({ label, value, onChange, min, max, step = 0.1, readOnly }) => {
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [dragStartX, setDragStartX] = useState(0);
|
||||
const [dragStartValue, setDragStartValue] = useState(0);
|
||||
|
||||
const handleMouseDown = (e: React.MouseEvent) => {
|
||||
if (readOnly) return;
|
||||
setIsDragging(true);
|
||||
setDragStartX(e.clientX);
|
||||
setDragStartValue(value);
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!isDragging) return;
|
||||
|
||||
const handleMouseMove = (e: MouseEvent) => {
|
||||
const delta = e.clientX - dragStartX;
|
||||
const sensitivity = e.shiftKey ? 0.01 : step;
|
||||
let newValue = dragStartValue + delta * sensitivity;
|
||||
|
||||
if (min !== undefined) newValue = Math.max(min, newValue);
|
||||
if (max !== undefined) newValue = Math.min(max, newValue);
|
||||
|
||||
onChange(parseFloat(newValue.toFixed(3)));
|
||||
};
|
||||
|
||||
const handleMouseUp = () => setIsDragging(false);
|
||||
|
||||
document.addEventListener('mousemove', handleMouseMove);
|
||||
document.addEventListener('mouseup', handleMouseUp);
|
||||
return () => {
|
||||
document.removeEventListener('mousemove', handleMouseMove);
|
||||
document.removeEventListener('mouseup', handleMouseUp);
|
||||
};
|
||||
}, [isDragging, dragStartX, dragStartValue, step, min, max, onChange]);
|
||||
|
||||
return (
|
||||
<div className="property-field">
|
||||
<label
|
||||
className="property-label property-label-draggable"
|
||||
onMouseDown={handleMouseDown}
|
||||
style={{ cursor: readOnly ? 'default' : 'ew-resize' }}
|
||||
>
|
||||
{label}
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
className="property-input property-input-number"
|
||||
value={value ?? 0}
|
||||
min={min}
|
||||
max={max}
|
||||
step={step}
|
||||
disabled={readOnly}
|
||||
onChange={(e) => onChange(parseFloat(e.target.value) || 0)}
|
||||
onFocus={(e) => e.target.select()}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const BooleanRow: React.FC<{
|
||||
label: string;
|
||||
value: boolean;
|
||||
onChange: (value: boolean) => void;
|
||||
readOnly?: boolean;
|
||||
}> = ({ label, value, onChange, readOnly }) => (
|
||||
<div className="property-field property-field-boolean">
|
||||
<label className="property-label">{label}</label>
|
||||
<button
|
||||
className={`property-toggle ${value ? 'property-toggle-on' : 'property-toggle-off'}`}
|
||||
disabled={readOnly}
|
||||
onClick={() => onChange(!value)}
|
||||
>
|
||||
<span className="property-toggle-thumb" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
|
||||
const AnchorPresetGrid: React.FC<{
|
||||
currentPreset: string;
|
||||
onSelect: (preset: AnchorPreset) => void;
|
||||
}> = ({ currentPreset, onSelect }) => {
|
||||
const presets: AnchorPreset[][] = [
|
||||
[AnchorPreset.TopLeft, AnchorPreset.TopCenter, AnchorPreset.TopRight],
|
||||
[AnchorPreset.MiddleLeft, AnchorPreset.MiddleCenter, AnchorPreset.MiddleRight],
|
||||
[AnchorPreset.BottomLeft, AnchorPreset.BottomCenter, AnchorPreset.BottomRight],
|
||||
];
|
||||
|
||||
const getAnchorPosition = (preset: AnchorPreset): { x: number; y: number } => {
|
||||
const positions: Record<AnchorPreset, { x: number; y: number }> = {
|
||||
[AnchorPreset.TopLeft]: { x: 3, y: 3 },
|
||||
[AnchorPreset.TopCenter]: { x: 10, y: 3 },
|
||||
[AnchorPreset.TopRight]: { x: 17, y: 3 },
|
||||
[AnchorPreset.MiddleLeft]: { x: 3, y: 10 },
|
||||
[AnchorPreset.MiddleCenter]: { x: 10, y: 10 },
|
||||
[AnchorPreset.MiddleRight]: { x: 17, y: 10 },
|
||||
[AnchorPreset.BottomLeft]: { x: 3, y: 17 },
|
||||
[AnchorPreset.BottomCenter]: { x: 10, y: 17 },
|
||||
[AnchorPreset.BottomRight]: { x: 17, y: 17 },
|
||||
[AnchorPreset.StretchAll]: { x: 10, y: 10 },
|
||||
};
|
||||
return positions[preset];
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="property-field" style={{ alignItems: 'flex-start' }}>
|
||||
<label className="property-label">Anchor</label>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(3, 24px)',
|
||||
gridTemplateRows: 'repeat(3, 24px)',
|
||||
gap: '2px',
|
||||
padding: '4px',
|
||||
background: 'var(--color-bg-inset)',
|
||||
borderRadius: 'var(--radius-sm)',
|
||||
border: '1px solid var(--color-border-default)',
|
||||
}}>
|
||||
{presets.flat().map((preset) => {
|
||||
const pos = getAnchorPosition(preset);
|
||||
const isActive = currentPreset === preset;
|
||||
return (
|
||||
<button
|
||||
key={preset}
|
||||
onClick={() => onSelect(preset)}
|
||||
style={{
|
||||
width: '24px',
|
||||
height: '24px',
|
||||
padding: 0,
|
||||
border: '1px solid',
|
||||
borderColor: isActive ? 'var(--color-primary)' : 'var(--color-border-default)',
|
||||
borderRadius: 'var(--radius-sm)',
|
||||
background: isActive ? 'var(--color-primary-subtle)' : 'var(--color-bg-elevated)',
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
transition: 'all var(--transition-fast)',
|
||||
}}
|
||||
title={preset}
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20">
|
||||
<rect
|
||||
x="2" y="2" width="16" height="16"
|
||||
fill="none"
|
||||
stroke={isActive ? 'var(--color-primary)' : 'var(--color-text-tertiary)'}
|
||||
strokeWidth="1"
|
||||
strokeDasharray="2,2"
|
||||
/>
|
||||
<circle
|
||||
cx={pos.x} cy={pos.y} r="3"
|
||||
fill={isActive ? 'var(--color-primary)' : 'var(--color-text-secondary)'}
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => onSelect(AnchorPreset.StretchAll)}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '22px',
|
||||
padding: '0 8px',
|
||||
border: '1px solid',
|
||||
borderColor: currentPreset === AnchorPreset.StretchAll ? 'var(--color-primary)' : 'var(--color-border-default)',
|
||||
borderRadius: 'var(--radius-sm)',
|
||||
background: currentPreset === AnchorPreset.StretchAll ? 'var(--color-primary-subtle)' : 'var(--color-bg-elevated)',
|
||||
color: currentPreset === AnchorPreset.StretchAll ? 'var(--color-primary)' : 'var(--color-text-secondary)',
|
||||
cursor: 'pointer',
|
||||
fontSize: '10px',
|
||||
fontWeight: 500,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: '4px',
|
||||
transition: 'all var(--transition-fast)',
|
||||
}}
|
||||
title="Stretch All"
|
||||
>
|
||||
<svg width="14" height="14" viewBox="0 0 14 14">
|
||||
<rect x="1" y="1" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="1" />
|
||||
<line x1="3" y1="7" x2="11" y2="7" stroke="currentColor" strokeWidth="1.5" />
|
||||
<line x1="7" y1="3" x2="7" y2="11" stroke="currentColor" strokeWidth="1.5" />
|
||||
</svg>
|
||||
Stretch
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export class UITransformInspector implements IComponentInspector<UITransformComponent> {
|
||||
readonly id = 'uitransform-inspector';
|
||||
readonly name = 'UITransform Inspector';
|
||||
readonly priority = 100;
|
||||
readonly targetComponents = ['UITransform', 'UITransformComponent'];
|
||||
|
||||
canHandle(component: Component): component is UITransformComponent {
|
||||
return component instanceof UITransformComponent ||
|
||||
component.constructor.name === 'UITransformComponent';
|
||||
}
|
||||
|
||||
render(context: ComponentInspectorContext): React.ReactElement {
|
||||
const transform = context.component as UITransformComponent;
|
||||
const onChange = context.onChange;
|
||||
|
||||
const handleChange = (prop: string, value: number | boolean) => {
|
||||
onChange?.(prop, value);
|
||||
};
|
||||
|
||||
const detectCurrentPreset = (): string => {
|
||||
const { anchorMinX, anchorMinY, anchorMaxX, anchorMaxY } = transform;
|
||||
if (anchorMinX === 0 && anchorMinY === 0 && anchorMaxX === 1 && anchorMaxY === 1) {
|
||||
return AnchorPreset.StretchAll;
|
||||
}
|
||||
if (anchorMinX === anchorMaxX && anchorMinY === anchorMaxY) {
|
||||
if (anchorMinX === 0 && anchorMinY === 0) return AnchorPreset.TopLeft;
|
||||
if (anchorMinX === 0.5 && anchorMinY === 0) return AnchorPreset.TopCenter;
|
||||
if (anchorMinX === 1 && anchorMinY === 0) return AnchorPreset.TopRight;
|
||||
if (anchorMinX === 0 && anchorMinY === 0.5) return AnchorPreset.MiddleLeft;
|
||||
if (anchorMinX === 0.5 && anchorMinY === 0.5) return AnchorPreset.MiddleCenter;
|
||||
if (anchorMinX === 1 && anchorMinY === 0.5) return AnchorPreset.MiddleRight;
|
||||
if (anchorMinX === 0 && anchorMinY === 1) return AnchorPreset.BottomLeft;
|
||||
if (anchorMinX === 0.5 && anchorMinY === 1) return AnchorPreset.BottomCenter;
|
||||
if (anchorMinX === 1 && anchorMinY === 1) return AnchorPreset.BottomRight;
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
||||
const handlePresetSelect = (preset: AnchorPreset) => {
|
||||
const presetValues: Record<AnchorPreset, [number, number, number, number]> = {
|
||||
[AnchorPreset.TopLeft]: [0, 0, 0, 0],
|
||||
[AnchorPreset.TopCenter]: [0.5, 0, 0.5, 0],
|
||||
[AnchorPreset.TopRight]: [1, 0, 1, 0],
|
||||
[AnchorPreset.MiddleLeft]: [0, 0.5, 0, 0.5],
|
||||
[AnchorPreset.MiddleCenter]: [0.5, 0.5, 0.5, 0.5],
|
||||
[AnchorPreset.MiddleRight]: [1, 0.5, 1, 0.5],
|
||||
[AnchorPreset.BottomLeft]: [0, 1, 0, 1],
|
||||
[AnchorPreset.BottomCenter]: [0.5, 1, 0.5, 1],
|
||||
[AnchorPreset.BottomRight]: [1, 1, 1, 1],
|
||||
[AnchorPreset.StretchAll]: [0, 0, 1, 1],
|
||||
};
|
||||
|
||||
const [minX, minY, maxX, maxY] = presetValues[preset];
|
||||
handleChange('anchorMinX', minX);
|
||||
handleChange('anchorMinY', minY);
|
||||
handleChange('anchorMaxX', maxX);
|
||||
handleChange('anchorMaxY', maxY);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="property-inspector">
|
||||
<AnchorPresetGrid
|
||||
currentPreset={detectCurrentPreset()}
|
||||
onSelect={handlePresetSelect}
|
||||
/>
|
||||
|
||||
<Vector2Row
|
||||
label="Position"
|
||||
valueX={transform.x}
|
||||
valueY={transform.y}
|
||||
onChangeX={(v) => handleChange('x', v)}
|
||||
onChangeY={(v) => handleChange('y', v)}
|
||||
/>
|
||||
|
||||
<Vector2Row
|
||||
label="Size"
|
||||
valueX={transform.width}
|
||||
valueY={transform.height}
|
||||
onChangeX={(v) => handleChange('width', v)}
|
||||
onChangeY={(v) => handleChange('height', v)}
|
||||
min={0}
|
||||
/>
|
||||
|
||||
<Vector2Row
|
||||
label="Anchor Min"
|
||||
valueX={transform.anchorMinX}
|
||||
valueY={transform.anchorMinY}
|
||||
onChangeX={(v) => handleChange('anchorMinX', v)}
|
||||
onChangeY={(v) => handleChange('anchorMinY', v)}
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.01}
|
||||
/>
|
||||
|
||||
<Vector2Row
|
||||
label="Anchor Max"
|
||||
valueX={transform.anchorMaxX}
|
||||
valueY={transform.anchorMaxY}
|
||||
onChangeX={(v) => handleChange('anchorMaxX', v)}
|
||||
onChangeY={(v) => handleChange('anchorMaxY', v)}
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.01}
|
||||
/>
|
||||
|
||||
<Vector2Row
|
||||
label="Pivot"
|
||||
valueX={transform.pivotX}
|
||||
valueY={transform.pivotY}
|
||||
onChangeX={(v) => handleChange('pivotX', v)}
|
||||
onChangeY={(v) => handleChange('pivotY', v)}
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.01}
|
||||
/>
|
||||
|
||||
<NumberRow
|
||||
label="Rotation"
|
||||
value={transform.rotation}
|
||||
onChange={(v) => handleChange('rotation', v)}
|
||||
step={0.01}
|
||||
/>
|
||||
|
||||
<Vector2Row
|
||||
label="Scale"
|
||||
valueX={transform.scaleX}
|
||||
valueY={transform.scaleY}
|
||||
onChangeX={(v) => handleChange('scaleX', v)}
|
||||
onChangeY={(v) => handleChange('scaleY', v)}
|
||||
step={0.01}
|
||||
/>
|
||||
|
||||
<NumberRow
|
||||
label="Z Index"
|
||||
value={transform.zIndex}
|
||||
onChange={(v) => handleChange('zIndex', Math.round(v))}
|
||||
step={1}
|
||||
/>
|
||||
|
||||
<NumberRow
|
||||
label="Alpha"
|
||||
value={transform.alpha}
|
||||
onChange={(v) => handleChange('alpha', v)}
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.01}
|
||||
/>
|
||||
|
||||
<BooleanRow
|
||||
label="Visible"
|
||||
value={transform.visible}
|
||||
onChange={(v) => handleChange('visible', v)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export * from './UITransformInspector';
|
||||
@@ -1,26 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"declaration": true,
|
||||
"declarationMap": true,
|
||||
"sourceMap": true,
|
||||
"outDir": "./bin",
|
||||
"rootDir": "./src",
|
||||
"strict": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": false,
|
||||
"jsx": "react-jsx",
|
||||
"experimentalDecorators": true,
|
||||
"emitDecoratorMetadata": true,
|
||||
"useDefineForClassFields": false
|
||||
},
|
||||
"include": ["src/**/*"],
|
||||
"exclude": ["node_modules", "bin"]
|
||||
}
|
||||
Reference in New Issue
Block a user