Files
esengine/packages/math/tests/Vector2.test.ts
YHH 536c4c5593 refactor(ui): UI 系统架构重构 (#309)
* feat(ui): 动态图集系统与渲染调试增强

## 核心功能

### 动态图集系统 (Dynamic Atlas)
- 新增 DynamicAtlasManager:运行时纹理打包,支持 MaxRects 算法
- 新增 DynamicAtlasService:自动纹理加载与图集管理
- 新增 BinPacker:高效矩形打包算法
- 支持动态/固定两种扩展策略
- 自动 UV 重映射,实现 UI 元素合批渲染

### Frame Debugger 增强
- 新增合批分析面板,显示批次中断原因
- 新增 UI 元素层级信息(depth, worldOrderInLayer)
- 新增实体高亮功能,点击可在场景中定位
- 新增动态图集可视化面板
- 改进渲染原语详情展示

### 闪光效果 (Shiny Effect)
- 新增 UIShinyEffectComponent:UI 闪光参数配置
- 新增 UIShinyEffectSystem:材质覆盖驱动的闪光动画
- 新增 ShinyEffectComponent/System(Sprite 版本)

## 引擎层改进

### Rust 纹理管理扩展
- create_blank_texture:创建空白 GPU 纹理
- update_texture_region:局部纹理更新
- 支持动态图集的 GPU 端操作

### 材质系统
- 新增 effects/ 目录:ShinyEffect 等效果实现
- 新增 interfaces/ 目录:IMaterial 等接口定义
- 新增 mixins/ 目录:可组合的材质功能

### EngineBridge 扩展
- 新增 createBlankTexture/updateTextureRegion 方法
- 改进纹理加载回调机制

## UI 渲染改进
- UIRenderCollector:支持合批调试信息
- 稳定排序:addIndex 保证渲染顺序一致性
- 九宫格渲染优化
- 材质覆盖支持

## 其他改进
- 国际化:新增 Frame Debugger 相关翻译
- 编辑器:新增渲染调试入口
- 文档:新增架构设计文档目录

* refactor(ui): 引入新基础组件架构与渲染工具函数

Phase 1 重构 - 组件职责分离与代码复用:

新增基础组件层:
- UIGraphicComponent: 所有可视 UI 元素的基类(颜色、透明度、raycast)
- UIImageComponent: 纹理显示组件(支持简单、切片、平铺、填充模式)
- UISelectableComponent: 可交互元素的基类(状态管理、颜色过渡)

新增渲染工具:
- UIRenderUtils: 提取共享的坐标计算、边框渲染、阴影渲染等工具函数
- getUIRenderTransform: 统一的变换数据提取
- renderBorder/renderShadow: 复用的边框和阴影渲染逻辑

新增渲染系统:
- UIGraphicRenderSystem: 处理新基础组件的统一渲染器

重构现有系统:
- UIRectRenderSystem: 使用新工具函数,移除重复代码
- UIButtonRenderSystem: 使用新工具函数,移除重复代码

这些改动为后续统一渲染系统奠定基础。

* refactor(ui): UIProgressBarRenderSystem 使用渲染工具函数

- 使用 getUIRenderTransform 替代手动变换计算
- 使用 renderBorder 工具函数替代重复的边框渲染
- 使用 lerpColor 工具函数替代重复的颜色插值
- 简化方法签名,使用 UIRenderTransform 类型
- 移除约 135 行重复代码

* refactor(ui): Slider 和 ScrollView 渲染系统使用工具函数

- UISliderRenderSystem: 使用 getUIRenderTransform,简化方法签名
- UIScrollViewRenderSystem: 使用 getUIRenderTransform,简化方法签名
- 统一使用 UIRenderTransform 类型减少参数传递
- 消除重复的变换计算代码

* refactor(ui): 使用 UIWidgetMarker 消除硬编码组件依赖

- 新增 UIWidgetMarker 标记组件
- UIRectRenderSystem 改为检查标记而非硬编码4种组件类型
- 各 Widget 渲染系统自动添加标记组件
- 减少模块间耦合,提高可扩展性

* feat(ui): 实现 Canvas 隔离机制

- 新增 UICanvasComponent 定义 Canvas 渲染组
- UITransformComponent 添加 Canvas 相关字段:canvasEntityId, worldSortingLayer, pixelPerfect
- UILayoutSystem 传播 Canvas 设置给子元素
- UIRenderUtils 使用 Canvas 继承的排序层
- 支持嵌套 Canvas 和不同渲染模式

* refactor(ui): 统一纹理管理工具函数

Phase 4: 纹理管理统一

新增:
- UITextureUtils.ts: 统一的纹理描述符接口和验证函数
  - UITextureDescriptor: 支持 GUID/textureId/path 多种纹理源
  - isValidTextureGuid: GUID 验证
  - getTextureKey: 获取用于合批的纹理键
  - normalizeTextureDescriptor: 规范化各种输入格式
- utils/index.ts: 工具函数导出

修改:
- UIGraphicRenderSystem: 使用新的纹理工具函数
- index.ts: 导出纹理工具类型和函数

* refactor(ui): 实现统一的脏标记机制

Phase 5: Dirty 标记机制

新增:
- UIDirtyFlags.ts: 位标记枚举和追踪工具
  - UIDirtyFlags: Visual/Layout/Transform/Material/Text 标记
  - IDirtyTrackable: 脏追踪接口
  - DirtyTracker: 辅助工具类
  - 帧级别脏状态追踪 (markFrameDirty, isFrameDirty)

修改:
- UIGraphicComponent: 实现 IDirtyTrackable
  - 属性 setter 自动设置脏标记
  - 保留 setDirty/clearDirty 向后兼容
- UIImageComponent: 所有属性支持脏追踪
  - textureGuid/imageType/fillAmount 等变化自动标记
- UIGraphicRenderSystem: 使用 clearDirtyFlags()

导出:
- UIDirtyFlags, IDirtyTrackable, DirtyTracker
- markFrameDirty, isFrameDirty, clearFrameDirty

* refactor(ui): 移除过时的 dirty flag API

移除 UIGraphicComponent 中的兼容性 API:
- 移除 _isDirty getter/setter
- 移除 setDirty() 方法
- 移除 clearDirty() 方法

现在统一使用新的 dirty flag 系统:
- isDirty() / hasDirtyFlag(flags)
- markDirty(flags) / clearDirtyFlags()

* fix(ui): 修复两个 TODO 功能

1. 滑块手柄命中测试 (UIInputSystem)
   - UISliderComponent 添加 getHandleBounds() 计算手柄边界
   - UISliderComponent 添加 isPointInHandle() 精确命中测试
   - UIInputSystem.handleSlider() 使用精确测试更新悬停状态

2. 径向填充渲染 (UIGraphicRenderSystem)
   - 实现 renderRadialFill() 方法
   - 支持 radial90/radial180/radial360 三种模式
   - 支持 fillOrigin (top/right/bottom/left) 和 fillClockwise
   - 使用多段矩形近似饼形填充效果

* feat(ui): 完善 UI 系统架构和九宫格渲染

* fix(ui): 修复文本渲染层级问题并清理调试代码

- 修复纹理就绪后调用 invalidateUIRenderCaches() 导致的无限循环
- 移除 UITextRenderSystem、UIButtonRenderSystem、UIRectRenderSystem 中的首帧调试输出
- 移除 UILayoutSystem 中的布局调试日志
- 清理所有 __UI_RENDER_DEBUG__ 条件日志

* refactor(ui): 优化渲染批处理和输入框组件

渲染系统:
- 修复 RenderBatcher 保持渲染顺序
- 优化 Rust SpriteBatch 避免合并非连续精灵
- 增强 EngineRenderSystem 纹理就绪检测

输入框组件:
- 增强 UIInputFieldComponent 功能
- 改进 UIInputSystem 输入处理
- 新增 TextMeasureService 文本测量服务

* fix(ui): 修复九宫格首帧渲染和InputField输入问题

- 修复九宫格首帧 size=0x0 问题:
  - Viewport.tsx: 预览模式读取图片尺寸存储到 importSettings
  - AssetDatabase: ISpriteSettings 添加 width/height 字段
  - AssetMetadataService: getTextureSpriteInfo 使用元数据尺寸作为后备
  - UIRectRenderSystem: 当 atlasEntry 不存在时使用 spriteInfo 尺寸
  - WebBuildPipeline: 构建时包含 importSettings
  - AssetManager: 从 catalog 初始化时复制 importSettings
  - AssetTypes: IAssetCatalogEntry 添加 importSettings 字段

- 修复 InputField 无法输入问题:
  - UIRuntimeModule: manifest 添加 pluginExport: 'UIPlugin'
  - 确保预览模式正确加载 UI 插件并绑定 UIInputSystem

- 添加调试日志用于排查纹理加载问题

* fix(sprite): 修复类型导出错误

MaterialPropertyOverride 和 MaterialOverrides 应从 @esengine/material-system 导出

* fix(ui-editor): 补充 AnchorPreset 拉伸预设的映射

添加 StretchTop, StretchMiddle, StretchBottom, StretchLeft, StretchCenter, StretchRight 的位置和锚点值映射
2025-12-19 15:33:36 +08:00

263 lines
7.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 { Vector2 } from '../src/Vector2';
declare global {
var expectFloatsEqual: (actual: number, expected: number, epsilon?: number) => void;
}
describe('Vector2', () => {
describe('构造函数和基础属性', () => {
test('默认构造函数应创建零向量', () => {
const v = new Vector2();
expect(v.x).toBe(0);
expect(v.y).toBe(0);
});
test('应正确设置x和y值', () => {
const v = new Vector2(3, 4);
expect(v.x).toBe(3);
expect(v.y).toBe(4);
});
test('length属性应正确计算', () => {
const v = new Vector2(3, 4);
expect(v.length).toBe(5);
});
test('lengthSquared属性应正确计算', () => {
const v = new Vector2(3, 4);
expect(v.lengthSquared).toBe(25);
});
test('angle属性应正确计算', () => {
const v = new Vector2(1, 0);
expect(v.angle).toBe(0);
const v2 = new Vector2(0, 1);
expectFloatsEqual(v2.angle, Math.PI / 2);
});
});
describe('基础运算', () => {
test('set方法应正确设置值', () => {
const v = new Vector2();
v.set(5, 6);
expect(v.x).toBe(5);
expect(v.y).toBe(6);
});
test('copy方法应正确复制值', () => {
const v1 = new Vector2(1, 2);
const v2 = new Vector2(3, 4);
v2.copy(v1);
expect(v2.x).toBe(1);
expect(v2.y).toBe(2);
});
test('clone方法应创建相同的新实例', () => {
const v1 = new Vector2(1, 2);
const v2 = v1.clone();
expect(v2.x).toBe(1);
expect(v2.y).toBe(2);
expect(v2).not.toBe(v1);
});
test('add方法应正确相加', () => {
const v1 = new Vector2(1, 2);
const v2 = new Vector2(3, 4);
v1.add(v2);
expect(v1.x).toBe(4);
expect(v1.y).toBe(6);
});
test('subtract方法应正确相减', () => {
const v1 = new Vector2(5, 7);
const v2 = new Vector2(2, 3);
v1.subtract(v2);
expect(v1.x).toBe(3);
expect(v1.y).toBe(4);
});
test('multiply方法应正确数乘', () => {
const v = new Vector2(2, 3);
v.multiply(4);
expect(v.x).toBe(8);
expect(v.y).toBe(12);
});
test('divide方法应正确数除', () => {
const v = new Vector2(8, 12);
v.divide(4);
expect(v.x).toBe(2);
expect(v.y).toBe(3);
});
test('divide方法应在除以零时抛出错误', () => {
const v = new Vector2(1, 2);
expect(() => v.divide(0)).toThrow('不能除以零');
});
});
describe('向量运算', () => {
test('dot方法应正确计算点积', () => {
const v1 = new Vector2(1, 2);
const v2 = new Vector2(3, 4);
expect(v1.dot(v2)).toBe(11); // 1*3 + 2*4 = 11
});
test('cross方法应正确计算叉积', () => {
const v1 = new Vector2(1, 0);
const v2 = new Vector2(0, 1);
expect(v1.cross(v2)).toBe(1);
});
test('normalize方法应正确归一化向量', () => {
const v = new Vector2(3, 4);
v.normalize();
expectFloatsEqual(v.length, 1);
expectFloatsEqual(v.x, 0.6);
expectFloatsEqual(v.y, 0.8);
});
test('零向量归一化应保持不变', () => {
const v = new Vector2(0, 0);
v.normalize();
expect(v.x).toBe(0);
expect(v.y).toBe(0);
});
});
describe('几何运算', () => {
test('distanceTo方法应正确计算距离', () => {
const v1 = new Vector2(0, 0);
const v2 = new Vector2(3, 4);
expect(v1.distanceTo(v2)).toBe(5);
});
test('angleTo方法应正确计算夹角', () => {
const v1 = new Vector2(1, 0);
const v2 = new Vector2(0, 1);
expectFloatsEqual(v1.angleTo(v2), Math.PI / 2);
});
test('projectOnto方法应正确投影', () => {
const v1 = new Vector2(2, 2);
const v2 = new Vector2(1, 0);
const projected = v1.projectOnto(v2);
expect(projected.x).toBe(2);
expect(projected.y).toBe(0);
});
});
describe('变换操作', () => {
test('rotate方法应正确旋转向量顺时针', () => {
// Clockwise rotation: (1, 0) rotated 90° clockwise = (0, -1)
// 顺时针旋转:(1, 0) 顺时针旋转 90° = (0, -1)
const v = new Vector2(1, 0);
v.rotate(Math.PI / 2);
expectFloatsEqual(v.x, 0, 1e-10);
expectFloatsEqual(v.y, -1, 1e-10);
});
test('reflect方法应正确反射向量', () => {
const v = new Vector2(1, 1);
const normal = new Vector2(0, 1);
v.reflect(normal);
expectFloatsEqual(v.x, 1);
expectFloatsEqual(v.y, -1);
});
});
describe('插值和限制', () => {
test('lerp方法应正确插值', () => {
const v1 = new Vector2(0, 0);
const v2 = new Vector2(10, 10);
v1.lerp(v2, 0.5);
expect(v1.x).toBe(5);
expect(v1.y).toBe(5);
});
test('clampLength方法应正确限制长度', () => {
const v = new Vector2(6, 8); // 长度为10
v.clampLength(5);
expectFloatsEqual(v.length, 5);
});
});
describe('比较操作', () => {
test('equals方法应正确比较向量', () => {
const v1 = new Vector2(1, 2);
const v2 = new Vector2(1, 2);
const v3 = new Vector2(1.0001, 2);
expect(v1.equals(v2)).toBe(true);
expect(v1.equals(v3, 0.001)).toBe(true);
expect(v1.equals(v3, 0.00001)).toBe(false);
});
test('exactEquals方法应检查完全相等', () => {
const v1 = new Vector2(1, 2);
const v2 = new Vector2(1, 2);
const v3 = new Vector2(1.0001, 2);
expect(v1.exactEquals(v2)).toBe(true);
expect(v1.exactEquals(v3)).toBe(false);
});
});
describe('静态方法', () => {
test('Vector2.add应创建新的相加结果', () => {
const v1 = new Vector2(1, 2);
const v2 = new Vector2(3, 4);
const result = Vector2.add(v1, v2);
expect(result.x).toBe(4);
expect(result.y).toBe(6);
expect(v1.x).toBe(1); // 原向量不变
expect(v1.y).toBe(2);
});
test('Vector2.fromAngle应从角度创建单位向量', () => {
const v = Vector2.fromAngle(Math.PI / 2);
expectFloatsEqual(v.x, 0, 1e-10);
expectFloatsEqual(v.y, 1, 1e-10);
});
test('Vector2.fromPolar应从极坐标创建向量', () => {
const v = Vector2.fromPolar(5, 0);
expect(v.x).toBe(5);
expectFloatsEqual(v.y, 0, 1e-10);
});
});
describe('静态常量', () => {
test('静态常量应具有正确的值', () => {
expect(Vector2.ZERO.x).toBe(0);
expect(Vector2.ZERO.y).toBe(0);
expect(Vector2.ONE.x).toBe(1);
expect(Vector2.ONE.y).toBe(1);
expect(Vector2.RIGHT.x).toBe(1);
expect(Vector2.RIGHT.y).toBe(0);
});
});
describe('字符串转换', () => {
test('toString应返回正确格式', () => {
const v = new Vector2(1.2345, 2.6789);
const str = v.toString();
expect(str).toContain('1.234');
expect(str).toContain('2.679');
});
test('toArray应返回数组', () => {
const v = new Vector2(1, 2);
const arr = v.toArray();
expect(arr).toEqual([1, 2]);
});
test('toObject应返回对象', () => {
const v = new Vector2(1, 2);
const obj = v.toObject();
expect(obj).toEqual({ x: 1, y: 2 });
});
});
});