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 引用
This commit is contained in:
YHH
GitHub
287
packages/fairygui/src/render/IRenderCollector.ts
Normal file
287
packages/fairygui/src/render/IRenderCollector.ts
Normal file
@@ -0,0 +1,287 @@
|
||||
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[];
|
||||
}
|
||||
Reference in New Issue
Block a user