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
184
packages/fairygui/src/layout/Relations.ts
Normal file
184
packages/fairygui/src/layout/Relations.ts
Normal file
@@ -0,0 +1,184 @@
|
||||
import { ERelationType } from '../core/FieldTypes';
|
||||
import type { GObject } from '../core/GObject';
|
||||
import type { GComponent } from '../core/GComponent';
|
||||
import type { ByteBuffer } from '../utils/ByteBuffer';
|
||||
import { RelationItem } from './RelationItem';
|
||||
|
||||
/**
|
||||
* Relations
|
||||
*
|
||||
* Manages constraint-based layout relationships between UI objects.
|
||||
*
|
||||
* 管理 UI 对象之间的约束布局关系
|
||||
*/
|
||||
export class Relations {
|
||||
/** Owner object | 所有者对象 */
|
||||
public readonly owner: GObject;
|
||||
|
||||
/** Size dirty flag | 尺寸脏标记 */
|
||||
public sizeDirty: boolean = false;
|
||||
|
||||
private _items: RelationItem[] = [];
|
||||
|
||||
constructor(owner: GObject) {
|
||||
this.owner = owner;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a relation
|
||||
* 添加关联
|
||||
*/
|
||||
public add(target: GObject, relationType: ERelationType, bUsePercent: boolean = false): void {
|
||||
let item: RelationItem | null = null;
|
||||
|
||||
for (const existing of this._items) {
|
||||
if (existing.target === target) {
|
||||
item = existing;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (!item) {
|
||||
item = new RelationItem(this.owner);
|
||||
item.target = target;
|
||||
this._items.push(item);
|
||||
}
|
||||
|
||||
item.add(relationType, bUsePercent);
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove a relation
|
||||
* 移除关联
|
||||
*/
|
||||
public remove(target: GObject, relationType: ERelationType = ERelationType.Size): void {
|
||||
for (let i = this._items.length - 1; i >= 0; i--) {
|
||||
const item = this._items[i];
|
||||
if (item.target === target) {
|
||||
item.remove(relationType);
|
||||
if (item.isEmpty()) {
|
||||
this._items.splice(i, 1);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if target has any relations
|
||||
* 检查目标是否有任何关联
|
||||
*/
|
||||
public contains(target: GObject): boolean {
|
||||
return this._items.some(item => item.target === target);
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear relations with a target
|
||||
* 清除与目标的所有关联
|
||||
*/
|
||||
public clearFor(target: GObject): void {
|
||||
for (let i = this._items.length - 1; i >= 0; i--) {
|
||||
if (this._items[i].target === target) {
|
||||
this._items.splice(i, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear all relations
|
||||
* 清除所有关联
|
||||
*/
|
||||
public clearAll(): void {
|
||||
for (const item of this._items) {
|
||||
item.dispose();
|
||||
}
|
||||
this._items.length = 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Copy relations from another object
|
||||
* 从另一个对象复制关联
|
||||
*/
|
||||
public copyFrom(source: Relations): void {
|
||||
this.clearAll();
|
||||
for (const item of source._items) {
|
||||
const newItem = new RelationItem(this.owner);
|
||||
newItem.copyFrom(item);
|
||||
this._items.push(newItem);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Called when owner size changed
|
||||
* 当所有者尺寸改变时调用
|
||||
*/
|
||||
public onOwnerSizeChanged(dWidth: number, dHeight: number, bApplyPivot: boolean): void {
|
||||
for (const item of this._items) {
|
||||
item.applyOnSelfResized(dWidth, dHeight, bApplyPivot);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Ensure relations size is correct
|
||||
* 确保关联尺寸正确
|
||||
*/
|
||||
public ensureRelationsSizeCorrect(): void {
|
||||
if (!this.sizeDirty) return;
|
||||
|
||||
this.sizeDirty = false;
|
||||
|
||||
for (const item of this._items) {
|
||||
item.target?.ensureSizeCorrect();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get items count
|
||||
* 获取项目数量
|
||||
*/
|
||||
public get count(): number {
|
||||
return this._items.length;
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup relations from buffer
|
||||
* 从缓冲区设置关联
|
||||
*/
|
||||
public setup(buffer: ByteBuffer, bParentToChild: boolean): void {
|
||||
const cnt = buffer.readByte();
|
||||
|
||||
for (let i = 0; i < cnt; i++) {
|
||||
const targetIndex = buffer.getInt16();
|
||||
let target: GObject | null = null;
|
||||
|
||||
if (targetIndex === -1) {
|
||||
target = this.owner.parent;
|
||||
} else if (bParentToChild) {
|
||||
target = (this.owner as GComponent).getChildAt(targetIndex);
|
||||
} else if (this.owner.parent) {
|
||||
target = this.owner.parent.getChildAt(targetIndex);
|
||||
}
|
||||
|
||||
if (!target) continue;
|
||||
|
||||
const newItem = new RelationItem(this.owner);
|
||||
newItem.target = target;
|
||||
this._items.push(newItem);
|
||||
|
||||
const cnt2 = buffer.readByte();
|
||||
for (let j = 0; j < cnt2; j++) {
|
||||
const rt = buffer.readByte() as ERelationType;
|
||||
const bUsePercent = buffer.readBool();
|
||||
newItem.internalAdd(rt, bUsePercent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Dispose
|
||||
* 销毁
|
||||
*/
|
||||
public dispose(): void {
|
||||
this.clearAll();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user