@eva/plugin-renderer-text 2.0.1-beta.9 → 2.0.1

package/dist/plugin-renderer-text.cjs.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var pixi_js = require('pixi.js');
 var eva_js = require('@eva/eva.js');
 var inspectorDecorator = require('@eva/inspector-decorator');
+var pixi_js = require('pixi.js');
 var pluginRenderer = require('@eva/plugin-renderer');
 var rendererAdapter = require('@eva/renderer-adapter');
 
@@ -39,12 +39,104 @@ function __awaiter(thisArg, _arguments, P, generator) {
     });
 }
 
+/**
+ * 位图文本组件
+ *
+ * BitmapText 组件使用位图字体渲染文本，性能优于 Canvas 文本渲染。
+ * 适用于频繁更新的文本场景，如计分板、倒计时等。
+ *
+ * 支持两种字体模式：
+ * - 动态生成：指定 TextStyle，PixiJS 自动生成 bitmap font
+ * - 预加载字体：通过 BitmapFont.install() 预安装或从 .fnt 文件加载
+ *
+ * @example
+ * ```typescript
+ * const score = new GameObject('score');
+ * score.addComponent(new BitmapText({
+ *   text: 'Score: 0',
+ *   style: {
+ *     fontSize: 32,
+ *     fill: '#ffffff',
+ *     fontFamily: 'Arial'
+ *   }
+ * }));
+ * ```
+ */
+class BitmapText extends eva_js.Component {
+    constructor() {
+        super(...arguments);
+        this.text = '';
+        this.style = {};
+    }
+    init(obj) {
+        this.style = Object.assign({ fontSize: 24, fill: '#000000', fontFamily: 'Arial' }, obj === null || obj === void 0 ? void 0 : obj.style);
+        if (obj) {
+            this.text = obj.text;
+        }
+    }
+}
+BitmapText.componentName = 'BitmapText';
+__decorate([
+    inspectorDecorator.type('string')
+], BitmapText.prototype, "text", void 0);
+
+/**
+ * 文本组件（基于 PixiJS Text）
+ *
+ * Text 组件用于渲染文本内容，支持丰富的文本样式配置。
+ * 它基于 PixiJS 的 Text 实现，支持字体、颜色、描边、阴影、对齐等多种样式。
+ *
+ * 主要特性：
+ * - 支持多种字体和字号
+ * - 支持文本颜色、渐变填充
+ * - 支持描边和投影效果
+ * - 支持文本对齐和换行
+ *
+ * @example
+ * ```typescript
+ * // 基础文本
+ * const label = new GameObject('label');
+ * label.addComponent(new Text({
+ *   text: 'Hello EVA!',
+ *   style: {
+ *     fontSize: 32,
+ *     fill: 0xffffff
+ *   }
+ * }));
+ *
+ * // 带样式的文本
+ * label.addComponent(new Text({
+ *   text: '得分: 9999',
+ *   style: {
+ *     fontFamily: 'Arial',
+ *     fontSize: 48,
+ *     fontWeight: 'bold',
+ *     fill: ['#ff0000', '#ffff00'], // 渐变色
+ *     stroke: '#000000',
+ *     strokeThickness: 4,
+ *     dropShadow: true,
+ *     dropShadowDistance: 3
+ *   }
+ * }));
+ * // 如需高清渲染，使用 Render 组件的 resolution 属性
+ * label.addComponent(new Render({ resolution: 2 }));
+ * ```
+ */
 class Text$2 extends eva_js.Component {
     constructor() {
         super(...arguments);
+        /** 文本内容 */
         this.text = '';
+        /** 文本样式配置 */
+        // @decorators.IDEProp 复杂编辑后续添加
         this.style = {};
     }
+    /**
+     * 初始化组件
+     * @param obj - 初始化参数
+     * @param obj.text - 文本内容
+     * @param obj.style - 文本样式
+     */
     init(obj) {
         const style = new pixi_js.TextStyle({
             fontSize: 20,
@@ -63,11 +155,104 @@ class Text$2 extends eva_js.Component {
         }
     }
 }
+/** 组件名称 */
 Text$2.componentName = 'Text';
 __decorate([
     inspectorDecorator.type('string')
 ], Text$2.prototype, "text", void 0);
 
+/**
+ * HTML 富文本组件
+ *
+ * HTMLText 组件支持渲染带有 HTML 标签的富文本内容。
+ * 可以在文本中使用 HTML 标签（如 `<b>`, `<i>`, `<span>` 等）来实现丰富的文本样式，
+ * 适用于聊天对话、新闻内容、富文本显示等需要多样式文本的场景。
+ *
+ * 支持的 HTML 标签：
+ * - `<b>` - 粗体
+ * - `<i>` - 斜体
+ * - `<span style="color:#ff0000">` - 自定义样式
+ * - `<br>` - 换行
+ * 以及更多标准 HTML 文本标签
+ *
+ * @example
+ * ```typescript
+ * // 基础富文本
+ * const label = new GameObject('label');
+ * label.addComponent(new HTMLText({
+ *   text: '这是<b>粗体</b>和<i>斜体</i>文本',
+ *   style: {
+ *     fontSize: 24,
+ *     fill: '#000000',
+ *     fontFamily: 'Arial'
+ *   }
+ * }));
+ *
+ * // 带颜色的富文本
+ * label.addComponent(new HTMLText({
+ *   text: '欢迎 <span style="color:#ff0000">玩家123</span> 加入游戏！',
+ *   style: {
+ *     fontSize: 20,
+ *     wordWrap: true,
+ *     wordWrapWidth: 300
+ *   }
+ * }));
+ *
+ * // 自定义标签样式
+ * label.addComponent(new HTMLText({
+ *   text: '获得 <gold>100</gold> 金币',
+ *   style: {
+ *     fontSize: 18,
+ *     tagStyles: {
+ *       gold: {
+ *         fill: '#ffd700',
+ *         fontWeight: 'bold'
+ *       }
+ *     }
+ *   }
+ * }));
+ *
+ * // 高分辨率渲染（推荐使用 Render 组件的 resolution 属性）
+ * label.addComponent(new HTMLText({
+ *   text: '高清文本',
+ *   textureStyle: {
+ *     scaleMode: 'linear'
+ *   }
+ * }));
+ * label.addComponent(new Render({ resolution: 2 }));
+ * ```
+ */
+class HTMLText extends eva_js.Component {
+    constructor() {
+        super(...arguments);
+        /** 富文本内容（支持 HTML 标签） */
+        this.text = '';
+        /** 文本样式配置 */
+        this.style = {};
+        /** 纹理渲染配置 */
+        this.textureStyle = {};
+    }
+    /**
+     * 初始化组件
+     * @param obj - 初始化参数
+     * @param obj.text - 富文本内容
+     * @param obj.style - 文本样式
+     * @param obj.textureStyle - 纹理配置
+     */
+    init(obj) {
+        this.style = Object.assign({ fontSize: 24, fill: '#000000', fontFamily: 'Arial' }, obj === null || obj === void 0 ? void 0 : obj.style);
+        this.textureStyle = Object.assign({ scaleMode: 'linear', resolution: window.devicePixelRatio || 1 }, obj === null || obj === void 0 ? void 0 : obj.textureStyle);
+        if (obj) {
+            this.text = obj.text;
+        }
+    }
+}
+/** 组件名称 */
+HTMLText.componentName = 'HTMLText';
+__decorate([
+    inspectorDecorator.type('string')
+], HTMLText.prototype, "text", void 0);
+
 let Text = class Text extends pluginRenderer.Renderer {
     constructor() {
         super(...arguments);
@@ -80,16 +265,21 @@ let Text = class Text extends pluginRenderer.Renderer {
     }
     componentChanged(changed) {
         return __awaiter(this, void 0, void 0, function* () {
-            if (changed.componentName !== 'Text')
+            const isText = changed.componentName === 'Text';
+            const isHTMLText = changed.componentName === 'HTMLText';
+            const isBitmapText = changed.componentName === 'BitmapText';
+            if (!isText && !isHTMLText && !isBitmapText)
                 return;
             if (changed.type === eva_js.OBSERVER_TYPE.ADD) {
-                const component = changed.component;
-                const text = new rendererAdapter.Text(component.text, component.style);
-                this.containerManager.getContainer(changed.gameObject.id).addChildAt(text, 0);
-                this.texts[changed.gameObject.id] = {
-                    text,
-                    component: changed.component,
-                };
+                if (isText) {
+                    yield this.addTextComponent(changed);
+                }
+                else if (isHTMLText) {
+                    yield this.addHTMLTextComponent(changed);
+                }
+                else {
+                    yield this.addBitmapTextComponent(changed);
+                }
                 this.setSize(changed);
             }
             else if (changed.type === eva_js.OBSERVER_TYPE.REMOVE) {
@@ -99,56 +289,216 @@ let Text = class Text extends pluginRenderer.Renderer {
             }
             else {
                 this.change(changed);
+                // 如果样式改变且涉及字体，也需要等待字体资源加载
+                const component = changed.component;
+                if (changed.prop.prop[0] === 'style' && component.style && component.style.fontFamily) {
+                    const { text } = this.texts[changed.gameObject.id];
+                    yield this.waitForFontResource(text, changed, component.style.fontFamily);
+                }
                 this.setSize(changed);
             }
         });
     }
+    addTextComponent(changed) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const component = changed.component;
+            // 创建文本样式副本，先不设置 fontFamily
+            const styleWithoutFont = Object.assign({}, component.style);
+            const fontFamily = styleWithoutFont.fontFamily;
+            delete styleWithoutFont.fontFamily;
+            const initialText = fontFamily ? '' : component.text;
+            const text = new rendererAdapter.Text(initialText, styleWithoutFont);
+            this.containerManager.getContainer(changed.gameObject.id).addChildAt(text, 0);
+            this.texts[changed.gameObject.id] = {
+                text,
+                component,
+            };
+            // 如果指定了字体资源，等待资源加载完成后设置 fontFamily
+            if (fontFamily) {
+                yield this.waitForFontResource(text, changed, fontFamily);
+            }
+        });
+    }
+    addHTMLTextComponent(changed) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const component = changed.component;
+            // 创建样式副本，先不设置 fontFamily
+            const styleWithoutFont = Object.assign({}, component.style);
+            const fontFamily = styleWithoutFont.fontFamily;
+            delete styleWithoutFont.fontFamily;
+            const initialText = fontFamily ? '' : component.text;
+            const htmlText = new rendererAdapter.HTMLText(Object.assign({ text: initialText, style: styleWithoutFont }, (component.textureStyle && { textureStyle: component.textureStyle })));
+            this.containerManager.getContainer(changed.gameObject.id).addChildAt(htmlText, 0);
+            this.texts[changed.gameObject.id] = {
+                text: htmlText,
+                component,
+            };
+            // 如果指定了字体资源，等待资源加载完成后设置 fontFamily
+            if (fontFamily) {
+                yield this.waitForFontResource(htmlText, changed, fontFamily);
+            }
+        });
+    }
+    addBitmapTextComponent(changed) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const component = changed.component;
+            // 创建样式副本，先不设置 fontFamily
+            const styleWithoutFont = Object.assign({}, component.style);
+            const fontFamily = styleWithoutFont.fontFamily;
+            delete styleWithoutFont.fontFamily;
+            const initialText = fontFamily ? '' : component.text;
+            const bitmapText = new rendererAdapter.BitmapText(initialText, styleWithoutFont);
+            this.containerManager.getContainer(changed.gameObject.id).addChildAt(bitmapText, 0);
+            this.texts[changed.gameObject.id] = {
+                text: bitmapText,
+                component,
+            };
+            // 如果指定了字体资源，等待资源加载完成后设置 fontFamily
+            if (fontFamily) {
+                yield this.waitForFontResource(bitmapText, changed, fontFamily);
+            }
+        });
+    }
+    /**
+     * 等待字体资源加载完成并更新文本
+     */
+    waitForFontResource(text, changed, fontFamily) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!fontFamily) {
+                return;
+            }
+            try {
+                const fontName = Array.isArray(fontFamily) ? fontFamily[0] : fontFamily;
+                // 通过 resource 系统获取字体资源
+                const asyncId = this.increaseAsyncId(changed.gameObject.id);
+                yield eva_js.resource.getResource(fontName);
+                // 验证异步操作是否仍然有效（防止组件已被移除）
+                if (!this.validateAsyncId(changed.gameObject.id, asyncId))
+                    return;
+                // 字体资源加载成功后，设置 fontFamily 并重新设置文本内容以触发重新渲染
+                const component = this.texts[changed.gameObject.id].component;
+                text.style.fontFamily = fontFamily;
+                text.text = component.text;
+                // 更新尺寸
+            }
+            catch (error) {
+                console.warn(`字体资源 ${fontFamily} 加载失败:`, error);
+            }
+        });
+    }
+    /**
+     * 将 Eva.js 的样式格式转换为 PixiJS v8 格式
+     */
+    processStyle(style) {
+        const processed = Object.assign({}, style);
+        // stroke + strokeThickness -> stroke: { color, width }
+        if (processed.strokeThickness) {
+            const color = processed.stroke;
+            processed.stroke = {
+                color,
+                width: processed.strokeThickness,
+            };
+            delete processed.strokeThickness;
+        }
+        // dropShadow* -> dropShadow: { color, distance, angle, alpha, blur }
+        if (processed.dropShadow) {
+            const dropShadowConfig = {};
+            if (processed.dropShadowColor != null) {
+                dropShadowConfig.color = processed.dropShadowColor;
+            }
+            if (processed.dropShadowDistance != null) {
+                dropShadowConfig.distance = processed.dropShadowDistance;
+            }
+            if (processed.dropShadowAngle != null) {
+                dropShadowConfig.angle = processed.dropShadowAngle;
+            }
+            if (processed.dropShadowAlpha != null) {
+                dropShadowConfig.alpha = processed.dropShadowAlpha;
+            }
+            if (processed.dropShadowBlur != null) {
+                dropShadowConfig.blur = processed.dropShadowBlur;
+            }
+            processed.dropShadow = dropShadowConfig;
+            delete processed.dropShadowColor;
+            delete processed.dropShadowDistance;
+            delete processed.dropShadowAngle;
+            delete processed.dropShadowAlpha;
+            delete processed.dropShadowBlur;
+        }
+        // fill 数组 -> 取第一个值 (deprecated)
+        if (Array.isArray(processed.fill)) {
+            processed.fill = processed.fill[0];
+        }
+        // fillGradientStops -> FillGradient 对象
+        if (Array.isArray(processed.fillGradientStops)) {
+            let fontSize;
+            if (processed.fontSize == null) {
+                fontSize = pixi_js.TextStyle.defaultTextStyle.fontSize;
+            }
+            else if (typeof processed.fontSize === 'string') {
+                fontSize = parseInt(processed.fontSize, 10);
+            }
+            else {
+                fontSize = processed.fontSize;
+            }
+            const gradientFill = new pixi_js.FillGradient(0, 0, 0, fontSize * 1.7);
+            const fills = processed.fillGradientStops.map((color) => pixi_js.Color.shared.setValue(color).toNumber());
+            fills.forEach((number, index) => {
+                const ratio = index / (fills.length - 1);
+                gradientFill.addColorStop(ratio, number);
+            });
+            processed.fill = { fill: gradientFill };
+            delete processed.fillGradientStops;
+        }
+        return processed;
+    }
     change(changed) {
         const { text, component } = this.texts[changed.gameObject.id];
+        const isHTMLText = changed.componentName === 'HTMLText';
         if (changed.prop.prop[0] === 'text') {
             text.text = component.text;
         }
         else if (changed.prop.prop[0] === 'style') {
-            Object.assign(text.style, changed.component.style);
-        }
-    }
-    asyncChangeTextStyle(text, textStyle) {
-        if (textStyle.fontFamily) {
-            const fontFamily = textStyle.fontFamily;
-            textStyle.fontFamily = '';
-            this.asyncUpdateFontFamily(text, fontFamily);
+            const processedStyle = this.processStyle(component.style);
+            Object.assign(text.style, processedStyle);
         }
-        Object.assign(text.style, textStyle);
-    }
-    asyncUpdateFontFamily(text, fontFamily) {
-        if (fontFamily) {
-            if (Array.isArray(fontFamily)) {
-                Promise.all(fontFamily.map(font => eva_js.resource.getResource(font))).finally(() => {
-                    text.style.fontFamily = fontFamily;
-                });
-            }
-            else {
-                eva_js.resource.getResource(fontFamily).finally(() => {
-                    text.style.fontFamily = fontFamily;
-                });
-            }
+        else if (changed.prop.prop[0] === 'textureStyle' && isHTMLText) {
+            // HTMLText 纹理样式变化需要重新创建
+            const htmlComponent = component;
+            const container = this.containerManager.getContainer(changed.gameObject.id);
+            const index = container.getChildIndex(text);
+            container.removeChild(text);
+            text.destroy({ children: true });
+            const newText = new rendererAdapter.HTMLText({
+                text: htmlComponent.text,
+                style: htmlComponent.style,
+                textureStyle: htmlComponent.textureStyle
+            });
+            container.addChildAt(newText, index);
+            this.texts[changed.gameObject.id].text = newText;
         }
     }
     setSize(changed) {
         const { transform } = changed.gameObject;
         if (!transform)
             return;
-        transform.size.width = this.texts[changed.gameObject.id].text.width;
-        transform.size.height = this.texts[changed.gameObject.id].text.height;
+        const { text } = this.texts[changed.gameObject.id];
+        const size = text.getSize();
+        transform.size.width = size.width;
+        transform.size.height = size.height;
     }
 };
 Text.systemName = 'Text';
 Text = __decorate([
     eva_js.decorators.componentObserver({
         Text: ['text', { prop: ['style'], deep: true }],
+        HTMLText: ['text', { prop: ['style'], deep: true }, { prop: ['textureStyle'], deep: true }],
+        BitmapText: ['text', { prop: ['style'], deep: true }],
     })
 ], Text);
 var Text$1 = Text;
 
+exports.BitmapText = BitmapText;
+exports.HTMLText = HTMLText;
 exports.Text = Text$2;
 exports.TextSystem = Text$1;

package/dist/plugin-renderer-text.cjs.prod.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("pixi.js"),t=require("@eva/eva.js"),n=require("@eva/inspector-decorator"),s=require("@eva/plugin-renderer"),i=require("@eva/renderer-adapter");
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("@eva/eva.js"),e=require("@eva/inspector-decorator"),o=require("pixi.js"),n=require("@eva/plugin-renderer"),i=require("@eva/renderer-adapter");
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation. All rights reserved.
 Licensed under the Apache License, Version 2.0 (the "License"); you may not use
@@ -13,4 +13,4 @@ MERCHANTABLITY OR NON-INFRINGEMENT.
 See the Apache Version 2.0 License for specific language governing permissions
 and limitations under the License.
 ***************************************************************************** */
-function r(e,t,n,s){var i,r=arguments.length,o=r<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,n):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,n,s);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(o=(r<3?i(o):r>3?i(t,n,o):i(t,n))||o);return r>3&&o&&Object.defineProperty(t,n,o),o}class o extends t.Component{constructor(){super(...arguments),this.text="",this.style={}}init(t){const n=new e.TextStyle({fontSize:20}),s={};for(const e in n)0===e.indexOf("_")&&(s[e.substring(1)]=n[e]);delete s.styleKey,this.style=s,t&&(this.text=t.text,Object.assign(this.style,t.style))}}o.componentName="Text",r([n.type("string")],o.prototype,"text",void 0);let a=class extends s.Renderer{constructor(){super(...arguments),this.name="Text",this.texts={}}init(){this.renderSystem=this.game.getSystem(s.RendererSystem),this.renderSystem.rendererManager.register(this)}componentChanged(e){return n=this,s=void 0,o=function*(){if("Text"===e.componentName)if(e.type===t.OBSERVER_TYPE.ADD){const t=e.component,n=new i.Text(t.text,t.style);this.containerManager.getContainer(e.gameObject.id).addChildAt(n,0),this.texts[e.gameObject.id]={text:n,component:e.component},this.setSize(e)}else e.type===t.OBSERVER_TYPE.REMOVE?(this.containerManager.getContainer(e.gameObject.id).removeChild(this.texts[e.gameObject.id].text),this.texts[e.gameObject.id].text.destroy({children:!0}),delete this.texts[e.gameObject.id]):(this.change(e),this.setSize(e))},new((r=void 0)||(r=Promise))((function(e,t){function i(e){try{c(o.next(e))}catch(e){t(e)}}function a(e){try{c(o.throw(e))}catch(e){t(e)}}function c(t){t.done?e(t.value):new r((function(e){e(t.value)})).then(i,a)}c((o=o.apply(n,s||[])).next())}));var n,s,r,o}change(e){const{text:t,component:n}=this.texts[e.gameObject.id];"text"===e.prop.prop[0]?t.text=n.text:"style"===e.prop.prop[0]&&Object.assign(t.style,e.component.style)}asyncChangeTextStyle(e,t){if(t.fontFamily){const n=t.fontFamily;t.fontFamily="",this.asyncUpdateFontFamily(e,n)}Object.assign(e.style,t)}asyncUpdateFontFamily(e,n){n&&(Array.isArray(n)?Promise.all(n.map((e=>t.resource.getResource(e)))).finally((()=>{e.style.fontFamily=n})):t.resource.getResource(n).finally((()=>{e.style.fontFamily=n})))}setSize(e){const{transform:t}=e.gameObject;t&&(t.size.width=this.texts[e.gameObject.id].text.width,t.size.height=this.texts[e.gameObject.id].text.height)}};a.systemName="Text",a=r([t.decorators.componentObserver({Text:["text",{prop:["style"],deep:!0}]})],a);var c=a;exports.Text=o,exports.TextSystem=c;
+function s(t,e,o,n){var i,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,o,n);else for(var a=t.length-1;a>=0;a--)(i=t[a])&&(r=(s<3?i(r):s>3?i(e,o,r):i(e,o))||r);return s>3&&r&&Object.defineProperty(e,o,r),r}function r(t,e,o,n){return new(o||(o=Promise))((function(i,s){function r(t){try{l(n.next(t))}catch(t){s(t)}}function a(t){try{l(n.throw(t))}catch(t){s(t)}}function l(t){t.done?i(t.value):new o((function(e){e(t.value)})).then(r,a)}l((n=n.apply(t,e||[])).next())}))}class a extends t.Component{constructor(){super(...arguments),this.text="",this.style={}}init(t){this.style=Object.assign({fontSize:24,fill:"#000000",fontFamily:"Arial"},null==t?void 0:t.style),t&&(this.text=t.text)}}a.componentName="BitmapText",s([e.type("string")],a.prototype,"text",void 0);class l extends t.Component{constructor(){super(...arguments),this.text="",this.style={}}init(t){const e=new o.TextStyle({fontSize:20}),n={};for(const t in e)0===t.indexOf("_")&&(n[t.substring(1)]=e[t]);delete n.styleKey,this.style=n,t&&(this.text=t.text,Object.assign(this.style,t.style))}}l.componentName="Text",s([e.type("string")],l.prototype,"text",void 0);class d extends t.Component{constructor(){super(...arguments),this.text="",this.style={},this.textureStyle={}}init(t){this.style=Object.assign({fontSize:24,fill:"#000000",fontFamily:"Arial"},null==t?void 0:t.style),this.textureStyle=Object.assign({scaleMode:"linear",resolution:window.devicePixelRatio||1},null==t?void 0:t.textureStyle),t&&(this.text=t.text)}}d.componentName="HTMLText",s([e.type("string")],d.prototype,"text",void 0);let c=class extends n.Renderer{constructor(){super(...arguments),this.name="Text",this.texts={}}init(){this.renderSystem=this.game.getSystem(n.RendererSystem),this.renderSystem.rendererManager.register(this)}componentChanged(e){return r(this,void 0,void 0,(function*(){const o="Text"===e.componentName,n="HTMLText"===e.componentName,i="BitmapText"===e.componentName;if(o||n||i)if(e.type===t.OBSERVER_TYPE.ADD)o?yield this.addTextComponent(e):n?yield this.addHTMLTextComponent(e):yield this.addBitmapTextComponent(e),this.setSize(e);else if(e.type===t.OBSERVER_TYPE.REMOVE)this.containerManager.getContainer(e.gameObject.id).removeChild(this.texts[e.gameObject.id].text),this.texts[e.gameObject.id].text.destroy({children:!0}),delete this.texts[e.gameObject.id];else{this.change(e);const t=e.component;if("style"===e.prop.prop[0]&&t.style&&t.style.fontFamily){const{text:o}=this.texts[e.gameObject.id];yield this.waitForFontResource(o,e,t.style.fontFamily)}this.setSize(e)}}))}addTextComponent(t){return r(this,void 0,void 0,(function*(){const e=t.component,o=Object.assign({},e.style),n=o.fontFamily;delete o.fontFamily;const s=n?"":e.text,r=new i.Text(s,o);this.containerManager.getContainer(t.gameObject.id).addChildAt(r,0),this.texts[t.gameObject.id]={text:r,component:e},n&&(yield this.waitForFontResource(r,t,n))}))}addHTMLTextComponent(t){return r(this,void 0,void 0,(function*(){const e=t.component,o=Object.assign({},e.style),n=o.fontFamily;delete o.fontFamily;const s=n?"":e.text,r=new i.HTMLText(Object.assign({text:s,style:o},e.textureStyle&&{textureStyle:e.textureStyle}));this.containerManager.getContainer(t.gameObject.id).addChildAt(r,0),this.texts[t.gameObject.id]={text:r,component:e},n&&(yield this.waitForFontResource(r,t,n))}))}addBitmapTextComponent(t){return r(this,void 0,void 0,(function*(){const e=t.component,o=Object.assign({},e.style),n=o.fontFamily;delete o.fontFamily;const s=n?"":e.text,r=new i.BitmapText(s,o);this.containerManager.getContainer(t.gameObject.id).addChildAt(r,0),this.texts[t.gameObject.id]={text:r,component:e},n&&(yield this.waitForFontResource(r,t,n))}))}waitForFontResource(e,o,n){return r(this,void 0,void 0,(function*(){if(n)try{const i=Array.isArray(n)?n[0]:n,s=this.increaseAsyncId(o.gameObject.id);if(yield t.resource.getResource(i),!this.validateAsyncId(o.gameObject.id,s))return;const r=this.texts[o.gameObject.id].component;e.style.fontFamily=n,e.text=r.text}catch(t){console.warn(`字体资源 ${n} 加载失败:`,t)}}))}processStyle(t){const e=Object.assign({},t);if(e.strokeThickness){const t=e.stroke;e.stroke={color:t,width:e.strokeThickness},delete e.strokeThickness}if(e.dropShadow){const t={};null!=e.dropShadowColor&&(t.color=e.dropShadowColor),null!=e.dropShadowDistance&&(t.distance=e.dropShadowDistance),null!=e.dropShadowAngle&&(t.angle=e.dropShadowAngle),null!=e.dropShadowAlpha&&(t.alpha=e.dropShadowAlpha),null!=e.dropShadowBlur&&(t.blur=e.dropShadowBlur),e.dropShadow=t,delete e.dropShadowColor,delete e.dropShadowDistance,delete e.dropShadowAngle,delete e.dropShadowAlpha,delete e.dropShadowBlur}if(Array.isArray(e.fill)&&(e.fill=e.fill[0]),Array.isArray(e.fillGradientStops)){let t;t=null==e.fontSize?o.TextStyle.defaultTextStyle.fontSize:"string"==typeof e.fontSize?parseInt(e.fontSize,10):e.fontSize;const n=new o.FillGradient(0,0,0,1.7*t),i=e.fillGradientStops.map((t=>o.Color.shared.setValue(t).toNumber()));i.forEach(((t,e)=>{const o=e/(i.length-1);n.addColorStop(o,t)})),e.fill={fill:n},delete e.fillGradientStops}return e}change(t){const{text:e,component:o}=this.texts[t.gameObject.id],n="HTMLText"===t.componentName;if("text"===t.prop.prop[0])e.text=o.text;else if("style"===t.prop.prop[0]){const t=this.processStyle(o.style);Object.assign(e.style,t)}else if("textureStyle"===t.prop.prop[0]&&n){const n=o,s=this.containerManager.getContainer(t.gameObject.id),r=s.getChildIndex(e);s.removeChild(e),e.destroy({children:!0});const a=new i.HTMLText({text:n.text,style:n.style,textureStyle:n.textureStyle});s.addChildAt(a,r),this.texts[t.gameObject.id].text=a}}setSize(t){const{transform:e}=t.gameObject;if(!e)return;const{text:o}=this.texts[t.gameObject.id],n=o.getSize();e.size.width=n.width,e.size.height=n.height}};c.systemName="Text",c=s([t.decorators.componentObserver({Text:["text",{prop:["style"],deep:!0}],HTMLText:["text",{prop:["style"],deep:!0},{prop:["textureStyle"],deep:!0}],BitmapText:["text",{prop:["style"],deep:!0}]})],c);var p=c;exports.BitmapText=a,exports.HTMLText=d,exports.Text=l,exports.TextSystem=p;