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

package/dist/index.js

@@ -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
  */
 
 'use strict';
@@ -423,6 +423,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 ? EFFECTS.spec.TextOverflow.clip : _options_textOverflow, _options_textVerticalAlign = options.textVerticalAlign, textVerticalAlign = _options_textVerticalAlign === void 0 ? EFFECTS.spec.TextVerticalAlign.middle : _options_textVerticalAlign, _options_textAlign = options.textAlign, textAlign = _options_textAlign === void 0 ? EFFECTS.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 ? EFFECTS.spec.TextSizeMode.autoWidth : _options_sizeMode, _options_useLegacyRichText = options.// @ts-expect-error 兼容旧版
@@ -436,10 +437,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;
@@ -533,6 +532,7 @@ var RichTextLayout = /*#__PURE__*/ function() {
     /**
    * 设置文本框尺寸
    * - 不包含 fontScale 缩放
+   * @deprecated use maxTextWidth / maxTextHeight instead
    */ _proto.setSize = function setSize(width, height) {
         this.width = width;
         this.height = height;
@@ -619,11 +619,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;
@@ -736,11 +737,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;
@@ -813,7 +815,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();
                 }
@@ -1199,7 +1201,7 @@ exports.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);
@@ -1230,7 +1232,7 @@ exports.RichTextComponent = /*#__PURE__*/ function(MaskableGraphic) {
             this.textLayout.textVerticalAlign = EFFECTS.spec.TextVerticalAlign.middle;
         }
         this.updateStrategies();
-        this.renderText(options);
+        this.updateTexture();
         // 设置默认颜色（math.Color）
         this.material.setColor("_Color", new EFFECTS.math.Color(1, 1, 1, 1));
     };
@@ -1290,13 +1292,6 @@ exports.RichTextComponent = /*#__PURE__*/ function(MaskableGraphic) {
         this.updateStrategies();
         this.isDirty = true;
     };
-    _proto.renderText = function renderText(options) {
-        var size = options.size;
-        if (size) {
-            this.canvasSize = new EFFECTS.math.Vector2(size[0], size[1]);
-        }
-        this.updateTexture();
-    };
     /**
    * 更新文本
    * @returns
@@ -1322,6 +1317,7 @@ exports.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;
@@ -1368,7 +1364,7 @@ exports.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);
@@ -1386,7 +1382,7 @@ exports.RichTextComponent = /*#__PURE__*/ function(MaskableGraphic) {
         if (!this.initialized) {
             this.canvasSize = !this.canvasSize ? new EFFECTS.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;
         }
@@ -1455,7 +1451,7 @@ exports.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;
@@ -1596,7 +1592,8 @@ exports.RichTextComponent = /*#__PURE__*/ function(MaskableGraphic) {
                     this.canvasSize = new EFFECTS.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;
                 }
@@ -1617,7 +1614,7 @@ exports.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;
                 }
@@ -1627,7 +1624,7 @@ exports.RichTextComponent = /*#__PURE__*/ function(MaskableGraphic) {
                         var frameWpx2 = frameW * fontScale;
                         var frameHpx2 = frameH * fontScale;
                         this.canvasSize = new EFFECTS.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;
@@ -1746,7 +1743,7 @@ EFFECTS.applyMixins(exports.RichTextComponent, [
 
 /**
  * 插件版本号
- */ var version = "2.8.6";
+ */ var version = "2.8.8";
 EFFECTS.registerPlugin("rich-text", RichTextLoader);
 EFFECTS.logger.info("Plugin rich text version: " + version + ".");
 if (version !== EFFECTS__namespace.version) {