@eva/plugin-renderer-text 2.0.1-beta.4 → 2.0.1-beta.40

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

@@ -2,7 +2,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 globalThis.EVA = globalThis.EVA || {};
 globalThis.EVA.plugin = globalThis.EVA.plugin || {};
 globalThis.EVA.plugin.renderer = globalThis.EVA.plugin.renderer || {};
-var _EVA_IIFE_text = function (exports, pixi_js, eva_js, pluginRenderer, rendererAdapter) {
+var _EVA_IIFE_text = function (exports, eva_js, pixi_js, pluginRenderer, rendererAdapter) {
   'use strict';
   function __decorate(decorators, target, key, desc) {
     var c = arguments.length,
@@ -55,6 +55,25 @@ var _EVA_IIFE_text = function (exports, pixi_js, eva_js, pluginRenderer, rendere
       prop.type = type;
     };
   }
+  class BitmapText extends eva_js.Component {
+    constructor() {
+      super(...arguments);
+      this.text = '';
+      this.style = {};
+    }
+    init(obj) {
+      this.style = _extends({
+        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([type('string')], BitmapText.prototype, "text", void 0);
   class Text$2 extends eva_js.Component {
     constructor() {
       super(...arguments);
@@ -81,6 +100,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,15 +136,18 @@ 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';
+        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) {
           this.containerManager.getContainer(changed.gameObject.id).removeChild(this.texts[changed.gameObject.id].text);
@@ -111,19 +157,179 @@ var _EVA_IIFE_text = function (exports, pixi_js, eva_js, pluginRenderer, rendere
           delete this.texts[changed.gameObject.id];
         } 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;
+        const styleWithoutFont = _extends({}, 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
+        };
+        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 initialText = fontFamily ? '' : component.text;
+        const htmlText = new rendererAdapter.HTMLText(_extends({
+          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
+        };
+        if (fontFamily) {
+          yield this.waitForFontResource(htmlText, changed, fontFamily);
+        }
+      });
+    }
+    addBitmapTextComponent(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 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
+        };
+        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;
+          const asyncId = this.increaseAsyncId(changed.gameObject.id);
+          yield eva_js.resource.getResource(fontName);
+          if (!this.validateAsyncId(changed.gameObject.id, asyncId)) return;
+          const component = this.texts[changed.gameObject.id].component;
+          text.style.fontFamily = fontFamily;
+          text.text = component.text;
+        } catch (error) {
+          console.warn(`字体资源 ${fontFamily} 加载失败:`, error);
+        }
+      });
+    }
+    processStyle(style) {
+      const processed = _extends({}, style);
+      if (processed.strokeThickness) {
+        const color = processed.stroke;
+        processed.stroke = {
+          color,
+          width: processed.strokeThickness
+        };
+        delete processed.strokeThickness;
+      }
+      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;
+      }
+      if (Array.isArray(processed.fill)) {
+        processed.fill = processed.fill[0];
+      }
+      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') {
-        _extends(text.style, changed.component.style);
+        const processedStyle = this.processStyle(component.style);
+        _extends(text.style, processedStyle);
+      } 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) {
@@ -131,8 +337,12 @@ var _EVA_IIFE_text = function (exports, pixi_js, eva_js, pluginRenderer, rendere
         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';
@@ -140,14 +350,27 @@ 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
+    }],
+    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;
   Object.defineProperty(exports, '__esModule', {
     value: true
   });
   return exports;
-}({}, PIXI, EVA, EVA.plugin.renderer, EVA.rendererAdapter);
+}({}, EVA, PIXI, EVA.plugin.renderer, EVA.rendererAdapter);
 globalThis.EVA.plugin.renderer.text = globalThis.EVA.plugin.renderer.text || _EVA_IIFE_text;