feat: add get default props

packages/effects-core/src/plugins/text/text-item.ts

@@ -59,27 +59,48 @@ export class TextComponent extends MaskableGraphic {
   protected readonly SCALE_FACTOR = 0.1;
   protected readonly ALPHA_FIX_VALUE = 1 / 255;
 
-  constructor (engine: Engine, props?: spec.TextComponentData) {
+  private getDefaultProps (): spec.TextComponentData {
+    return {
+      id: `default-id-${Math.random().toString(36).substr(2, 9)}`,
+      item: { id: `default-item-${Math.random().toString(36).substr(2, 9)}` },
+      dataType: spec.DataType.TextComponent,
+      options: {
+        text: '默认文本',
+        fontFamily: 'AlibabaSans-BoldItalic',
+        fontSize: 40,
+        textColor: [255, 255, 255, 1],
+        fontWeight: spec.TextWeight.normal,
+        letterSpace: 0,
+        textAlign: 1,
+        fontStyle: spec.FontStyle.normal,
+        autoWidth: false,
+        textWidth: 200,
+        textHeight: 42,
+        lineHeight: 40.148,
+      },
+      renderer: {
+        renderMode: 1,
+        anchor: [0.5, 0.5],
+      },
+    };
+  }
+
+  constructor (engine: Engine) {
     super(engine);
 
     this.name = 'MText' + seed++;
 
-    if (props) {
-      this.fromData(props);
-    }
-
+    // 初始化canvas资源
     this.canvas = canvasPool.getCanvas();
     canvasPool.saveCanvas(this.canvas);
     this.context = this.canvas.getContext('2d', { willReadFrequently: true });
 
-    if (!props) {
-      return;
-    }
+    // 使用默认值初始化
+    const defaultData = this.getDefaultProps();
 
-    const { options } = props;
+    const { options } = defaultData;
 
     this.updateWithOptions(options);
-    this.updateTexture();
   }
 
   override onUpdate (dt: number): void {
@@ -98,13 +119,24 @@ export class TextComponent extends MaskableGraphic {
 
     this.interaction = interaction;
 
+    this.resetState();
+
     // TextComponentBase
     this.updateWithOptions(options);
     this.renderText(options);
 
     // 恢复默认颜色
     this.material.setColor('_Color', new Color(1, 1, 1, 1));
+  }
 
+  private resetState (): void {
+    // 清理纹理资源
+    this.disposeTextTexture();
+
+    // 重置状态变量
+    this.isDirty = true;
+    this.lineCount = 0;
+    this.maxLineWidth = 0;
   }
 
   updateWithOptions (options: spec.TextContentOptions) {
@@ -135,13 +167,27 @@ export class TextComponentBase {
 
   private char: string[];
 
+  constructor () {
+  }
+
   protected renderText (options: spec.TextContentOptions) {
     this.updateTexture();
   }
 
   updateWithOptions (options: spec.TextContentOptions) {
-    this.textStyle = new TextStyle(options);
-    this.textLayout = new TextLayout(options);
+    // 初始化 textStyle 和 textLayout
+    if (!this.textStyle) {
+      this.textStyle = new TextStyle(options);
+    } else {
+      this.textStyle.update(options);
+    }
+
+    if (!this.textLayout) {
+      this.textLayout = new TextLayout(options);
+    } else {
+      this.textLayout.update(options);
+    }
+
     this.text = options.text.toString();
     this.lineCount = this.getLineCount(options.text, true);
   }
@@ -215,6 +261,7 @@ export class TextComponentBase {
    */
   setLineHeight (value: number): void {
     const fontSize = this.textStyle.fontSize;
+    //设置行高不能小于字号大小
     const safe = Math.max(fontSize, value);
 
     if (this.textLayout.lineHeight === safe) {

packages/effects-core/src/plugins/text/text-layout.ts

@@ -22,13 +22,17 @@ export class TextLayout {
    */
   autoWidth: boolean;
 
-  readonly maxTextWidth: number;
+  maxTextWidth: number;
   /**
    * 行高
    */
   lineHeight: number;
 
   constructor (options: spec.TextContentOptions) {
+    this.update(options);
+  }
+
+  update (options: spec.TextContentOptions): void {
     const {
       fontSize,
       textHeight = 100,

packages/effects-core/src/plugins/text/text-style.ts

@@ -72,41 +72,54 @@ export class TextStyle {
    */
   fontScale = 2;
 
-  readonly fontOffset = 0;
+  fontOffset = 0;
 
   constructor (options: spec.TextContentOptions) {
+    this.update(options);
+  }
+
+  update (options: spec.TextContentOptions): void {
     const { textColor = [1, 1, 1, 1], fontSize = 40, outline, shadow, fontWeight = 'normal', fontStyle = 'normal', fontFamily = 'sans-serif' } = options;
 
-    this.textColor = textColor;
+    this.textColor = [...textColor];
     //@ts-expect-error
     this.textWeight = fontWeight;
     //@ts-expect-error
     this.fontStyle = fontStyle;
     this.fontFamily = fontFamily;
     this.fontSize = fontSize; // 暂时取消字号限制 Math.min(fontSize, this.maxFontSize);
 
+    // 重置描边状态
+    this.isOutlined = false;
+    this.outlineColor = [1, 1, 1, 1];
+    this.outlineWidth = 0;
+
     if (outline) {
       this.isOutlined = true;
-      this.outlineColor = outline.outlineColor ?? [1, 1, 1, 1];
+      this.outlineColor = [...(outline.outlineColor ?? [1, 1, 1, 1])];
       this.outlineWidth = outline.outlineWidth ?? 1;
-      //this.fontOffset += this.outlineWidth;
-      //预期效果不需要因为描边而修改文字计算的宽度
-      //当描边宽度扩大，最后效果是描边重叠
     }
 
+    // 重置阴影状态
+    this.hasShadow = false;
+    this.shadowBlur = 2;
+    this.shadowColor = [0, 0, 0, 1];
+    this.shadowOffsetX = 0;
+    this.shadowOffsetY = 0;
+
     if (shadow) {
       this.hasShadow = true;
       this.shadowBlur = shadow.shadowBlur ?? 2;
-      this.shadowColor = shadow.shadowColor ?? [0, 0, 0, 1];
+      this.shadowColor = [...(shadow.shadowColor ?? [0, 0, 0, 1])];
       this.shadowOffsetX = shadow.shadowOffsetX ?? 0;
       this.shadowOffsetY = shadow.shadowOffsetY ?? 0;
-
     }
 
+    // 重置字体偏移
+    this.fontOffset = 0;
     if (this.fontStyle !== spec.FontStyle.normal) {
       // 0.0174532925 = 3.141592653 / 180
       this.fontOffset += this.fontSize * Math.tan(12 * 0.0174532925);
     }
-
   }
 }