* 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 引用
236 lines
5.3 KiB
TypeScript
236 lines
5.3 KiB
TypeScript
import { GTextField } from './GTextField';
|
|
import { InputTextField } from '../display/InputTextField';
|
|
import { FGUIEvents } from '../events/Events';
|
|
import type { ByteBuffer } from '../utils/ByteBuffer';
|
|
|
|
/**
|
|
* Keyboard type constants
|
|
* 键盘类型常量
|
|
*/
|
|
export const enum EKeyboardType {
|
|
Default = 'text',
|
|
Number = 'number',
|
|
Url = 'url',
|
|
Email = 'email',
|
|
Tel = 'tel',
|
|
Password = 'password'
|
|
}
|
|
|
|
/**
|
|
* GTextInput
|
|
*
|
|
* Editable text input component.
|
|
*
|
|
* 可编辑的文本输入组件
|
|
*
|
|
* Features:
|
|
* - Text input with IME support
|
|
* - Password mode
|
|
* - Character restriction
|
|
* - Max length
|
|
* - Placeholder text
|
|
*/
|
|
export class GTextInput extends GTextField {
|
|
protected declare _displayObject: InputTextField;
|
|
|
|
constructor() {
|
|
super();
|
|
}
|
|
|
|
protected createDisplayObject(): void {
|
|
const inputField = new InputTextField();
|
|
// Set both _displayObject and _textField since parent class uses _textField for color etc.
|
|
this._displayObject = inputField;
|
|
this._textField = inputField;
|
|
this._displayObject.gOwner = this;
|
|
|
|
// Forward events
|
|
inputField.on('input', () => {
|
|
this.emit(FGUIEvents.TEXT_CHANGED);
|
|
});
|
|
inputField.on('submit', () => {
|
|
this.emit(FGUIEvents.TEXT_SUBMIT);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Get native input element
|
|
* 获取原生输入元素
|
|
*/
|
|
public get nativeInput(): InputTextField {
|
|
return this._displayObject;
|
|
}
|
|
|
|
/**
|
|
* Get/set password mode
|
|
* 获取/设置密码模式
|
|
*/
|
|
public get password(): boolean {
|
|
return this._displayObject.password;
|
|
}
|
|
|
|
public set password(value: boolean) {
|
|
if (this._displayObject) {
|
|
this._displayObject.password = value;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Get/set keyboard type
|
|
* 获取/设置键盘类型
|
|
*/
|
|
public get keyboardType(): string {
|
|
return this._displayObject.keyboardType;
|
|
}
|
|
|
|
public set keyboardType(value: string) {
|
|
if (this._displayObject) {
|
|
this._displayObject.keyboardType = value;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Get/set editable state
|
|
* 获取/设置可编辑状态
|
|
*/
|
|
public get editable(): boolean {
|
|
return this._displayObject.editable;
|
|
}
|
|
|
|
public set editable(value: boolean) {
|
|
if (this._displayObject) {
|
|
this._displayObject.editable = value;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Get/set max length
|
|
* 获取/设置最大长度
|
|
*/
|
|
public get maxLength(): number {
|
|
return this._displayObject.maxLength;
|
|
}
|
|
|
|
public set maxLength(value: number) {
|
|
if (this._displayObject) {
|
|
this._displayObject.maxLength = value;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Get/set placeholder text
|
|
* 获取/设置占位符文本
|
|
*/
|
|
public get promptText(): string {
|
|
return this._displayObject.promptText;
|
|
}
|
|
|
|
public set promptText(value: string) {
|
|
if (this._displayObject) {
|
|
this._displayObject.promptText = value;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Get/set placeholder color
|
|
* 获取/设置占位符颜色
|
|
*/
|
|
public get promptColor(): string {
|
|
return this._displayObject.promptColor;
|
|
}
|
|
|
|
public set promptColor(value: string) {
|
|
if (this._displayObject) {
|
|
this._displayObject.promptColor = value;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Get/set character restriction pattern
|
|
* 获取/设置字符限制模式
|
|
*/
|
|
public get restrict(): string {
|
|
return this._displayObject.restrict;
|
|
}
|
|
|
|
public set restrict(value: string) {
|
|
if (this._displayObject) {
|
|
this._displayObject.restrict = value;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Get/set single line mode
|
|
* 获取/设置单行模式
|
|
*/
|
|
public get singleLine(): boolean {
|
|
return this._singleLine;
|
|
}
|
|
|
|
public set singleLine(value: boolean) {
|
|
this._singleLine = value;
|
|
if (this._displayObject) {
|
|
this._displayObject.multiline = !value;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Request focus
|
|
* 请求焦点
|
|
*/
|
|
public requestFocus(): void {
|
|
this._displayObject.focus();
|
|
super.requestFocus();
|
|
}
|
|
|
|
/**
|
|
* Clear focus
|
|
* 清除焦点
|
|
*/
|
|
public clearFocus(): void {
|
|
this._displayObject.blur();
|
|
}
|
|
|
|
/**
|
|
* Select all text
|
|
* 选择所有文本
|
|
*/
|
|
public selectAll(): void {
|
|
this._displayObject.selectAll();
|
|
}
|
|
|
|
public setup_beforeAdd(buffer: ByteBuffer, beginPos: number): void {
|
|
super.setup_beforeAdd(buffer, beginPos);
|
|
|
|
buffer.seek(beginPos, 4);
|
|
|
|
let str = buffer.readS();
|
|
if (str) {
|
|
this.promptText = str;
|
|
}
|
|
|
|
str = buffer.readS();
|
|
if (str) {
|
|
this.restrict = str;
|
|
}
|
|
|
|
const iv = buffer.getInt32();
|
|
if (iv !== 0) {
|
|
this.maxLength = iv;
|
|
}
|
|
|
|
const keyboardTypeValue = buffer.getInt32();
|
|
if (keyboardTypeValue !== 0) {
|
|
if (keyboardTypeValue === 4) {
|
|
this.keyboardType = EKeyboardType.Number;
|
|
} else if (keyboardTypeValue === 3) {
|
|
this.keyboardType = EKeyboardType.Url;
|
|
}
|
|
}
|
|
|
|
if (buffer.readBool()) {
|
|
this.password = true;
|
|
}
|
|
}
|
|
}
|