CocosPlugin/esengine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feature/editor optimization (#251)

Browse Source 
* refactor: 编辑器/运行时架构拆分与构建系统升级

* feat(core): 层级系统重构与UI变换矩阵修复

* refactor: 移除 ecs-components 聚合包并修复跨包组件查找问题

* fix(physics): 修复跨包组件类引用问题

* feat: 统一运行时架构与浏览器运行支持

* feat(asset): 实现浏览器运行时资产加载系统

* fix: 修复文档、CodeQL安全问题和CI类型检查错误

* fix: 修复文档、CodeQL安全问题和CI类型检查错误

* fix: 修复文档、CodeQL安全问题、CI类型检查和测试错误

* test: 补齐核心模块测试用例，修复CI构建配置

* fix: 修复测试用例中的类型错误和断言问题

* fix: 修复 turbo build:npm 任务的依赖顺序问题

* fix: 修复 CI 构建错误并优化构建性能
This commit is contained in:
YHH
2025-12-01 22:28:51 +08:00
committed by GitHub
parent 189714c727
commit b42a7b4e43
468 changed files with 18301 additions and 9075 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
packages/ui-editor/package.json Normal file
View File

@@ -0,0 +1,47 @@
{
"name": "@esengine/ui-editor",
"version": "1.0.0",
"description": "Editor support for @esengine/ui - inspectors, gizmos, and entity templates",
"main": "dist/index.js",
"module": "dist/index.js",
"types": "dist/index.d.ts",
"type": "module",
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.js"
},
"./plugin.json": "./plugin.json"
},
"files": [
"dist",
"plugin.json"
],
"scripts": {
"build": "tsup",
"build:watch": "tsup --watch",
"type-check": "tsc --noEmit",
"clean": "rimraf dist"
},
"dependencies": {
"@esengine/ui": "workspace:*"
},
"devDependencies": {
"@esengine/ecs-framework": "workspace:*",
"@esengine/editor-core": "workspace:*",
"@esengine/build-config": "workspace:*",
"lucide-react": "^0.545.0",
"react": "^18.3.1",
"@types/react": "^18.3.12",
"rimraf": "^5.0.5",
"tsup": "^8.0.0",
"typescript": "^5.3.3"
},
"keywords": [
"ecs",
"ui",
"editor"
],
"author": "",
"license": "MIT"
}

64
packages/ui-editor/src/gizmos/UITransformGizmo.ts Normal file
View File

@@ -0,0 +1,64 @@
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 [];
}
// Use world coordinates (computed by UILayoutSystem) if available
// Otherwise fallback to local coordinates
// 使用世界坐标（由 UILayoutSystem 计算），如果可用
// 否则回退到本地坐标
const x = transform.worldX ?? transform.x;
const y = transform.worldY ?? transform.y;
// Use world scale for proper hierarchical transform inheritance
// 使用世界缩放以正确继承层级变换
const scaleX = transform.worldScaleX ?? transform.scaleX;
const scaleY = transform.worldScaleY ?? transform.scaleY;
const width = (transform.computedWidth ?? transform.width) * scaleX;
const height = (transform.computedHeight ?? transform.height) * scaleY;
// Use world rotation for proper hierarchical transform inheritance
// 使用世界旋转以正确继承层级变换
const rotation = transform.worldRotation ?? transform.rotation;
// 使用 transform 的 pivot 作为旋转/缩放中心
const pivotX = transform.pivotX;
const pivotY = transform.pivotY;
// 渲染位置 = 左下角 + pivot 偏移
const renderX = x + width * pivotX;
const renderY = y + height * pivotY;
// Use pivot position with transform's pivot values as origin
// 使用 transform 的 pivot 值作为 gizmo 的原点
const gizmo: IRectGizmoData = {
type: 'rect',
x: renderX,
y: renderY,
width,
height,
rotation,
originX: pivotX,
originY: 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
packages/ui-editor/src/gizmos/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './UITransformGizmo';

428
packages/ui-editor/src/index.ts Normal file
View File

@@ -0,0 +1,428 @@
/**
* @esengine/ui-editor
*
* Editor support for @esengine/ui - inspectors, gizmos, and entity templates
* UI 编辑器支持 - 检视器、Gizmo 和实体模板
*/
import type { ServiceContainer, Entity } from '@esengine/ecs-framework';
import { Core } from '@esengine/ecs-framework';
import type {
IEditorModuleLoader,
EntityCreationTemplate
} from '@esengine/editor-core';
import {
EntityStoreService,
MessageHub,
ComponentRegistry,
ComponentInspectorRegistry
} from '@esengine/editor-core';
// Runtime imports from @esengine/ui
import {
UITransformComponent,
UIRenderComponent,
UIInteractableComponent,
UITextComponent,
UILayoutComponent,
UILayoutType,
UIJustifyContent,
UIAlignItems,
UIButtonComponent,
UIProgressBarComponent,
UISliderComponent,
UIScrollViewComponent
} from '@esengine/ui';
import { UITransformInspector } from './inspectors';
import { registerUITransformGizmo, unregisterUITransformGizmo } from './gizmos';
// Re-exports
export { UITransformInspector } from './inspectors';
export { registerUITransformGizmo, unregisterUITransformGizmo } from './gizmos';
/**
* UI 编辑器模块
* UI Editor Module
*/
export class UIEditorModule implements IEditorModuleLoader {
async install(services: ServiceContainer): Promise<void> {
// 注册 UI 组件到编辑器组件注册表 | Register UI components to editor component registry
const componentRegistry = services.resolve(ComponentRegistry);
if (componentRegistry) {
const uiComponents = [
{ name: 'UITransform', type: UITransformComponent, category: 'components.category.ui', description: 'UI element positioning and sizing', icon: 'Move' },
{ name: 'UIRender', type: UIRenderComponent, category: 'components.category.ui', description: 'UI element visual appearance', icon: 'Palette' },
{ name: 'UIInteractable', type: UIInteractableComponent, category: 'components.category.ui', description: 'UI element interaction handling', icon: 'MousePointer2' },
{ name: 'UIText', type: UITextComponent, category: 'components.category.ui', description: 'Text rendering component', icon: 'Type' },
{ name: 'UILayout', type: UILayoutComponent, category: 'components.category.ui', description: 'Automatic child layout (Flexbox-like)', icon: 'LayoutGrid' },
{ name: 'UIButton', type: UIButtonComponent, category: 'components.category.ui.widgets', description: 'Interactive button component', icon: 'RectangleHorizontal' },
{ name: 'UIProgressBar', type: UIProgressBarComponent, category: 'components.category.ui.widgets', description: 'Progress indicator component', icon: 'BarChart3' },
{ name: 'UISlider', type: UISliderComponent, category: 'components.category.ui.widgets', description: 'Value slider component', icon: 'Sliders' },
{ name: 'UIScrollView', type: UIScrollViewComponent, category: 'components.category.ui.widgets', description: 'Scrollable container component', icon: 'ScrollText' },
];
for (const comp of uiComponents) {
componentRegistry.register({
name: comp.name,
type: comp.type,
category: comp.category,
description: comp.description,
icon: comp.icon
});
}
}
// 注册自定义组件检视器 | Register custom component inspectors
const componentInspectorRegistry = services.tryResolve(ComponentInspectorRegistry);
if (componentInspectorRegistry) {
componentInspectorRegistry.register(new UITransformInspector());
}
// 注册 Gizmo | Register gizmo
registerUITransformGizmo();
}
async uninstall(): Promise<void> {
unregisterUITransformGizmo();
}
getEntityCreationTemplates(): EntityCreationTemplate[] {
return [
// UI Canvas (Root container)
{
id: 'create-ui-canvas',
label: 'UI Canvas',
icon: 'PanelTop',
category: 'ui',
order: 200,
create: (): 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: 'Square',
category: 'ui',
order: 201,
create: (): 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: 'Type',
category: 'ui',
order: 202,
create: (): number => {
return this.createUIEntity('Text', (entity) => {
const transform = entity.getComponent(UITransformComponent)!;
transform.width = 200;
transform.height = 30;
const render = entity.getComponent(UIRenderComponent)!;
render.backgroundAlpha = 0;
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: 'MousePointer2',
category: 'ui',
order: 203,
create: (): 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);
const button = new UIButtonComponent();
button.label = 'Button';
entity.addComponent(button);
const interactable = entity.getComponent(UIInteractableComponent)!;
interactable.enabled = true;
interactable.cursor = 'pointer';
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: 'Sliders',
category: 'ui',
order: 204,
create: (): number => {
return this.createUIEntity('Slider', (entity) => {
const transform = entity.getComponent(UITransformComponent)!;
transform.width = 200;
transform.height = 20;
const render = entity.getComponent(UIRenderComponent);
if (render) {
entity.removeComponent(render);
}
const slider = new UISliderComponent();
slider.value = 50;
slider.minValue = 0;
slider.maxValue = 100;
entity.addComponent(slider);
const interactable = entity.getComponent(UIInteractableComponent)!;
interactable.enabled = true;
interactable.cursor = 'pointer';
});
}
},
// UI Progress Bar
{
id: 'create-ui-progressbar',
label: 'ProgressBar',
icon: 'BarChart3',
category: 'ui',
order: 205,
create: (): number => {
return this.createUIEntity('ProgressBar', (entity) => {
const transform = entity.getComponent(UITransformComponent)!;
transform.width = 200;
transform.height = 20;
const render = entity.getComponent(UIRenderComponent);
if (render) {
entity.removeComponent(render);
}
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: 'ScrollText',
category: 'ui',
order: 206,
create: (): 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);
const scrollView = new UIScrollViewComponent();
scrollView.verticalScroll = true;
scrollView.horizontalScroll = false;
scrollView.contentHeight = 800;
entity.addComponent(scrollView);
const interactable = entity.getComponent(UIInteractableComponent)!;
interactable.enabled = true;
});
}
},
// UI Layout Container (Horizontal)
{
id: 'create-ui-hlayout',
label: 'HLayout',
icon: 'LayoutGrid',
category: 'ui',
order: 207,
create: (): number => {
return this.createUIEntity('HLayout', (entity) => {
const transform = entity.getComponent(UITransformComponent)!;
transform.width = 400;
transform.height = 100;
const layout = new UILayoutComponent();
layout.type = UILayoutType.Horizontal;
layout.gap = 10;
layout.justifyContent = UIJustifyContent.Start;
layout.alignItems = UIAlignItems.Center;
entity.addComponent(layout);
const render = entity.getComponent(UIRenderComponent)!;
render.backgroundAlpha = 0;
});
}
},
// UI Layout Container (Vertical)
{
id: 'create-ui-vlayout',
label: 'VLayout',
icon: 'LayoutGrid',
category: 'ui',
order: 208,
create: (): number => {
return this.createUIEntity('VLayout', (entity) => {
const transform = entity.getComponent(UITransformComponent)!;
transform.width = 200;
transform.height = 400;
const layout = new UILayoutComponent();
layout.type = UILayoutType.Vertical;
layout.gap = 10;
layout.justifyContent = UIJustifyContent.Start;
layout.alignItems = UIAlignItems.Stretch;
entity.addComponent(layout);
const render = entity.getComponent(UIRenderComponent)!;
render.backgroundAlpha = 0;
});
}
},
// UI Grid Layout
{
id: 'create-ui-grid',
label: 'Grid',
icon: 'LayoutGrid',
category: 'ui',
order: 209,
create: (): number => {
return this.createUIEntity('Grid', (entity) => {
const transform = entity.getComponent(UITransformComponent)!;
transform.width = 400;
transform.height = 400;
const layout = new UILayoutComponent();
layout.type = UILayoutType.Grid;
layout.columns = 3;
layout.gap = 10;
entity.addComponent(layout);
const render = entity.getComponent(UIRenderComponent)!;
render.backgroundAlpha = 0;
});
}
},
];
}
/**
* 创建 UI 实体的辅助方法
* Helper method to create UI entity
*/
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');
}
const existingCount = entityStore.getAllEntities()
.filter((e: Entity) => e.name.startsWith(baseName)).length;
const entityName = existingCount > 0 ? `${baseName} ${existingCount + 1}` : baseName;
const entity = scene.createEntity(entityName);
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);
if (configure) {
configure(entity);
}
entityStore.addEntity(entity);
messageHub.publish('entity:added', { entity });
messageHub.publish('scene:modified', {});
entityStore.selectEntity(entity);
return entity.id;
}
}
export const uiEditorModule = new UIEditorModule();
// 从 @esengine/ui 导入运行时模块
import { UIRuntimeModule } from '@esengine/ui';
import type { IPlugin, PluginDescriptor } from '@esengine/editor-core';
const descriptor: PluginDescriptor = {
id: '@esengine/ui',
name: 'UI',
version: '1.0.0',
description: 'ECS-based UI system with editor support',
category: 'ui',
enabledByDefault: true
};
/**
* 完整的 UI 插件（运行时 + 编辑器）
* Complete UI Plugin (runtime + editor)
*/
export const UIPlugin: IPlugin = {
descriptor,
runtimeModule: new UIRuntimeModule(),
editorModule: uiEditorModule
};
export default uiEditorModule;

454
packages/ui-editor/src/inspectors/UITransformInspector.tsx Normal file
View File

@@ -0,0 +1,454 @@
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 | string) => {
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
packages/ui-editor/src/inspectors/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './UITransformInspector';

23
packages/ui-editor/tsconfig.build.json Normal file
View File

@@ -0,0 +1,23 @@
{
"compilerOptions": {
"target": "ES2020",
"module": "ES2020",
"moduleResolution": "bundler",
"lib": ["ES2020", "DOM"],
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"declaration": true,
"declarationMap": true,
"jsx": "react-jsx",
"resolveJsonModule": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true
},
"include": ["src/**/*"],
"exclude": ["node_modules", "dist"]
}

11
packages/ui-editor/tsconfig.json Normal file
View File

@@ -0,0 +1,11 @@
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "./dist",
"rootDir": "./src",
"declaration": true,
"jsx": "react-jsx"
},
"include": ["src/**/*"],
"exclude": ["node_modules", "dist"]
}

7
packages/ui-editor/tsup.config.ts Normal file
View File

@@ -0,0 +1,7 @@
import { defineConfig } from 'tsup';
import { editorOnlyPreset } from '../build-config/src/presets/plugin-tsup';
export default defineConfig({
...editorOnlyPreset(),
tsconfig: 'tsconfig.build.json'
});