@galacean/effects-plugin-rich-text 2.8.6 → 2.8.8

package/dist/index.mjs

@@ -3,7 +3,7 @@
  * Description: Galacean Effects player rich text plugin
  * Author: Ant Group CO., Ltd.
  * Contributors: 云垣
- * Version: v2.8.6
+ * Version: v2.8.8
  */
 
 import * as EFFECTS from '@galacean/effects';
@@ -400,6 +400,7 @@ typeof SuppressedError === "function" ? SuppressedError : function _SuppressedEr
 
 var RichTextLayout = /*#__PURE__*/ function() {
     function RichTextLayout(options) {
+        // TODO: width 和 height 新版富文本计算没有地方用到
         this.width = 0;
         this.height = 0;
         var size = options.size, _options_textOverflow = options.textOverflow, textOverflow = _options_textOverflow === void 0 ? spec.TextOverflow.clip : _options_textOverflow, _options_textVerticalAlign = options.textVerticalAlign, textVerticalAlign = _options_textVerticalAlign === void 0 ? spec.TextVerticalAlign.middle : _options_textVerticalAlign, _options_textAlign = options.textAlign, textAlign = _options_textAlign === void 0 ? spec.TextAlignment.left : _options_textAlign, _options_letterSpace = options.letterSpace, letterSpace = _options_letterSpace === void 0 ? 0 : _options_letterSpace, _options_lineHeight = options.lineHeight, lineHeight = _options_lineHeight === void 0 ? 0.571 : _options_lineHeight, _options_wrapEnabled = options.wrapEnabled, wrapEnabled = _options_wrapEnabled === void 0 ? false : _options_wrapEnabled, _options_maxTextWidth = options.maxTextWidth, maxTextWidth = _options_maxTextWidth === void 0 ? 350 : _options_maxTextWidth, _options_maxTextHeight = options.maxTextHeight, maxTextHeight = _options_maxTextHeight === void 0 ? 1000 : _options_maxTextHeight, _options_sizeMode = options.sizeMode, sizeMode = _options_sizeMode === void 0 ? spec.TextSizeMode.autoWidth : _options_sizeMode, _options_useLegacyRichText = options.// @ts-expect-error 兼容旧版
@@ -413,10 +414,8 @@ var RichTextLayout = /*#__PURE__*/ function() {
         this.width = size ? size[0] : 100;
         this.height = size ? size[1] : 100;
         this.wrapEnabled = wrapEnabled;
-        // TODO: 统一富文本和图层 size 单位，这边先临时做个转换
-        var scaleFactor = 50;
-        this.maxTextWidth = maxTextWidth * scaleFactor;
-        this.maxTextHeight = maxTextHeight * scaleFactor;
+        this.maxTextWidth = maxTextWidth;
+        this.maxTextHeight = maxTextHeight;
         this.sizeMode = sizeMode;
     }
     var _proto = RichTextLayout.prototype;
@@ -510,6 +509,7 @@ var RichTextLayout = /*#__PURE__*/ function() {
     /**
    * 设置文本框尺寸
    * - 不包含 fontScale 缩放
+   * @deprecated use maxTextWidth / maxTextHeight instead
    */ _proto.setSize = function setSize(width, height) {
         this.width = width;
         this.height = height;
@@ -596,11 +596,12 @@ var RichTextLayout = /*#__PURE__*/ function() {
  */ var RichWrapDisabledStrategy = /*#__PURE__*/ function() {
     function RichWrapDisabledStrategy() {}
     var _proto = RichWrapDisabledStrategy.prototype;
-    _proto.computeLines = function computeLines(processedOptions, context, style, layout, singleLineHeight, fontScale, letterSpace, scaleFactor) {
+    _proto.computeLines = function computeLines(processedOptions, context, style, layout, singleLineHeight, fontScale, letterSpace) {
         var _this = this;
         var lines = [];
         var baselines = [];
         var gapPx = (layout.lineHeight || 0) * fontScale;
+        var scaleFactor = 1 / 10; // 1/10px, 后面 context.font 设置的字号为10px
         var currentLine = this.createNewLine();
         var maxLineWidth = 0;
         var totalHeight = 0;
@@ -713,11 +714,12 @@ var RichTextLayout = /*#__PURE__*/ function() {
  */ var RichWrapEnabledStrategy = /*#__PURE__*/ function() {
     function RichWrapEnabledStrategy() {}
     var _proto = RichWrapEnabledStrategy.prototype;
-    _proto.computeLines = function computeLines(processedOptions, context, style, layout, singleLineHeight, fontScale, letterSpace, scaleFactor) {
+    _proto.computeLines = function computeLines(processedOptions, context, style, layout, singleLineHeight, fontScale, letterSpace) {
         var _this = this;
         var lines = [];
         var baselines = [];
         var gapPx = (layout.lineHeight || 0) * fontScale;
+        var scaleFactor = 1 / 10; // 1/10px, 后面 context.font 设置的字号为10px
         var currentLine = this.createNewLine();
         var maxLineWidth = 0;
         var totalHeight = 0;
@@ -790,7 +792,7 @@ var RichTextLayout = /*#__PURE__*/ function() {
                 var spacing = chunkChars.length > 0 ? letterSpace : 0;
                 var willWidth = currentLine.width + spacing + charWidth;
                 // 自动换行判断
-                if (willWidth > (layout.maxTextWidth || Infinity)) {
+                if (willWidth > (layout.maxTextWidth * fontScale || Infinity)) {
                     flushChunk();
                     finishCurrentLine();
                 }
@@ -1176,7 +1178,7 @@ var RichTextComponent = /*#__PURE__*/ function(MaskableGraphic) {
         _this.size = null;
         _this.initialized = false;
         _this.canvasSize = null;
-        _this.SCALE_FACTOR = 0.1;
+        _this.SCALE_FACTOR = 0.11092565;
         _this.ALPHA_FIX_VALUE = 1 / 255;
         _this.name = "MRichText" + seed++;
         _this.initTextBase(engine);
@@ -1207,7 +1209,7 @@ var RichTextComponent = /*#__PURE__*/ function(MaskableGraphic) {
             this.textLayout.textVerticalAlign = spec.TextVerticalAlign.middle;
         }
         this.updateStrategies();
-        this.renderText(options);
+        this.updateTexture();
         // 设置默认颜色（math.Color）
         this.material.setColor("_Color", new math.Color(1, 1, 1, 1));
     };
@@ -1267,13 +1269,6 @@ var RichTextComponent = /*#__PURE__*/ function(MaskableGraphic) {
         this.updateStrategies();
         this.isDirty = true;
     };
-    _proto.renderText = function renderText(options) {
-        var size = options.size;
-        if (size) {
-            this.canvasSize = new math.Vector2(size[0], size[1]);
-        }
-        this.updateTexture();
-    };
     /**
    * 更新文本
    * @returns
@@ -1299,6 +1294,7 @@ var RichTextComponent = /*#__PURE__*/ function(MaskableGraphic) {
         if (!this.isDirty || !this.context || !this.canvas || !this.textStyle) {
             return;
         }
+        var legacyScaleFactor = 0.1;
         this.generateTextProgram(this.text);
         var width = 0, height = 0;
         var layout = this.textLayout;
@@ -1345,7 +1341,7 @@ var RichTextComponent = /*#__PURE__*/ function(MaskableGraphic) {
                 charInfo.offsetY = fontSize * textStyle.fontScale * (_this.singleLineHeight - 1) / 2;
             }
             charInfo.offsetX.push(charInfo.width);
-            charInfo.width += (textWidth <= 0 ? 0 : textWidth) * fontSize * _this.SCALE_FACTOR * textStyle.fontScale + text.length * letterSpace;
+            charInfo.width += (textWidth <= 0 ? 0 : textWidth) * fontSize * legacyScaleFactor * textStyle.fontScale + text.length * letterSpace;
             charInfo.richOptions.push(options);
         });
         charsInfo.push(charInfo);
@@ -1363,7 +1359,7 @@ var RichTextComponent = /*#__PURE__*/ function(MaskableGraphic) {
         if (!this.initialized) {
             this.canvasSize = !this.canvasSize ? new math.Vector2(width, height) : this.canvasSize;
             var _this_canvasSize = this.canvasSize, canvasWidth = _this_canvasSize.x, canvasHeight = _this_canvasSize.y;
-            this.item.transform.size.set(x * canvasWidth * this.SCALE_FACTOR * this.SCALE_FACTOR, y * canvasHeight * this.SCALE_FACTOR * this.SCALE_FACTOR);
+            this.item.transform.size.set(x * canvasWidth * legacyScaleFactor * legacyScaleFactor, y * canvasHeight * legacyScaleFactor * legacyScaleFactor);
             this.size = this.item.transform.size.clone();
             this.initialized = true;
         }
@@ -1432,7 +1428,7 @@ var RichTextComponent = /*#__PURE__*/ function(MaskableGraphic) {
             return;
         }
         // 步骤1: 换行策略计算行信息
-        var wrapResult = this.richWrapStrategy.computeLines(this.processedTextOptions, context, this.textStyle, layout, this.singleLineHeight, this.textStyle.fontScale, letterSpace, this.SCALE_FACTOR);
+        var wrapResult = this.richWrapStrategy.computeLines(this.processedTextOptions, context, this.textStyle, layout, this.singleLineHeight, this.textStyle.fontScale, letterSpace);
         if (wrapResult.lines.length === 0 || wrapResult.maxLineWidth === 0 || wrapResult.totalHeight === 0) {
             this.isDirty = false;
             return;
@@ -1573,7 +1569,8 @@ var RichTextComponent = /*#__PURE__*/ function(MaskableGraphic) {
                     this.canvasSize = new math.Vector2(finalWpx, finalHpx);
                     var _this_size1;
                     var _ref = (_this_size1 = this.size) != null ? _this_size1 : this.item.transform.size, _ref_x = _ref.x, x1 = _ref_x === void 0 ? 1 : _ref_x, _ref_y = _ref.y, y1 = _ref_y === void 0 ? 1 : _ref_y;
-                    this.item.transform.size.set(x1 * finalWpx * this.SCALE_FACTOR * this.SCALE_FACTOR, y1 * finalHpx * this.SCALE_FACTOR * this.SCALE_FACTOR);
+                    // 实际元素渲染尺寸不随着 fontScale 改变
+                    this.item.transform.size.set(x1 * finalWpx / fontScale * this.SCALE_FACTOR * this.SCALE_FACTOR, y1 * finalHpx / fontScale * this.SCALE_FACTOR * this.SCALE_FACTOR);
                     this.initialized = true;
                     break;
                 }
@@ -1594,7 +1591,7 @@ var RichTextComponent = /*#__PURE__*/ function(MaskableGraphic) {
                     layout.height = frameH;
                     var _this_size2;
                     var _ref1 = (_this_size2 = this.size) != null ? _this_size2 : this.item.transform.size, _ref_x1 = _ref1.x, x2 = _ref_x1 === void 0 ? 1 : _ref_x1, _ref_y1 = _ref1.y, y2 = _ref_y1 === void 0 ? 1 : _ref_y1;
-                    this.item.transform.size.set(x2 * frameWpx1 * this.SCALE_FACTOR * this.SCALE_FACTOR, y2 * frameHpx1 * this.SCALE_FACTOR * this.SCALE_FACTOR);
+                    this.item.transform.size.set(x2 * frameWpx1 / fontScale * this.SCALE_FACTOR * this.SCALE_FACTOR, y2 * frameHpx1 / fontScale * this.SCALE_FACTOR * this.SCALE_FACTOR);
                     this.initialized = true;
                     break;
                 }
@@ -1604,7 +1601,7 @@ var RichTextComponent = /*#__PURE__*/ function(MaskableGraphic) {
                         var frameWpx2 = frameW * fontScale;
                         var frameHpx2 = frameH * fontScale;
                         this.canvasSize = new math.Vector2(frameWpx2, frameHpx2);
-                        this.item.transform.size.set(x * frameWpx2 * this.SCALE_FACTOR * this.SCALE_FACTOR, y * frameHpx2 * this.SCALE_FACTOR * this.SCALE_FACTOR);
+                        this.item.transform.size.set(x * frameWpx2 / fontScale * this.SCALE_FACTOR * this.SCALE_FACTOR, y * frameHpx2 / fontScale * this.SCALE_FACTOR * this.SCALE_FACTOR);
                         this.initialized = true;
                     }
                     break;
@@ -1723,7 +1720,7 @@ applyMixins(RichTextComponent, [
 
 /**
  * 插件版本号
- */ var version = "2.8.6";
+ */ var version = "2.8.8";
 registerPlugin("rich-text", RichTextLoader);
 logger.info("Plugin rich text version: " + version + ".");
 if (version !== EFFECTS.version) {