@eva/plugin-renderer-text 2.0.1-beta.19 → 2.0.1-beta.20

package/dist/EVA.plugin.renderer.text.js

@@ -81,6 +81,30 @@ var _EVA_IIFE_text = function (exports, pixi_js, eva_js, pluginRenderer, rendere
   }
   Text$2.componentName = 'Text';
   __decorate([type('string')], Text$2.prototype, "text", void 0);
+  class HTMLText extends eva_js.Component {
+    constructor() {
+      super(...arguments);
+      this.text = '';
+      this.style = {};
+      this.textureStyle = {};
+    }
+    init(obj) {
+      this.style = _extends({
+        fontSize: 24,
+        fill: '#000000',
+        fontFamily: 'Arial'
+      }, obj === null || obj === void 0 ? void 0 : obj.style);
+      this.textureStyle = _extends({
+        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([type('string')], HTMLText.prototype, "text", void 0);
   let Text = class Text extends pluginRenderer.Renderer {
     constructor() {
       super(...arguments);
@@ -93,21 +117,14 @@ var _EVA_IIFE_text = function (exports, pixi_js, eva_js, pluginRenderer, rendere
     }
     componentChanged(changed) {
       return __awaiter(this, void 0, void 0, function* () {
-        if (changed.componentName !== 'Text') return;
+        const isText = changed.componentName === 'Text';
+        const isHTMLText = changed.componentName === 'HTMLText';
+        if (!isText && !isHTMLText) return;
         if (changed.type === eva_js.OBSERVER_TYPE.ADD) {
-          const component = changed.component;
-          const styleWithoutFont = _extends({}, component.style);
-          const fontFamily = styleWithoutFont.fontFamily;
-          delete styleWithoutFont.fontFamily;
-          const text = new rendererAdapter.Text(component.text, styleWithoutFont);
-          this.containerManager.getContainer(changed.gameObject.id).addChildAt(text, 0);
-          this.texts[changed.gameObject.id] = {
-            text,
-            component: changed.component
-          };
-          this.setSize(changed);
-          if (fontFamily) {
-            yield this.waitForFontResource(text, changed, fontFamily);
+          if (isText) {
+            yield this.addTextComponent(changed);
+          } else {
+            yield this.addHTMLTextComponent(changed);
           }
         } else if (changed.type === eva_js.OBSERVER_TYPE.REMOVE) {
           this.containerManager.getContainer(changed.gameObject.id).removeChild(this.texts[changed.gameObject.id].text);
@@ -128,6 +145,47 @@ var _EVA_IIFE_text = function (exports, pixi_js, eva_js, pluginRenderer, rendere
         }
       });
     }
+    addTextComponent(changed) {
+      return __awaiter(this, void 0, void 0, function* () {
+        const component = changed.component;
+        const styleWithoutFont = _extends({}, component.style);
+        const fontFamily = styleWithoutFont.fontFamily;
+        delete styleWithoutFont.fontFamily;
+        const text = new rendererAdapter.Text(component.text, styleWithoutFont);
+        this.containerManager.getContainer(changed.gameObject.id).addChildAt(text, 0);
+        this.texts[changed.gameObject.id] = {
+          text,
+          component
+        };
+        this.setSize(changed);
+        if (fontFamily) {
+          yield this.waitForFontResource(text, changed, fontFamily);
+        }
+      });
+    }
+    addHTMLTextComponent(changed) {
+      return __awaiter(this, void 0, void 0, function* () {
+        const component = changed.component;
+        const styleWithoutFont = _extends({}, component.style);
+        const fontFamily = styleWithoutFont.fontFamily;
+        delete styleWithoutFont.fontFamily;
+        const htmlText = new rendererAdapter.HTMLText(_extends({
+          text: component.text,
+          style: styleWithoutFont
+        }, component.textureStyle && {
+          textureStyle: component.textureStyle
+        }));
+        this.containerManager.getContainer(changed.gameObject.id).addChildAt(htmlText, 0);
+        this.texts[changed.gameObject.id] = {
+          text: htmlText,
+          component
+        };
+        this.setSize(changed);
+        if (fontFamily) {
+          yield this.waitForFontResource(htmlText, changed, fontFamily);
+        }
+      });
+    }
     waitForFontResource(text, changed, fontFamily) {
       return __awaiter(this, void 0, void 0, function* () {
         if (!fontFamily) {
@@ -150,10 +208,26 @@ var _EVA_IIFE_text = function (exports, pixi_js, eva_js, pluginRenderer, rendere
         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') {
-        _extends(text.style, changed.component.style);
+        _extends(text.style, component.style);
+      } else if (changed.prop.prop[0] === 'textureStyle' && isHTMLText) {
+        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) {
@@ -170,9 +244,17 @@ var _EVA_IIFE_text = function (exports, pixi_js, eva_js, pluginRenderer, rendere
     Text: ['text', {
       prop: ['style'],
       deep: true
+    }],
+    HTMLText: ['text', {
+      prop: ['style'],
+      deep: true
+    }, {
+      prop: ['textureStyle'],
+      deep: true
     }]
   })], Text);
   var Text$1 = Text;
+  exports.HTMLText = HTMLText;
   exports.Text = Text$2;
   exports.TextSystem = Text$1;
   Object.defineProperty(exports, '__esModule', {

package/dist/EVA.plugin.renderer.text.min.js

@@ -1 +1 @@
-function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},_extends.apply(null,arguments)}globalThis.EVA=globalThis.EVA||{},globalThis.EVA.plugin=globalThis.EVA.plugin||{},globalThis.EVA.plugin.renderer=globalThis.EVA.plugin.renderer||{};var _EVA_IIFE_text=function(e,t,n,r,s){"use strict";function i(e,t,n,r){var s,i=arguments.length,o=i<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,n):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,n,r);else for(var c=e.length-1;c>=0;c--)(s=e[c])&&(o=(i<3?s(o):i>3?s(t,n,o):s(t,n))||o);return i>3&&o&&Object.defineProperty(t,n,o),o}function o(e,t,n,r){return new(n||(n=Promise))((function(s,i){function o(e){try{a(r.next(e))}catch(e){i(e)}}function c(e){try{a(r.throw(e))}catch(e){i(e)}}function a(e){var t;e.done?s(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(o,c)}a((r=r.apply(e,t||[])).next())}))}class c extends n.Component{constructor(){super(...arguments),this.text="",this.style={}}init(e){const n=new t.TextStyle({fontSize:20}),r={};for(const e in n)0===e.indexOf("_")&&(r[e.substring(1)]=n[e]);delete r.styleKey,this.style=r,e&&(this.text=e.text,_extends(this.style,e.style))}}c.componentName="Text",i([function(e){return function(t,n){var r=function(e,t){return e.constructor.IDEProps||(e.constructor.IDEProps={}),e.constructor.IDEProps[t]||(e.constructor.IDEProps[t]={}),e.constructor.IDEProps[t]}(t,n);r.key=n,r.type=e}}("string")],c.prototype,"text",void 0);let a=class extends r.Renderer{constructor(){super(...arguments),this.name="Text",this.texts={}}init(){this.renderSystem=this.game.getSystem(r.RendererSystem),this.renderSystem.rendererManager.register(this)}componentChanged(e){return o(this,void 0,void 0,(function*(){if("Text"===e.componentName)if(e.type===n.OBSERVER_TYPE.ADD){const t=e.component,n=_extends({},t.style),r=n.fontFamily;delete n.fontFamily;const i=new s.Text(t.text,n);this.containerManager.getContainer(e.gameObject.id).addChildAt(i,0),this.texts[e.gameObject.id]={text:i,component:e.component},this.setSize(e),r&&(yield this.waitForFontResource(i,e,r))}else if(e.type===n.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),this.setSize(e);const t=e.component;if("style"===e.prop.prop[0]&&t.style&&t.style.fontFamily){const{text:n}=this.texts[e.gameObject.id];yield this.waitForFontResource(n,e,t.style.fontFamily)}}}))}waitForFontResource(e,t,r){return o(this,void 0,void 0,(function*(){if(r)try{const s=Array.isArray(r)?r[0]:r,i=this.increaseAsyncId(t.gameObject.id);if(yield n.resource.getResource(s),!this.validateAsyncId(t.gameObject.id,i))return;e.style.fontFamily=r,this.setSize(t)}catch(e){console.warn(`字体资源 ${r} 加载失败:`,e)}}))}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]&&_extends(t.style,e.component.style)}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=i([n.decorators.componentObserver({Text:["text",{prop:["style"],deep:!0}]})],a);var l=a;return e.Text=c,e.TextSystem=l,Object.defineProperty(e,"__esModule",{value:!0}),e}({},PIXI,EVA,EVA.plugin.renderer,EVA.rendererAdapter);globalThis.EVA.plugin.renderer.text=globalThis.EVA.plugin.renderer.text||_EVA_IIFE_text;
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)({}).hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},_extends.apply(null,arguments)}globalThis.EVA=globalThis.EVA||{},globalThis.EVA.plugin=globalThis.EVA.plugin||{},globalThis.EVA.plugin.renderer=globalThis.EVA.plugin.renderer||{};var _EVA_IIFE_text=function(t,e,n,i,o){"use strict";function s(t,e,n,i){var o,s=arguments.length,r=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,n,i);else for(var c=t.length-1;c>=0;c--)(o=t[c])&&(r=(s<3?o(r):s>3?o(e,n,r):o(e,n))||r);return s>3&&r&&Object.defineProperty(e,n,r),r}function r(t,e,n,i){return new(n||(n=Promise))((function(o,s){function r(t){try{l(i.next(t))}catch(t){s(t)}}function c(t){try{l(i.throw(t))}catch(t){s(t)}}function l(t){var e;t.done?o(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(r,c)}l((i=i.apply(t,e||[])).next())}))}function c(t){return function(e,n){var i=function(t,e){return t.constructor.IDEProps||(t.constructor.IDEProps={}),t.constructor.IDEProps[e]||(t.constructor.IDEProps[e]={}),t.constructor.IDEProps[e]}(e,n);i.key=n,i.type=t}}class l extends n.Component{constructor(){super(...arguments),this.text="",this.style={}}init(t){const n=new e.TextStyle({fontSize:20}),i={};for(const t in n)0===t.indexOf("_")&&(i[t.substring(1)]=n[t]);delete i.styleKey,this.style=i,t&&(this.text=t.text,_extends(this.style,t.style))}}l.componentName="Text",s([c("string")],l.prototype,"text",void 0);class a extends n.Component{constructor(){super(...arguments),this.text="",this.style={},this.textureStyle={}}init(t){this.style=_extends({fontSize:24,fill:"#000000",fontFamily:"Arial"},null==t?void 0:t.style),this.textureStyle=_extends({scaleMode:"linear",resolution:window.devicePixelRatio||1},null==t?void 0:t.textureStyle),t&&(this.text=t.text)}}a.componentName="HTMLText",s([c("string")],a.prototype,"text",void 0);let d=class extends i.Renderer{constructor(){super(...arguments),this.name="Text",this.texts={}}init(){this.renderSystem=this.game.getSystem(i.RendererSystem),this.renderSystem.rendererManager.register(this)}componentChanged(t){return r(this,void 0,void 0,(function*(){const e="Text"===t.componentName,i="HTMLText"===t.componentName;if(e||i)if(t.type===n.OBSERVER_TYPE.ADD)e?yield this.addTextComponent(t):yield this.addHTMLTextComponent(t);else if(t.type===n.OBSERVER_TYPE.REMOVE)this.containerManager.getContainer(t.gameObject.id).removeChild(this.texts[t.gameObject.id].text),this.texts[t.gameObject.id].text.destroy({children:!0}),delete this.texts[t.gameObject.id];else{this.change(t),this.setSize(t);const e=t.component;if("style"===t.prop.prop[0]&&e.style&&e.style.fontFamily){const{text:n}=this.texts[t.gameObject.id];yield this.waitForFontResource(n,t,e.style.fontFamily)}}}))}addTextComponent(t){return r(this,void 0,void 0,(function*(){const e=t.component,n=_extends({},e.style),i=n.fontFamily;delete n.fontFamily;const s=new o.Text(e.text,n);this.containerManager.getContainer(t.gameObject.id).addChildAt(s,0),this.texts[t.gameObject.id]={text:s,component:e},this.setSize(t),i&&(yield this.waitForFontResource(s,t,i))}))}addHTMLTextComponent(t){return r(this,void 0,void 0,(function*(){const e=t.component,n=_extends({},e.style),i=n.fontFamily;delete n.fontFamily;const s=new o.HTMLText(_extends({text:e.text,style:n},e.textureStyle&&{textureStyle:e.textureStyle}));this.containerManager.getContainer(t.gameObject.id).addChildAt(s,0),this.texts[t.gameObject.id]={text:s,component:e},this.setSize(t),i&&(yield this.waitForFontResource(s,t,i))}))}waitForFontResource(t,e,i){return r(this,void 0,void 0,(function*(){if(i)try{const o=Array.isArray(i)?i[0]:i,s=this.increaseAsyncId(e.gameObject.id);if(yield n.resource.getResource(o),!this.validateAsyncId(e.gameObject.id,s))return;t.style.fontFamily=i,this.setSize(e)}catch(t){console.warn(`字体资源 ${i} 加载失败:`,t)}}))}change(t){const{text:e,component:n}=this.texts[t.gameObject.id],i="HTMLText"===t.componentName;if("text"===t.prop.prop[0])e.text=n.text;else if("style"===t.prop.prop[0])_extends(e.style,n.style);else if("textureStyle"===t.prop.prop[0]&&i){const i=n,s=this.containerManager.getContainer(t.gameObject.id),r=s.getChildIndex(e);s.removeChild(e),e.destroy({children:!0});const c=new o.HTMLText({text:i.text,style:i.style,textureStyle:i.textureStyle});s.addChildAt(c,r),this.texts[t.gameObject.id].text=c}}setSize(t){const{transform:e}=t.gameObject;e&&(e.size.width=this.texts[t.gameObject.id].text.width,e.size.height=this.texts[t.gameObject.id].text.height)}};d.systemName="Text",d=s([n.decorators.componentObserver({Text:["text",{prop:["style"],deep:!0}],HTMLText:["text",{prop:["style"],deep:!0},{prop:["textureStyle"],deep:!0}]})],d);var x=d;return t.HTMLText=a,t.Text=l,t.TextSystem=x,Object.defineProperty(t,"__esModule",{value:!0}),t}({},PIXI,EVA,EVA.plugin.renderer,EVA.rendererAdapter);globalThis.EVA.plugin.renderer.text=globalThis.EVA.plugin.renderer.text||_EVA_IIFE_text;

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

@@ -68,6 +68,26 @@ __decorate([
     inspectorDecorator.type('string')
 ], Text$2.prototype, "text", void 0);
 
+class HTMLText extends eva_js.Component {
+    constructor() {
+        super(...arguments);
+        this.text = '';
+        this.style = {};
+        this.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,22 +100,16 @@ 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';
+            if (!isText && !isHTMLText)
                 return;
             if (changed.type === eva_js.OBSERVER_TYPE.ADD) {
-                const component = changed.component;
-                const styleWithoutFont = Object.assign({}, component.style);
-                const fontFamily = styleWithoutFont.fontFamily;
-                delete styleWithoutFont.fontFamily;
-                const text = new rendererAdapter.Text(component.text, styleWithoutFont);
-                this.containerManager.getContainer(changed.gameObject.id).addChildAt(text, 0);
-                this.texts[changed.gameObject.id] = {
-                    text,
-                    component: changed.component,
-                };
-                this.setSize(changed);
-                if (fontFamily) {
-                    yield this.waitForFontResource(text, changed, fontFamily);
+                if (isText) {
+                    yield this.addTextComponent(changed);
+                }
+                else {
+                    yield this.addHTMLTextComponent(changed);
                 }
             }
             else if (changed.type === eva_js.OBSERVER_TYPE.REMOVE) {
@@ -114,6 +128,42 @@ let Text = class Text extends pluginRenderer.Renderer {
             }
         });
     }
+    addTextComponent(changed) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const component = changed.component;
+            const styleWithoutFont = Object.assign({}, component.style);
+            const fontFamily = styleWithoutFont.fontFamily;
+            delete styleWithoutFont.fontFamily;
+            const text = new rendererAdapter.Text(component.text, styleWithoutFont);
+            this.containerManager.getContainer(changed.gameObject.id).addChildAt(text, 0);
+            this.texts[changed.gameObject.id] = {
+                text,
+                component,
+            };
+            this.setSize(changed);
+            if (fontFamily) {
+                yield this.waitForFontResource(text, changed, fontFamily);
+            }
+        });
+    }
+    addHTMLTextComponent(changed) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const component = changed.component;
+            const styleWithoutFont = Object.assign({}, component.style);
+            const fontFamily = styleWithoutFont.fontFamily;
+            delete styleWithoutFont.fontFamily;
+            const htmlText = new rendererAdapter.HTMLText(Object.assign({ text: component.text, style: styleWithoutFont }, (component.textureStyle && { textureStyle: component.textureStyle })));
+            this.containerManager.getContainer(changed.gameObject.id).addChildAt(htmlText, 0);
+            this.texts[changed.gameObject.id] = {
+                text: htmlText,
+                component,
+            };
+            this.setSize(changed);
+            if (fontFamily) {
+                yield this.waitForFontResource(htmlText, changed, fontFamily);
+            }
+        });
+    }
     waitForFontResource(text, changed, fontFamily) {
         return __awaiter(this, void 0, void 0, function* () {
             if (!fontFamily) {
@@ -135,11 +185,26 @@ let Text = class Text extends pluginRenderer.Renderer {
     }
     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);
+            Object.assign(text.style, component.style);
+        }
+        else if (changed.prop.prop[0] === 'textureStyle' && isHTMLText) {
+            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) {
@@ -154,9 +219,11 @@ 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 }],
     })
 ], Text);
 var Text$1 = Text;
 
+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"),s=require("@eva/inspector-decorator"),i=require("@eva/plugin-renderer"),n=require("@eva/renderer-adapter");
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("pixi.js"),t=require("@eva/eva.js"),i=require("@eva/inspector-decorator"),n=require("@eva/plugin-renderer"),s=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,s,i){var n,r=arguments.length,o=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,s,i);else for(var c=e.length-1;c>=0;c--)(n=e[c])&&(o=(r<3?n(o):r>3?n(t,s,o):n(t,s))||o);return r>3&&o&&Object.defineProperty(t,s,o),o}function o(e,t,s,i){return new(s||(s=Promise))((function(n,r){function o(e){try{a(i.next(e))}catch(e){r(e)}}function c(e){try{a(i.throw(e))}catch(e){r(e)}}function a(e){e.done?n(e.value):new s((function(t){t(e.value)})).then(o,c)}a((i=i.apply(e,t||[])).next())}))}class c extends t.Component{constructor(){super(...arguments),this.text="",this.style={}}init(t){const s=new e.TextStyle({fontSize:20}),i={};for(const e in s)0===e.indexOf("_")&&(i[e.substring(1)]=s[e]);delete i.styleKey,this.style=i,t&&(this.text=t.text,Object.assign(this.style,t.style))}}c.componentName="Text",r([s.type("string")],c.prototype,"text",void 0);let a=class extends i.Renderer{constructor(){super(...arguments),this.name="Text",this.texts={}}init(){this.renderSystem=this.game.getSystem(i.RendererSystem),this.renderSystem.rendererManager.register(this)}componentChanged(e){return o(this,void 0,void 0,(function*(){if("Text"===e.componentName)if(e.type===t.OBSERVER_TYPE.ADD){const t=e.component,s=Object.assign({},t.style),i=s.fontFamily;delete s.fontFamily;const r=new n.Text(t.text,s);this.containerManager.getContainer(e.gameObject.id).addChildAt(r,0),this.texts[e.gameObject.id]={text:r,component:e.component},this.setSize(e),i&&(yield this.waitForFontResource(r,e,i))}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),this.setSize(e);const t=e.component;if("style"===e.prop.prop[0]&&t.style&&t.style.fontFamily){const{text:s}=this.texts[e.gameObject.id];yield this.waitForFontResource(s,e,t.style.fontFamily)}}}))}waitForFontResource(e,s,i){return o(this,void 0,void 0,(function*(){if(i)try{const n=Array.isArray(i)?i[0]:i,r=this.increaseAsyncId(s.gameObject.id);if(yield t.resource.getResource(n),!this.validateAsyncId(s.gameObject.id,r))return;e.style.fontFamily=i,this.setSize(s)}catch(e){console.warn(`字体资源 ${i} 加载失败:`,e)}}))}change(e){const{text:t,component:s}=this.texts[e.gameObject.id];"text"===e.prop.prop[0]?t.text=s.text:"style"===e.prop.prop[0]&&Object.assign(t.style,e.component.style)}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 d=a;exports.Text=c,exports.TextSystem=d;
+function o(e,t,i,n){var s,o=arguments.length,r=o<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,n);else for(var c=e.length-1;c>=0;c--)(s=e[c])&&(r=(o<3?s(r):o>3?s(t,i,r):s(t,i))||r);return o>3&&r&&Object.defineProperty(t,i,r),r}function r(e,t,i,n){return new(i||(i=Promise))((function(s,o){function r(e){try{a(n.next(e))}catch(e){o(e)}}function c(e){try{a(n.throw(e))}catch(e){o(e)}}function a(e){e.done?s(e.value):new i((function(t){t(e.value)})).then(r,c)}a((n=n.apply(e,t||[])).next())}))}class c extends t.Component{constructor(){super(...arguments),this.text="",this.style={}}init(t){const i=new e.TextStyle({fontSize:20}),n={};for(const e in i)0===e.indexOf("_")&&(n[e.substring(1)]=i[e]);delete n.styleKey,this.style=n,t&&(this.text=t.text,Object.assign(this.style,t.style))}}c.componentName="Text",o([i.type("string")],c.prototype,"text",void 0);class a extends t.Component{constructor(){super(...arguments),this.text="",this.style={},this.textureStyle={}}init(e){this.style=Object.assign({fontSize:24,fill:"#000000",fontFamily:"Arial"},null==e?void 0:e.style),this.textureStyle=Object.assign({scaleMode:"linear",resolution:window.devicePixelRatio||1},null==e?void 0:e.textureStyle),e&&(this.text=e.text)}}a.componentName="HTMLText",o([i.type("string")],a.prototype,"text",void 0);let d=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 i="Text"===e.componentName,n="HTMLText"===e.componentName;if(i||n)if(e.type===t.OBSERVER_TYPE.ADD)i?yield this.addTextComponent(e):yield this.addHTMLTextComponent(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),this.setSize(e);const t=e.component;if("style"===e.prop.prop[0]&&t.style&&t.style.fontFamily){const{text:i}=this.texts[e.gameObject.id];yield this.waitForFontResource(i,e,t.style.fontFamily)}}}))}addTextComponent(e){return r(this,void 0,void 0,(function*(){const t=e.component,i=Object.assign({},t.style),n=i.fontFamily;delete i.fontFamily;const o=new s.Text(t.text,i);this.containerManager.getContainer(e.gameObject.id).addChildAt(o,0),this.texts[e.gameObject.id]={text:o,component:t},this.setSize(e),n&&(yield this.waitForFontResource(o,e,n))}))}addHTMLTextComponent(e){return r(this,void 0,void 0,(function*(){const t=e.component,i=Object.assign({},t.style),n=i.fontFamily;delete i.fontFamily;const o=new s.HTMLText(Object.assign({text:t.text,style:i},t.textureStyle&&{textureStyle:t.textureStyle}));this.containerManager.getContainer(e.gameObject.id).addChildAt(o,0),this.texts[e.gameObject.id]={text:o,component:t},this.setSize(e),n&&(yield this.waitForFontResource(o,e,n))}))}waitForFontResource(e,i,n){return r(this,void 0,void 0,(function*(){if(n)try{const s=Array.isArray(n)?n[0]:n,o=this.increaseAsyncId(i.gameObject.id);if(yield t.resource.getResource(s),!this.validateAsyncId(i.gameObject.id,o))return;e.style.fontFamily=n,this.setSize(i)}catch(e){console.warn(`字体资源 ${n} 加载失败:`,e)}}))}change(e){const{text:t,component:i}=this.texts[e.gameObject.id],n="HTMLText"===e.componentName;if("text"===e.prop.prop[0])t.text=i.text;else if("style"===e.prop.prop[0])Object.assign(t.style,i.style);else if("textureStyle"===e.prop.prop[0]&&n){const n=i,o=this.containerManager.getContainer(e.gameObject.id),r=o.getChildIndex(t);o.removeChild(t),t.destroy({children:!0});const c=new s.HTMLText({text:n.text,style:n.style,textureStyle:n.textureStyle});o.addChildAt(c,r),this.texts[e.gameObject.id].text=c}}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)}};d.systemName="Text",d=o([t.decorators.componentObserver({Text:["text",{prop:["style"],deep:!0}],HTMLText:["text",{prop:["style"],deep:!0},{prop:["textureStyle"],deep:!0}]})],d);var l=d;exports.HTMLText=a,exports.Text=c,exports.TextSystem=l;

package/dist/plugin-renderer-text.d.ts

@@ -1,6 +1,7 @@
 import { Component } from '@eva/eva.js';
 import { ComponentChanged } from '@eva/eva.js';
 import { ContainerManager } from '@eva/plugin-renderer';
+import { HTMLText as HTMLText_2 } from '@eva/renderer-adapter';
 import { Renderer } from '@eva/plugin-renderer';
 import { RendererManager } from '@eva/plugin-renderer';
 import { RendererSystem } from '@eva/plugin-renderer';
@@ -12,6 +13,53 @@ import { TextStyleFontWeight } from 'pixi.js';
 import { TextStyleTextBaseline } from 'pixi.js';
 import { TextStyleWhiteSpace } from 'pixi.js';
 
+export declare class HTMLText extends Component<HTMLTextParams> {
+    static componentName: string;
+    text: string;
+    style: HTMLTextParams['style'];
+    textureStyle: HTMLTextParams['textureStyle'];
+    init(obj?: HTMLTextParams): void;
+}
+
+export declare interface HTMLTextParams {
+    text: string;
+    style?: HTMLTextStyleOptions & {
+        cssOverrides?: string[];
+        wordWrap?: boolean;
+        wordWrapWidth?: number;
+        tagStyles?: Record<string, HTMLTextStyleOptions>;
+    };
+    textureStyle?: {
+        scaleMode?: 'linear' | 'nearest';
+        resolution?: number;
+    };
+}
+
+declare interface HTMLTextStyleOptions {
+    fontFamily?: string | string[];
+    fontSize?: number | string;
+    fill?: string | number;
+    align?: 'left' | 'center' | 'right' | 'justify';
+    breakWords?: boolean;
+    letterSpacing?: number;
+    lineHeight?: number;
+    padding?: number;
+    stroke?: string | number;
+    strokeThickness?: number;
+    dropShadow?: boolean;
+    dropShadowAlpha?: number;
+    dropShadowAngle?: number;
+    dropShadowBlur?: number;
+    dropShadowColor?: string | number;
+    dropShadowDistance?: number;
+    trim?: boolean;
+    fontWeight?: string;
+    fontStyle?: string;
+    fontVariant?: string;
+    textBaseline?: string;
+    whiteSpace?: string;
+}
+
 declare class Text_2 extends Component<TextParams> {
     static componentName: string;
     text: string;
@@ -60,8 +108,8 @@ export declare class TextSystem extends Renderer {
     name: string;
     texts: {
         [propName: number]: {
-            text: Text_3;
-            component: Text_2;
+            text: Text_3 | HTMLText_2;
+            component: Text_2 | HTMLText;
         };
     };
     renderSystem: RendererSystem;
@@ -69,6 +117,8 @@ export declare class TextSystem extends Renderer {
     containerManager: ContainerManager;
     init(): void;
     componentChanged(changed: ComponentChanged): Promise<void>;
+    private addTextComponent;
+    private addHTMLTextComponent;
     private waitForFontResource;
     change(changed: ComponentChanged): void;
     setSize(changed: ComponentChanged): void;

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

@@ -2,7 +2,7 @@ import { TextStyle } from 'pixi.js';
 import { Component, decorators, OBSERVER_TYPE, resource } from '@eva/eva.js';
 import { type } from '@eva/inspector-decorator';
 import { Renderer, RendererSystem } from '@eva/plugin-renderer';
-import { Text as Text$3 } from '@eva/renderer-adapter';
+import { HTMLText as HTMLText$1, Text as Text$3 } from '@eva/renderer-adapter';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation. All rights reserved.
@@ -64,6 +64,26 @@ __decorate([
     type('string')
 ], Text$2.prototype, "text", void 0);
 
+class HTMLText extends Component {
+    constructor() {
+        super(...arguments);
+        this.text = '';
+        this.style = {};
+        this.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([
+    type('string')
+], HTMLText.prototype, "text", void 0);
+
 let Text = class Text extends Renderer {
     constructor() {
         super(...arguments);
@@ -76,22 +96,16 @@ let Text = class Text extends 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';
+            if (!isText && !isHTMLText)
                 return;
             if (changed.type === OBSERVER_TYPE.ADD) {
-                const component = changed.component;
-                const styleWithoutFont = Object.assign({}, component.style);
-                const fontFamily = styleWithoutFont.fontFamily;
-                delete styleWithoutFont.fontFamily;
-                const text = new Text$3(component.text, styleWithoutFont);
-                this.containerManager.getContainer(changed.gameObject.id).addChildAt(text, 0);
-                this.texts[changed.gameObject.id] = {
-                    text,
-                    component: changed.component,
-                };
-                this.setSize(changed);
-                if (fontFamily) {
-                    yield this.waitForFontResource(text, changed, fontFamily);
+                if (isText) {
+                    yield this.addTextComponent(changed);
+                }
+                else {
+                    yield this.addHTMLTextComponent(changed);
                 }
             }
             else if (changed.type === OBSERVER_TYPE.REMOVE) {
@@ -110,6 +124,42 @@ let Text = class Text extends Renderer {
             }
         });
     }
+    addTextComponent(changed) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const component = changed.component;
+            const styleWithoutFont = Object.assign({}, component.style);
+            const fontFamily = styleWithoutFont.fontFamily;
+            delete styleWithoutFont.fontFamily;
+            const text = new Text$3(component.text, styleWithoutFont);
+            this.containerManager.getContainer(changed.gameObject.id).addChildAt(text, 0);
+            this.texts[changed.gameObject.id] = {
+                text,
+                component,
+            };
+            this.setSize(changed);
+            if (fontFamily) {
+                yield this.waitForFontResource(text, changed, fontFamily);
+            }
+        });
+    }
+    addHTMLTextComponent(changed) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const component = changed.component;
+            const styleWithoutFont = Object.assign({}, component.style);
+            const fontFamily = styleWithoutFont.fontFamily;
+            delete styleWithoutFont.fontFamily;
+            const htmlText = new HTMLText$1(Object.assign({ text: component.text, style: styleWithoutFont }, (component.textureStyle && { textureStyle: component.textureStyle })));
+            this.containerManager.getContainer(changed.gameObject.id).addChildAt(htmlText, 0);
+            this.texts[changed.gameObject.id] = {
+                text: htmlText,
+                component,
+            };
+            this.setSize(changed);
+            if (fontFamily) {
+                yield this.waitForFontResource(htmlText, changed, fontFamily);
+            }
+        });
+    }
     waitForFontResource(text, changed, fontFamily) {
         return __awaiter(this, void 0, void 0, function* () {
             if (!fontFamily) {
@@ -131,11 +181,26 @@ let Text = class Text extends Renderer {
     }
     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);
+            Object.assign(text.style, component.style);
+        }
+        else if (changed.prop.prop[0] === 'textureStyle' && isHTMLText) {
+            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;
         }
     }
     setSize(changed) {
@@ -150,8 +215,9 @@ Text.systemName = 'Text';
 Text = __decorate([
     decorators.componentObserver({
         Text: ['text', { prop: ['style'], deep: true }],
+        HTMLText: ['text', { prop: ['style'], deep: true }, { prop: ['textureStyle'], deep: true }],
     })
 ], Text);
 var Text$1 = Text;
 
-export { Text$2 as Text, Text$1 as TextSystem };
+export { HTMLText, Text$2 as Text, Text$1 as TextSystem };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eva/plugin-renderer-text",
-  "version": "2.0.1-beta.19",
+  "version": "2.0.1-beta.20",
   "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": "^0.0.5",
-    "@eva/plugin-renderer": "2.0.1-beta.19",
-    "@eva/renderer-adapter": "2.0.1-beta.19",
-    "@eva/eva.js": "2.0.1-beta.19",
+    "@eva/plugin-renderer": "2.0.1-beta.20",
+    "@eva/renderer-adapter": "2.0.1-beta.20",
+    "@eva/eva.js": "2.0.1-beta.20",
     "pixi.js": "^8.8.1"
   }
 }