345 lines
7.8 KiB
TypeScript
345 lines
7.8 KiB
TypeScript
import { Component, ECSComponent, Property, Serializable, Serialize } from '@esengine/esengine';
|
||
|
||
/**
|
||
* 文本对齐方式
|
||
* Text alignment options
|
||
*/
|
||
export type UITextAlign = 'left' | 'center' | 'right';
|
||
|
||
/**
|
||
* 文本垂直对齐方式
|
||
* Text vertical alignment options
|
||
*/
|
||
export type UITextVerticalAlign = 'top' | 'middle' | 'bottom';
|
||
|
||
/**
|
||
* 文本溢出处理
|
||
* Text overflow handling
|
||
*/
|
||
export type UITextOverflow = 'visible' | 'hidden' | 'ellipsis' | 'clip';
|
||
|
||
/**
|
||
* 字体粗细
|
||
* Font weight options
|
||
*/
|
||
export type UIFontWeight = 'normal' | 'bold' | 'lighter' | 'bolder' | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
|
||
|
||
/**
|
||
* UI 文本组件
|
||
* UI Text Component - Handles text rendering
|
||
*
|
||
* 定义文本内容和样式
|
||
* Defines text content and style
|
||
*/
|
||
@ECSComponent('UIText')
|
||
@Serializable({ version: 1, typeId: 'UIText' })
|
||
export class UITextComponent extends Component {
|
||
/**
|
||
* 文本内容
|
||
* Text content
|
||
*/
|
||
@Serialize()
|
||
@Property({ type: 'string', label: 'Text' })
|
||
public text: string = '';
|
||
|
||
// ===== 字体 Font =====
|
||
|
||
/**
|
||
* 字体大小（像素）
|
||
* Font size in pixels
|
||
*/
|
||
@Serialize()
|
||
@Property({ type: 'number', label: 'Font Size', min: 1 })
|
||
public fontSize: number = 14;
|
||
|
||
/**
|
||
* 字体族
|
||
* Font family
|
||
*/
|
||
@Serialize()
|
||
@Property({ type: 'string', label: 'Font Family' })
|
||
public fontFamily: string = 'Arial, sans-serif';
|
||
|
||
/**
|
||
* 字体粗细
|
||
* Font weight
|
||
*/
|
||
@Serialize()
|
||
@Property({
|
||
type: 'enum',
|
||
label: 'Font Weight',
|
||
options: [
|
||
{ value: 'normal', label: 'Normal' },
|
||
{ value: 'bold', label: 'Bold' },
|
||
{ value: 'lighter', label: 'Lighter' },
|
||
{ value: 'bolder', label: 'Bolder' }
|
||
]
|
||
})
|
||
public fontWeight: UIFontWeight = 'normal';
|
||
|
||
/**
|
||
* 是否斜体
|
||
* Whether italic
|
||
*/
|
||
@Serialize()
|
||
@Property({ type: 'boolean', label: 'Italic' })
|
||
public italic: boolean = false;
|
||
|
||
// ===== 颜色 Color =====
|
||
|
||
/**
|
||
* 文本颜色 (0xRRGGBB)
|
||
* Text color
|
||
*/
|
||
@Serialize()
|
||
@Property({ type: 'color', label: 'Color' })
|
||
public color: number = 0x000000;
|
||
|
||
/**
|
||
* 文本透明度
|
||
* Text alpha
|
||
*/
|
||
@Serialize()
|
||
@Property({ type: 'number', label: 'Alpha', min: 0, max: 1, step: 0.01 })
|
||
public alpha: number = 1;
|
||
|
||
// ===== 对齐 Alignment =====
|
||
|
||
/**
|
||
* 水平对齐
|
||
* Horizontal alignment
|
||
*/
|
||
@Serialize()
|
||
@Property({
|
||
type: 'enum',
|
||
label: 'Align',
|
||
options: [
|
||
{ value: 'left', label: 'Left' },
|
||
{ value: 'center', label: 'Center' },
|
||
{ value: 'right', label: 'Right' }
|
||
]
|
||
})
|
||
public align: UITextAlign = 'left';
|
||
|
||
/**
|
||
* 垂直对齐
|
||
* Vertical alignment
|
||
*/
|
||
@Serialize()
|
||
@Property({
|
||
type: 'enum',
|
||
label: 'Vertical Align',
|
||
options: [
|
||
{ value: 'top', label: 'Top' },
|
||
{ value: 'middle', label: 'Middle' },
|
||
{ value: 'bottom', label: 'Bottom' }
|
||
]
|
||
})
|
||
public verticalAlign: UITextVerticalAlign = 'middle';
|
||
|
||
// ===== 换行 Wrapping =====
|
||
|
||
/**
|
||
* 是否自动换行
|
||
* Whether to wrap text
|
||
*/
|
||
@Serialize()
|
||
@Property({ type: 'boolean', label: 'Word Wrap' })
|
||
public wordWrap: boolean = false;
|
||
|
||
/**
|
||
* 换行宽度（0 = 使用父元素宽度）
|
||
* Wrap width (0 = use parent width)
|
||
*/
|
||
@Serialize()
|
||
@Property({ type: 'number', label: 'Wrap Width', min: 0 })
|
||
public wrapWidth: number = 0;
|
||
|
||
/**
|
||
* 行高（倍数，1 = 正常）
|
||
* Line height multiplier
|
||
*/
|
||
@Serialize()
|
||
@Property({ type: 'number', label: 'Line Height', min: 0.1, step: 0.1 })
|
||
public lineHeight: number = 1.2;
|
||
|
||
/**
|
||
* 字间距
|
||
* Letter spacing
|
||
*/
|
||
@Serialize()
|
||
@Property({ type: 'number', label: 'Letter Spacing' })
|
||
public letterSpacing: number = 0;
|
||
|
||
// ===== 溢出 Overflow =====
|
||
|
||
/**
|
||
* 文本溢出处理
|
||
* Text overflow handling
|
||
*/
|
||
@Property({
|
||
type: 'enum',
|
||
label: 'Overflow',
|
||
options: [
|
||
{ value: 'visible', label: 'Visible' },
|
||
{ value: 'hidden', label: 'Hidden' },
|
||
{ value: 'ellipsis', label: 'Ellipsis' },
|
||
{ value: 'clip', label: 'Clip' }
|
||
]
|
||
})
|
||
public overflow: UITextOverflow = 'visible';
|
||
|
||
/**
|
||
* 最大显示行数（0 = 无限制）
|
||
* Maximum number of lines (0 = unlimited)
|
||
*/
|
||
@Property({ type: 'integer', label: 'Max Lines', min: 0 })
|
||
public maxLines: number = 0;
|
||
|
||
// ===== 装饰 Decoration =====
|
||
|
||
/**
|
||
* 下划线
|
||
* Underline
|
||
*/
|
||
@Property({ type: 'boolean', label: 'Underline' })
|
||
public underline: boolean = false;
|
||
|
||
/**
|
||
* 删除线
|
||
* Strikethrough
|
||
*/
|
||
@Property({ type: 'boolean', label: 'Strikethrough' })
|
||
public strikethrough: boolean = false;
|
||
|
||
// ===== 描边 Stroke =====
|
||
|
||
/**
|
||
* 描边宽度
|
||
* Stroke width
|
||
*/
|
||
@Property({ type: 'number', label: 'Stroke Width', min: 0 })
|
||
public strokeWidth: number = 0;
|
||
|
||
/**
|
||
* 描边颜色
|
||
* Stroke color
|
||
*/
|
||
@Property({ type: 'color', label: 'Stroke Color' })
|
||
public strokeColor: number = 0x000000;
|
||
|
||
// ===== 阴影 Shadow =====
|
||
|
||
/**
|
||
* 文本阴影启用
|
||
* Text shadow enabled
|
||
*/
|
||
@Property({ type: 'boolean', label: 'Shadow' })
|
||
public shadowEnabled: boolean = false;
|
||
|
||
/**
|
||
* 阴影 X 偏移
|
||
* Shadow X offset
|
||
*/
|
||
public shadowOffsetX: number = 1;
|
||
|
||
/**
|
||
* 阴影 Y 偏移
|
||
* Shadow Y offset
|
||
*/
|
||
public shadowOffsetY: number = 1;
|
||
|
||
/**
|
||
* 阴影颜色
|
||
* Shadow color
|
||
*/
|
||
public shadowColor: number = 0x000000;
|
||
|
||
/**
|
||
* 阴影透明度
|
||
* Shadow alpha
|
||
*/
|
||
public shadowAlpha: number = 0.5;
|
||
|
||
// ===== 计算属性 Computed =====
|
||
|
||
/**
|
||
* 计算后的文本行（由渲染系统填充）
|
||
* Computed text lines (filled by render system)
|
||
*/
|
||
public computedLines: string[] = [];
|
||
|
||
/**
|
||
* 计算后的文本宽度
|
||
* Computed text width
|
||
*/
|
||
public computedWidth: number = 0;
|
||
|
||
/**
|
||
* 计算后的文本高度
|
||
* Computed text height
|
||
*/
|
||
public computedHeight: number = 0;
|
||
|
||
/**
|
||
* 文本是否需要重新计算
|
||
* Whether text needs recomputation
|
||
*/
|
||
public dirty: boolean = true;
|
||
|
||
/**
|
||
* 设置文本
|
||
* Set text content
|
||
*/
|
||
public setText(text: string): this {
|
||
if (this.text !== text) {
|
||
this.text = text;
|
||
this.dirty = true;
|
||
}
|
||
return this;
|
||
}
|
||
|
||
/**
|
||
* 设置字体
|
||
* Set font properties
|
||
*/
|
||
public setFont(size: number, family?: string, weight?: UIFontWeight): this {
|
||
this.fontSize = size;
|
||
if (family !== undefined) this.fontFamily = family;
|
||
if (weight !== undefined) this.fontWeight = weight;
|
||
this.dirty = true;
|
||
return this;
|
||
}
|
||
|
||
/**
|
||
* 设置颜色
|
||
* Set text color
|
||
*/
|
||
public setColor(color: number, alpha: number = 1): this {
|
||
this.color = color;
|
||
this.alpha = alpha;
|
||
return this;
|
||
}
|
||
|
||
/**
|
||
* 获取 CSS 字体字符串
|
||
* Get CSS font string
|
||
*/
|
||
public getCSSFont(): string {
|
||
const style = this.italic ? 'italic ' : '';
|
||
const weight = typeof this.fontWeight === 'number' ? this.fontWeight : this.fontWeight;
|
||
return `${style}${weight} ${this.fontSize}px ${this.fontFamily}`;
|
||
}
|
||
|
||
/**
|
||
* 获取颜色的 CSS 字符串
|
||
* Get color as CSS string
|
||
*/
|
||
public getCSSColor(): string {
|
||
const r = (this.color >> 16) & 0xFF;
|
||
const g = (this.color >> 8) & 0xFF;
|
||
const b = this.color & 0xFF;
|
||
return `rgba(${r}, ${g}, ${b}, ${this.alpha})`;
|
||
}
|
||
}
|