Files
esengine/packages/fairygui/src/render/IRenderCollector.ts
YHH a1e1189f9d feat(fairygui): FairyGUI 完整集成 (#314)
* feat(fairygui): FairyGUI ECS 集成核心架构

实现 FairyGUI 的 ECS 原生集成,完全替代旧 UI 系统:

核心类:
- GObject: UI 对象基类,支持变换、可见性、关联、齿轮
- GComponent: 容器组件,管理子对象和控制器
- GRoot: 根容器,管理焦点、弹窗、输入分发
- GGroup: 组容器,支持水平/垂直布局

抽象层:
- DisplayObject: 显示对象基类
- EventDispatcher: 事件分发
- Timer: 计时器
- Stage: 舞台,管理输入和缩放

布局系统:
- Relations: 约束关联管理
- RelationItem: 24 种关联类型

基础设施:
- Controller: 状态控制器
- Transition: 过渡动画
- ScrollPane: 滚动面板
- UIPackage: 包管理
- ByteBuffer: 二进制解析

* refactor(ui): 删除旧 UI 系统,使用 FairyGUI 替代

* feat(fairygui): 实现 UI 控件

- 添加显示类:Image、TextField、Graph
- 添加基础控件:GImage、GTextField、GGraph
- 添加交互控件:GButton、GProgressBar、GSlider
- 更新 IRenderCollector 支持 Graph 渲染
- 扩展 Controller 添加 selectedPageId
- 添加 STATE_CHANGED 事件类型

* feat(fairygui): 现代化架构重构

- 增强 EventDispatcher 支持类型安全、优先级和传播控制
- 添加 PropertyBinding 响应式属性绑定系统
- 添加 ServiceContainer 依赖注入容器
- 添加 UIConfig 全局配置系统
- 添加 UIObjectFactory 对象工厂
- 实现 RenderBridge 渲染桥接层
- 实现 Canvas2DBackend 作为默认渲染后端
- 扩展 IRenderCollector 支持更多图元类型

* feat(fairygui): 九宫格渲染和资源加载修复

- 修复 FGUIUpdateSystem 支持路径和 GUID 两种加载方式
- 修复 GTextInput 同时设置 _displayObject 和 _textField
- 实现九宫格渲染展开为 9 个子图元
- 添加 sourceWidth/sourceHeight 用于九宫格计算
- 添加 DOMTextRenderer 文本渲染层(临时方案)

* fix(fairygui): 修复 GGraph 颜色读取

* feat(fairygui): 虚拟节点 Inspector 和文本渲染支持

* fix(fairygui): 编辑器状态刷新和遗留引用修复

- 修复切换 FGUI 包后组件列表未刷新问题
- 修复切换组件后 viewport 未清理旧内容问题
- 修复虚拟节点在包加载后未刷新问题
- 重构为事件驱动架构,移除轮询机制
- 修复 @esengine/ui 遗留引用,统一使用 @esengine/fairygui

* fix: 移除 tsconfig 中的 @esengine/ui 引用
2025-12-22 10:52:54 +08:00

288 lines
6.2 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.
import type { IRectangle } from '../utils/MathTypes';
import type { EGraphType, EAlignType, EVertAlignType } from '../core/FieldTypes';
/**
* Render primitive type
* 渲染图元类型
*/
export const enum ERenderPrimitiveType {
Rect = 'rect',
Image = 'image',
Text = 'text',
Mesh = 'mesh',
Graph = 'graph',
Ellipse = 'ellipse',
Polygon = 'polygon'
}
/**
* Blend mode
* 混合模式
*/
export const enum EBlendModeType {
Normal = 'normal',
Add = 'add',
Multiply = 'multiply',
Screen = 'screen'
}
/**
* Transform matrix (2D affine)
* 变换矩阵2D 仿射)
*/
export interface ITransformMatrix {
a: number;
b: number;
c: number;
d: number;
tx: number;
ty: number;
}
/**
* Text alignment
* 文本对齐
*/
export const enum ETextAlign {
Left = 'left',
Center = 'center',
Right = 'right'
}
/**
* Text vertical alignment
* 文本垂直对齐
*/
export const enum ETextVAlign {
Top = 'top',
Middle = 'middle',
Bottom = 'bottom'
}
/**
* Render primitive data
* 渲染图元数据
*/
export interface IRenderPrimitive {
/** Primitive type | 图元类型 */
type: ERenderPrimitiveType;
/** Sort order (higher = on top) | 排序顺序(越大越上层) */
sortOrder: number;
/** World matrix (6 elements: a, b, c, d, tx, ty) | 世界矩阵 */
worldMatrix: Float32Array;
/** X position | X 坐标 */
x?: number;
/** Y position | Y 坐标 */
y?: number;
/** Width | 宽度 */
width: number;
/** Height | 高度 */
height: number;
/** Alpha | 透明度 */
alpha: number;
/** Is grayed | 是否灰度 */
grayed: boolean;
/** Transform matrix | 变换矩阵 */
transform?: ITransformMatrix;
/** Blend mode | 混合模式 */
blendMode?: EBlendModeType;
/** Clip rect (in stage coordinates) | 裁剪矩形(舞台坐标) */
clipRect?: IRectangle;
/** Source rectangle (for image) | 源矩形(用于图像) */
srcRect?: IRectangle;
// Image properties | 图像属性
/** Texture ID or key | 纹理 ID 或键 */
textureId?: string | number;
/** UV rect [u, v, uWidth, vHeight] | UV 矩形 */
uvRect?: [number, number, number, number];
/** Tint color (RGBA packed) | 着色颜色 */
color?: number;
/** Nine-patch grid | 九宫格 */
scale9Grid?: IRectangle;
/** Source width for nine-slice (original texture region width) | 九宫格源宽度(原始纹理区域宽度) */
sourceWidth?: number;
/** Source height for nine-slice (original texture region height) | 九宫格源高度(原始纹理区域高度) */
sourceHeight?: number;
/** Tile mode | 平铺模式 */
tileMode?: boolean;
// Text properties | 文本属性
/** Text content | 文本内容 */
text?: string;
/** Font family | 字体 */
font?: string;
/** Font size | 字体大小 */
fontSize?: number;
/** Text color | 文本颜色 */
textColor?: number;
/** Bold | 粗体 */
bold?: boolean;
/** Italic | 斜体 */
italic?: boolean;
/** Underline | 下划线 */
underline?: boolean;
/** Text align | 文本对齐 */
align?: ETextAlign | EAlignType;
/** Text horizontal align (alias) | 文本水平对齐(别名) */
textAlign?: ETextAlign | string;
/** Text vertical align | 文本垂直对齐 */
valign?: ETextVAlign | EVertAlignType;
/** Text vertical align (alias) | 文本垂直对齐(别名) */
textVAlign?: ETextVAlign | string;
/** Leading (line spacing) | 行间距 */
leading?: number;
/** Letter spacing | 字间距 */
letterSpacing?: number;
/** Outline color | 描边颜色 */
outlineColor?: number;
/** Outline width | 描边宽度 */
outlineWidth?: number;
/** Shadow color | 阴影颜色 */
shadowColor?: number;
/** Shadow offset | 阴影偏移 */
shadowOffset?: [number, number];
// Rect properties | 矩形属性
/** Fill color | 填充颜色 */
fillColor?: number;
/** Stroke color | 边框颜色 */
strokeColor?: number;
/** Stroke width | 边框宽度 */
strokeWidth?: number;
/** Corner radius | 圆角半径 */
cornerRadius?: number | number[];
/** Single line | 单行 */
singleLine?: boolean;
/** Word wrap | 自动换行 */
wordWrap?: boolean;
/** Stroke | 描边宽度 */
stroke?: number;
// Graph properties | 图形属性
/** Graph type | 图形类型 */
graphType?: EGraphType;
/** Line size | 线宽 */
lineSize?: number;
/** Line color | 线颜色 */
lineColor?: number;
/** Polygon points | 多边形顶点 */
polygonPoints?: number[];
/** Points array (alias for polygonPoints) | 点数组polygonPoints 别名) */
points?: number[];
/** Line width | 线宽 */
lineWidth?: number;
/** Sides for regular polygon | 正多边形边数 */
sides?: number;
/** Start angle for regular polygon | 正多边形起始角度 */
startAngle?: number;
/** Distance multipliers for regular polygon | 正多边形距离乘数 */
distances?: number[];
// Mesh properties | 网格属性
/** Vertices [x, y, ...] | 顶点 */
vertices?: Float32Array;
/** UVs [u, v, ...] | UV 坐标 */
uvs?: Float32Array;
/** Indices | 索引 */
indices?: Uint16Array;
}
/**
* Render collector interface
* 渲染收集器接口
*/
export interface IRenderCollector {
/**
* Add a render primitive
* 添加渲染图元
*/
addPrimitive(primitive: IRenderPrimitive): void;
/**
* Push a clip rect
* 压入裁剪矩形
*/
pushClipRect(rect: IRectangle): void;
/**
* Pop the current clip rect
* 弹出当前裁剪矩形
*/
popClipRect(): void;
/**
* Get current clip rect
* 获取当前裁剪矩形
*/
getCurrentClipRect(): IRectangle | null;
/**
* Clear all primitives
* 清除所有图元
*/
clear(): void;
/**
* Get all primitives (sorted by sortOrder)
* 获取所有图元(按 sortOrder 排序)
*/
getPrimitives(): readonly IRenderPrimitive[];
}