@eva/plugin-renderer-text 2.1.0-beta.14 → 2.1.0-beta.15

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

@@ -1,7 +1,7 @@
 import { Component, type, Field, resource, RESOURCE_TYPE, decorators, OBSERVER_TYPE } from '@eva/eva.js';
-import { TextStyle, FillGradient, Color } from 'pixi.js';
+import { TextStyle, FillGradient, Color, TextureStyle } from 'pixi.js';
 import { Renderer, RendererSystem } from '@eva/plugin-renderer';
-import { HTMLText as HTMLText$1, Text as Text$3, BitmapText as BitmapText$1 } from '@eva/renderer-adapter';
+import { Text as Text$3, HTMLText as HTMLText$1, BitmapText as BitmapText$1 } from '@eva/renderer-adapter';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -18,6 +18,18 @@ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
 
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
 function __decorate(decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -604,166 +616,328 @@ let Text = class Text extends Renderer {
     constructor() {
         super(...arguments);
         this.name = 'Text';
+        this.presentationAddFlushEnabled = true;
         this.texts = {};
+        this.retired = false;
+        this.pendingHTMLTextComponents = {};
+        this.fontIdentityIds = new WeakMap();
+        this.nextFontIdentityId = 1;
     }
     init() {
         this.renderSystem = this.game.getSystem(RendererSystem);
         this.renderSystem.rendererManager.register(this);
     }
+    shouldFlushPresentationAddition(changed) {
+        return changed.componentName === 'Text' || changed.componentName === 'HTMLText' || changed.componentName === 'BitmapText';
+    }
     componentChanged(changed) {
+        var _a, _b, _c, _d, _e;
         return __awaiter(this, void 0, void 0, function* () {
+            if (this.retired)
+                return;
             const isText = changed.componentName === 'Text';
             const isHTMLText = changed.componentName === 'HTMLText';
             const isBitmapText = changed.componentName === 'BitmapText';
             if (!isText && !isHTMLText && !isBitmapText)
                 return;
+            const gameObjectId = changed.gameObject.id;
             if (changed.type === OBSERVER_TYPE.ADD) {
                 if (isText) {
-                    yield this.addTextComponent(changed);
+                    const loading = this.addTextComponent(changed);
+                    if (loading)
+                        yield loading;
                 }
                 else if (isHTMLText) {
-                    yield this.addHTMLTextComponent(changed);
+                    const loading = this.addHTMLTextComponent(changed);
+                    if (loading)
+                        yield loading;
                 }
                 else {
-                    yield this.addBitmapTextComponent(changed);
+                    const loading = this.addBitmapTextComponent(changed);
+                    if (loading)
+                        yield loading;
+                }
+                if (((_a = this.texts[gameObjectId]) === null || _a === void 0 ? void 0 : _a.component) === changed.component) {
+                    this.setSize(changed);
                 }
-                this.setSize(changed);
             }
             else if (changed.type === OBSERVER_TYPE.REMOVE) {
-                this.containerManager.getContainer(changed.gameObject.id).removeChild(this.texts[changed.gameObject.id].text);
-                this.texts[changed.gameObject.id].text.destroy({ children: true });
-                delete this.texts[changed.gameObject.id];
+                if (((_b = this.texts[gameObjectId]) === null || _b === void 0 ? void 0 : _b.component) !== changed.component && this.pendingHTMLTextComponents[gameObjectId] !== changed.component)
+                    return;
+                this.increaseAsyncId(gameObjectId);
+                if (this.pendingHTMLTextComponents[gameObjectId] === changed.component) {
+                    delete this.pendingHTMLTextComponents[gameObjectId];
+                }
+                const current = this.texts[gameObjectId];
+                if (!current || current.component !== changed.component)
+                    return;
+                this.containerManager.getContainer(gameObjectId).removeChild(current.text);
+                current.text.destroy({ children: true });
+                delete this.texts[gameObjectId];
             }
             else {
-                this.change(changed);
                 // Only a font-family replacement can introduce a new async font asset.
                 const component = changed.component;
                 const propPath = changed.prop.prop;
                 const fontFamilyChanged = propPath[0] === 'style' && (propPath.length === 1 || propPath[1] === 'fontFamily');
-                if (fontFamilyChanged && component.style && this.hasRegisteredFont(component.style.fontFamily)) {
-                    const { text } = this.texts[changed.gameObject.id];
+                const current = this.texts[gameObjectId];
+                // A registered-font HTMLText ADD is intentionally not mounted until the
+                // font is ready. While it is pending, ordinary updates are already held
+                // by the component; a font-family change restarts (or completes) ADD.
+                if (!current) {
+                    if (isHTMLText &&
+                        this.pendingHTMLTextComponents[gameObjectId] === component &&
+                        fontFamilyChanged) {
+                        yield this.addHTMLTextComponent(changed);
+                        if (((_c = this.texts[gameObjectId]) === null || _c === void 0 ? void 0 : _c.component) === component) {
+                            this.setSize(changed);
+                        }
+                    }
+                    return;
+                }
+                if (current.component !== component)
+                    return;
+                const waitsForFontResource = fontFamilyChanged && component.style && this.needsFontLoad(component.style.fontFamily);
+                if (fontFamilyChanged && !waitsForFontResource) {
+                    // A system/CSS font switch is synchronous, but it must still cancel an
+                    // older registered-font request for the same GameObject.
+                    this.increaseAsyncId(gameObjectId);
+                }
+                this.change(changed);
+                if (waitsForFontResource) {
+                    const { text } = current;
                     yield this.waitForFontResource(text, changed, component.style.fontFamily);
                 }
-                this.setSize(changed);
+                if (((_d = this.texts[gameObjectId]) === null || _d === void 0 ? void 0 : _d.text) === current.text && ((_e = this.texts[gameObjectId]) === null || _e === void 0 ? void 0 : _e.component) === component) {
+                    this.setSize(changed);
+                }
             }
         });
     }
     addTextComponent(changed) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const component = changed.component;
-            // Registered Eva font assets must load before the first glyph. Ordinary
-            // CSS/system families are already valid Pixi styles and render directly.
-            const styleWithoutFont = this.processStyle(component.style);
-            const fontFamily = styleWithoutFont.fontFamily;
-            const waitsForFontResource = this.hasRegisteredFont(fontFamily);
-            if (waitsForFontResource)
-                delete styleWithoutFont.fontFamily;
-            const initialText = waitsForFontResource ? '' : component.text;
-            const text = new Text$3(initialText, styleWithoutFont);
-            this.containerManager.getContainer(changed.gameObject.id).addChildAt(text, 0);
-            this.texts[changed.gameObject.id] = {
-                text,
-                component,
-            };
-            // 如果指定了字体资源，等待资源加载完成后设置 fontFamily
-            if (waitsForFontResource) {
-                yield this.waitForFontResource(text, changed, fontFamily);
-            }
-        });
+        const component = changed.component;
+        // Registered Eva font assets must load before the first glyph. Ordinary
+        // CSS/system families are already valid Pixi styles and render directly.
+        const styleWithoutFont = this.processStyle(component.style);
+        const fontFamily = styleWithoutFont.fontFamily;
+        const waitsForFontResource = this.needsFontLoad(fontFamily);
+        if (waitsForFontResource)
+            delete styleWithoutFont.fontFamily;
+        const initialText = waitsForFontResource ? '' : component.text;
+        const text = new Text$3(initialText, styleWithoutFont);
+        this.containerManager.getContainer(changed.gameObject.id).addChildAt(text, 0);
+        this.texts[changed.gameObject.id] = {
+            text,
+            component,
+            awaitingInitialFont: waitsForFontResource,
+        };
+        // 如果指定了字体资源，等待资源加载完成后设置 fontFamily
+        if (waitsForFontResource) {
+            return this.waitForFontResource(text, changed, fontFamily);
+        }
     }
     addHTMLTextComponent(changed) {
+        const component = changed.component;
+        const gameObjectId = changed.gameObject.id;
+        const initialStyle = this.processStyle(component.style);
+        const fontFamily = initialStyle.fontFamily;
+        const waitsForFontResource = this.needsFontLoad(fontFamily);
+        if (waitsForFontResource) {
+            this.pendingHTMLTextComponents[gameObjectId] = component;
+            return this.addHTMLTextAfterFont(changed, component, fontFamily, this.increaseAsyncId(gameObjectId));
+        }
+        else if (this.pendingHTMLTextComponents[gameObjectId] === component) {
+            delete this.pendingHTMLTextComponents[gameObjectId];
+        }
+        this.mountHTMLText(changed, component);
+    }
+    addHTMLTextAfterFont(changed, component, fontFamily, asyncId) {
+        var _a;
         return __awaiter(this, void 0, void 0, function* () {
-            const component = changed.component;
-            // 创建样式副本，先不设置 fontFamily
-            const styleWithoutFont = this.processStyle(component.style);
-            const fontFamily = styleWithoutFont.fontFamily;
-            const waitsForFontResource = this.hasRegisteredFont(fontFamily);
-            if (waitsForFontResource)
-                delete styleWithoutFont.fontFamily;
-            const initialText = waitsForFontResource ? '' : component.text;
-            const htmlText = new HTMLText$1(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 (waitsForFontResource) {
-                yield this.waitForFontResource(htmlText, changed, fontFamily);
-            }
+            const gameObjectId = changed.gameObject.id;
+            const fontName = this.getFontName(fontFamily);
+            const loaded = yield this.loadFontResource(fontFamily);
+            if (!loaded || this.retired || changed.gameObject.destroyed ||
+                !this.validateAsyncId(gameObjectId, asyncId) ||
+                this.pendingHTMLTextComponents[gameObjectId] !== component ||
+                this.getFontName((_a = component.style) === null || _a === void 0 ? void 0 : _a.fontFamily) !== fontName)
+                return;
+            this.mountHTMLText(changed, component);
         });
     }
-    addBitmapTextComponent(changed) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const component = changed.component;
-            // 创建样式副本，先不设置 fontFamily
-            const styleWithoutFont = this.processStyle(component.style);
-            const fontFamily = styleWithoutFont.fontFamily;
-            const waitsForFontResource = this.hasRegisteredFont(fontFamily);
-            if (waitsForFontResource)
-                delete styleWithoutFont.fontFamily;
-            const initialText = waitsForFontResource ? '' : component.text;
-            const bitmapText = new BitmapText$1(initialText, styleWithoutFont);
-            this.containerManager.getContainer(changed.gameObject.id).addChildAt(bitmapText, 0);
-            this.texts[changed.gameObject.id] = {
-                text: bitmapText,
-                component,
-            };
-            // 如果指定了字体资源，等待资源加载完成后设置 fontFamily
-            if (waitsForFontResource) {
-                yield this.waitForFontResource(bitmapText, changed, fontFamily);
+    mountHTMLText(changed, component) {
+        const gameObjectId = changed.gameObject.id;
+        const style = this.processStyle(component.style);
+        const _a = component.textureStyle || {}, sampling = __rest(_a, ["resolution"]);
+        const htmlText = new HTMLText$1({ text: component.text, style, textureStyle: Object.assign({}, sampling) });
+        htmlText.rasterCacheFontIdentity = (families) => this.getHTMLRasterFontIdentity(families);
+        this.applyHTMLResolution(htmlText, component, changed);
+        this.containerManager.getContainer(gameObjectId).addChildAt(htmlText, 0);
+        this.texts[gameObjectId] = {
+            text: htmlText,
+            component,
+        };
+        delete this.pendingHTMLTextComponents[gameObjectId];
+    }
+    getHTMLRasterFontIdentity(families) {
+        var _a;
+        const uniqueFamilies = [...new Set(families.filter((family) => typeof family === 'string')
+                .map(family => family.replace(/["']/g, '').trim()).filter(Boolean))];
+        if (!uniqueFamilies.length)
+            return 'external:<default>';
+        const describe = (face) => [
+            this.objectIdentity(face), face.family, face.style, face.weight, face.stretch,
+            face.unicodeRange, face.variant, face.featureSettings, face.display,
+        ].map(value => String(value !== null && value !== void 0 ? value : '')).join(':');
+        const identities = [];
+        for (const family of uniqueFamilies) {
+            const current = resource.resourcesMap[family];
+            if (!current || current.type !== RESOURCE_TYPE.FONT) {
+                identities.push(`external:${family}`);
+                continue;
             }
-        });
+            if (current.complete !== true)
+                return null;
+            const rawFaces = (_a = current.data) === null || _a === void 0 ? void 0 : _a.font;
+            const faces = Array.isArray(rawFaces) ? rawFaces : [rawFaces];
+            if (!faces.length || faces.some(face => !face || typeof face !== 'object' || face.status !== 'loaded'))
+                return null;
+            identities.push(`${family}|resource:${this.objectIdentity(current)}|faces:${faces.map(describe).join(',')}`);
+        }
+        return identities.join(';');
+    }
+    objectIdentity(value) {
+        let id = this.fontIdentityIds.get(value);
+        if (!id) {
+            id = this.nextFontIdentityId++;
+            this.fontIdentityIds.set(value, id);
+        }
+        return id;
+    }
+    addBitmapTextComponent(changed) {
+        const component = changed.component;
+        // 创建样式副本，先不设置 fontFamily
+        const styleWithoutFont = this.processStyle(component.style);
+        const fontFamily = styleWithoutFont.fontFamily;
+        const waitsForFontResource = this.needsFontLoad(fontFamily);
+        if (waitsForFontResource)
+            delete styleWithoutFont.fontFamily;
+        const initialText = waitsForFontResource ? '' : component.text;
+        const bitmapText = new BitmapText$1(initialText, styleWithoutFont);
+        this.containerManager.getContainer(changed.gameObject.id).addChildAt(bitmapText, 0);
+        this.texts[changed.gameObject.id] = {
+            text: bitmapText,
+            component,
+            awaitingInitialFont: waitsForFontResource,
+        };
+        // 如果指定了字体资源，等待资源加载完成后设置 fontFamily
+        if (waitsForFontResource) {
+            return this.waitForFontResource(bitmapText, changed, fontFamily);
+        }
     }
     hasRegisteredFont(fontFamily) {
         var _a;
         if (!fontFamily)
             return false;
-        const fontName = Array.isArray(fontFamily) ? fontFamily[0] : fontFamily;
+        const fontName = this.getFontName(fontFamily);
         return ((_a = resource.resourcesMap[fontName]) === null || _a === void 0 ? void 0 : _a.type) === RESOURCE_TYPE.FONT;
     }
+    needsFontLoad(fontFamily) {
+        if (!this.hasRegisteredFont(fontFamily))
+            return false;
+        // Consult the current resource generation, not a name-based font cache.
+        // A completed FONT already has its face installed; yielding here would
+        // present an empty placeholder even when the application preloaded it.
+        return resource.resourcesMap[this.getFontName(fontFamily)].complete !== true;
+    }
+    getFontName(fontFamily) {
+        if (!fontFamily)
+            return undefined;
+        return Array.isArray(fontFamily) ? fontFamily[0] : fontFamily;
+    }
+    loadFontResource(fontFamily) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const fontName = this.getFontName(fontFamily);
+            if (!fontName || !this.hasRegisteredFont(fontFamily))
+                return false;
+            const expectedResource = resource.resourcesMap[fontName];
+            try {
+                const loaded = yield resource.getResource(fontName);
+                // Resource resolves {} on failure or cancellation. Only the completed
+                // resource generation we requested can safely replace visible glyphs.
+                return loaded === expectedResource && loaded.complete === true &&
+                    resource.resourcesMap[fontName] === expectedResource;
+            }
+            catch (error) {
+                console.warn(`字体资源 ${fontFamily} 加载失败:`, error);
+                return false;
+            }
+        });
+    }
     /**
      * 等待字体资源加载完成并更新文本
      */
     waitForFontResource(text, changed, fontFamily) {
+        var _a;
         return __awaiter(this, void 0, void 0, function* () {
             if (!fontFamily) {
                 return;
             }
-            try {
-                const fontName = Array.isArray(fontFamily) ? fontFamily[0] : fontFamily;
-                if (!this.hasRegisteredFont(fontFamily))
-                    return;
-                // 通过 resource 系统获取字体资源
-                const asyncId = this.increaseAsyncId(changed.gameObject.id);
-                yield 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);
+            const gameObjectId = changed.gameObject.id;
+            const fontName = this.getFontName(fontFamily);
+            if (!fontName || !this.hasRegisteredFont(fontFamily))
+                return;
+            const asyncId = this.increaseAsyncId(gameObjectId);
+            const loaded = yield this.loadFontResource(fontFamily);
+            const current = this.texts[gameObjectId];
+            if (!loaded || this.retired || changed.gameObject.destroyed ||
+                !this.validateAsyncId(gameObjectId, asyncId) ||
+                !current ||
+                current.text !== text ||
+                current.component !== changed.component) {
+                return;
             }
+            const currentFontFamily = (_a = current.component.style) === null || _a === void 0 ? void 0 : _a.fontFamily;
+            if (this.getFontName(currentFontFamily) !== fontName)
+                return;
+            // 字体资源加载成功后，设置 fontFamily 并重新设置文本内容以触发重新渲染
+            text.style.fontFamily = currentFontFamily;
+            current.awaitingInitialFont = false;
+            text.text = current.component.text;
         });
     }
     /**
      * 将 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;
+        const processed = this.cloneStyleValue(style);
+        // Preserve native v8 stroke options when merging v7 aliases. Zero is an
+        // intentional width update, not an absent value.
+        if (processed.strokeThickness != null || processed.lineJoin != null || processed.miterLimit != null) {
+            const stroke = processed.stroke;
+            const isOptions = stroke && typeof stroke === 'object' &&
+                ['color', 'width', 'fill', 'texture', 'join'].some(key => key in stroke);
+            const merged = isOptions ? Object.assign({}, stroke) : { color: stroke !== null && stroke !== void 0 ? stroke : 0x000000 };
+            if (processed.strokeThickness != null)
+                merged.width = processed.strokeThickness;
+            if (processed.lineJoin != null)
+                merged.join = processed.lineJoin;
+            if (processed.miterLimit != null)
+                merged.miterLimit = processed.miterLimit;
+            // Join-only defaults must not enable a previously disabled stroke.
+            if (stroke != null || processed.strokeThickness != null)
+                processed.stroke = merged;
+        }
+        delete processed.strokeThickness;
+        delete processed.lineJoin;
+        delete processed.miterLimit;
+        // Eva exposes an enabled switch; Pixi treats every shadow object as enabled.
+        // Normalize only the cloned style so toggling back preserves configuration.
+        if (processed.dropShadow && typeof processed.dropShadow === 'object' && !Array.isArray(processed.dropShadow)) {
+            if (processed.dropShadow.enabled === false)
+                processed.dropShadow = false;
+            else
+                delete processed.dropShadow.enabled;
         }
         // dropShadow*(v7 平铺 alias) -> dropShadow: { color, distance, angle, alpha, blur }
         // 关键:只有当存在任何 v7 平铺 alias 时才合并;否则保留 v8 嵌套对象(以及
@@ -799,60 +973,117 @@ let Text = class Text extends Renderer {
         delete processed.dropShadowAngle;
         delete processed.dropShadowAlpha;
         delete processed.dropShadowBlur;
-        // fill 数组 -> 取第一个值 (deprecated)
+        // Legacy fill is the color array; fillGradientStops contains offsets.
+        // Local coordinates keep the direction valid for any font size or bounds.
         if (Array.isArray(processed.fill)) {
-            processed.fill = processed.fill[0];
-        }
-        // fillGradientStops -> FillGradient 对象
-        if (Array.isArray(processed.fillGradientStops)) {
-            let fontSize;
-            if (processed.fontSize == null) {
-                fontSize = TextStyle.defaultTextStyle.fontSize;
-            }
-            else if (typeof processed.fontSize === 'string') {
-                fontSize = parseInt(processed.fontSize, 10);
+            const colors = processed.fill;
+            if (colors.length > 1) {
+                const supplied = processed.fillGradientStops;
+                const stops = Array.isArray(supplied) && supplied.length === colors.length
+                    ? supplied : colors.map((_, index) => index / (colors.length - 1));
+                const horizontal = processed.fillGradientType === 1;
+                const gradient = new FillGradient({
+                    start: { x: 0, y: 0 },
+                    end: horizontal ? { x: 1, y: 0 } : { x: 0, y: 1 },
+                    textureSpace: 'local',
+                });
+                colors.forEach((color, index) => {
+                    gradient.addColorStop(stops[index], Color.shared.setValue(color).toNumber());
+                });
+                processed.fill = { fill: gradient };
             }
             else {
-                fontSize = processed.fontSize;
+                processed.fill = colors[0];
             }
-            const gradientFill = new FillGradient(0, 0, 0, fontSize * 1.7);
-            const fills = processed.fillGradientStops.map((color) => 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;
         }
+        delete processed.fillGradientStops;
+        delete processed.fillGradientType;
         return processed;
     }
     change(changed) {
-        const { text, component } = this.texts[changed.gameObject.id];
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const current = this.texts[changed.gameObject.id];
+        const { text, component } = current;
         const isHTMLText = changed.componentName === 'HTMLText';
         if (changed.prop.prop[0] === 'text') {
-            text.text = component.text;
+            // First glyphs must not leak through the temporary default font while
+            // the registered font is loading. Already-visible text can still update.
+            if (!current.awaitingInitialFont)
+                text.text = component.text;
         }
         else if (changed.prop.prop[0] === 'style') {
             const processedStyle = this.processStyle(component.style);
-            if (this.hasRegisteredFont(processedStyle.fontFamily))
+            if (this.needsFontLoad(processedStyle.fontFamily))
                 delete processedStyle.fontFamily;
             Object.assign(text.style, processedStyle);
+            if (current.awaitingInitialFont && !this.needsFontLoad((_a = component.style) === null || _a === void 0 ? void 0 : _a.fontFamily)) {
+                current.awaitingInitialFont = false;
+                text.text = component.text;
+            }
         }
         else if (changed.prop.prop[0] === 'textureStyle' && isHTMLText) {
-            // HTMLText 纹理样式变化需要重新创建
+            // Sampling updates do not require destroying a visible HTMLText. Passing
+            // its observed component.style back to Pixi also allowed legacy style
+            // conversion to re-enter Eva's observer with a nested color object.
             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 HTMLText$1({
-                text: htmlComponent.text,
-                style: htmlComponent.style,
-                textureStyle: htmlComponent.textureStyle,
-            });
-            container.addChildAt(newText, index);
-            this.texts[changed.gameObject.id].text = newText;
+            const htmlText = text;
+            const _j = htmlComponent.textureStyle || {}, sampling = __rest(_j, ["resolution"]);
+            if (htmlText.textureStyle) {
+                const options = Object.assign(Object.assign({}, ((TextureStyle === null || TextureStyle === void 0 ? void 0 : TextureStyle.defaultOptions) || { addressMode: 'clamp-to-edge', scaleMode: 'linear' })), sampling);
+                htmlText.textureStyle.addressMode = options.addressMode;
+                htmlText.textureStyle.scaleMode = options.scaleMode;
+                Object.assign(htmlText.textureStyle, {
+                    addressModeU: (_b = options.addressModeU) !== null && _b !== void 0 ? _b : options.addressMode,
+                    addressModeV: (_c = options.addressModeV) !== null && _c !== void 0 ? _c : options.addressMode,
+                    addressModeW: (_d = options.addressModeW) !== null && _d !== void 0 ? _d : options.addressMode,
+                    magFilter: (_e = options.magFilter) !== null && _e !== void 0 ? _e : options.scaleMode,
+                    minFilter: (_f = options.minFilter) !== null && _f !== void 0 ? _f : options.scaleMode,
+                    mipmapFilter: (_g = options.mipmapFilter) !== null && _g !== void 0 ? _g : options.scaleMode,
+                    lodMinClamp: options.lodMinClamp, lodMaxClamp: options.lodMaxClamp,
+                    compare: options.compare, maxAnisotropy: (_h = options.maxAnisotropy) !== null && _h !== void 0 ? _h : 1,
+                });
+                htmlText.textureStyle.update();
+            }
+            else {
+                htmlText.textureStyle = new TextureStyle(sampling);
+            }
+            this.applyHTMLResolution(htmlText, htmlComponent, changed);
+        }
+    }
+    applyHTMLResolution(text, component, changed) {
+        var _a, _b, _c, _d;
+        // Render's explicit resolution remains authoritative, including when HTML
+        // mounts after an asynchronous font load and misses Render's ADD callback.
+        const render = (_b = (_a = changed.gameObject).getComponent) === null || _b === void 0 ? void 0 : _b.call(_a, 'Render');
+        const resolution = (_c = render === null || render === void 0 ? void 0 : render.resolution) !== null && _c !== void 0 ? _c : (_d = component.textureStyle) === null || _d === void 0 ? void 0 : _d.resolution;
+        if (typeof resolution === 'number' && Number.isFinite(resolution) && resolution > 0 && text.resolution !== resolution) {
+            text.resolution = resolution;
+        }
+        else if (resolution == null) {
+            text.resolution = null;
+        }
+    }
+    onDestroy() {
+        var _a, _b;
+        this.retired = true;
+        for (const id of Object.keys(this.asyncIdMap))
+            this.increaseAsyncId(Number(id));
+        this.pendingHTMLTextComponents = {};
+        for (const { text } of Object.values(this.texts)) {
+            (_a = text.parent) === null || _a === void 0 ? void 0 : _a.removeChild(text);
+            if (!text.destroyed)
+                (_b = text.destroy) === null || _b === void 0 ? void 0 : _b.call(text, { children: true });
+        }
+        this.texts = {};
+    }
+    cloneStyleValue(value) {
+        if (Array.isArray(value))
+            return value.map(item => this.cloneStyleValue(item));
+        if (value && Object.getPrototypeOf(value) === Object.prototype) {
+            return Object.fromEntries(Object.entries(value).map(([key, child]) => [key, this.cloneStyleValue(child)]));
         }
+        // Preserve class-based Pixi fills/gradients/textures; clone plain component data.
+        return value;
     }
     setSize(changed) {
         const { transform } = changed.gameObject;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eva/plugin-renderer-text",
-  "version": "2.1.0-beta.14",
+  "version": "2.1.0-beta.15",
   "description": "@eva/plugin-renderer-text",
   "main": "index.js",
   "module": "dist/plugin-renderer-text.esm.js",
@@ -19,9 +19,9 @@
   "homepage": "https://eva.js.org",
   "dependencies": {
     "@eva/inspector-decorator": "^2.0.0-beta.0",
-    "@eva/plugin-renderer": "2.1.0-beta.14",
-    "@eva/renderer-adapter": "2.1.0-beta.14",
-    "@eva/eva.js": "2.1.0-beta.14",
-    "pixi.js": "^8.17.0"
+    "@eva/plugin-renderer": "2.1.0-beta.15",
+    "@eva/renderer-adapter": "2.1.0-beta.15",
+    "@eva/eva.js": "2.1.0-beta.15",
+    "pixi.js": "8.19.0"
   }
 }