@galacean/effects-plugin-rich-text 2.8.0-alpha.5 → 2.8.0

package/dist/index.js

@@ -3,7 +3,7 @@
  * Description: Galacean Effects player rich text plugin
  * Author: Ant Group CO., Ltd.
  * Contributors: 云垣
- * Version: v2.8.0-alpha.5
+ * Version: v2.8.0
  */
 
 'use strict';
@@ -436,8 +436,11 @@ var RichTextLayout = /*#__PURE__*/ function() {
         this.width = size ? size[0] : 100;
         this.height = size ? size[1] : 100;
         this.wrapEnabled = wrapEnabled;
-        this.maxTextWidth = maxTextWidth;
-        this.maxTextHeight = maxTextHeight;
+        // 兜底，避免 0/负数/NaN/Infinity
+        var safeMaxW = Number.isFinite(maxTextWidth) ? maxTextWidth : 0;
+        var safeMaxH = Number.isFinite(maxTextHeight) ? maxTextHeight : 0;
+        this.maxTextWidth = Math.max(1, safeMaxW);
+        this.maxTextHeight = Math.max(1, safeMaxH);
         this.sizeMode = sizeMode;
     }
     var _proto = RichTextLayout.prototype;
@@ -519,7 +522,7 @@ var RichTextLayout = /*#__PURE__*/ function() {
    */ _proto.getOffsetXRich = function getOffsetXRich(style, maxWidth, contentW) {
         switch(this.textAlign){
             case EFFECTS.spec.TextAlignment.left:
-                return style.outlineWidth;
+                return style.outlineWidth * style.fontScale;
             case EFFECTS.spec.TextAlignment.middle:
                 return (maxWidth - contentW) / 2;
             case EFFECTS.spec.TextAlignment.right:
@@ -887,14 +890,15 @@ var RichTextLayout = /*#__PURE__*/ function() {
         var safeDiv = function(a, b) {
             return Math.abs(b) > 1e-5 ? a / b : 1;
         };
-        var availableW = Math.max(1, layout.maxTextWidth || sizeResult.canvasWidth);
-        var availableH = Math.max(1, layout.maxTextHeight || sizeResult.canvasHeight);
+        // 用像素空间计算
+        var frameWpx = layout.maxTextWidth * style.fontScale;
+        var frameHpx = layout.maxTextHeight * style.fontScale;
         var _sizeResult_contentWidth;
-        var contentW = Math.max(1, (_sizeResult_contentWidth = sizeResult.contentWidth) != null ? _sizeResult_contentWidth : sizeResult.canvasWidth);
+        var contentWpx = Math.max(1, (_sizeResult_contentWidth = sizeResult.contentWidth) != null ? _sizeResult_contentWidth : sizeResult.canvasWidth);
         var _sizeResult_bboxHeight;
-        var contentH = Math.max(1, (_sizeResult_bboxHeight = sizeResult.bboxHeight) != null ? _sizeResult_bboxHeight : sizeResult.canvasHeight);
-        // 只缩小不放大
-        var s = Math.min(1, safeDiv(availableW, contentW), safeDiv(availableH, contentH));
+        var contentHpx = Math.max(1, (_sizeResult_bboxHeight = sizeResult.bboxHeight) != null ? _sizeResult_bboxHeight : sizeResult.canvasHeight);
+        // 只缩小不放大（基于像素空间计算）
+        var s = Math.min(1, safeDiv(frameWpx, contentWpx), safeDiv(frameHpx, contentHpx));
         // 浮点精度处理
         if (s > 0.9999) {
             return {
@@ -974,13 +978,15 @@ var RichTextLayout = /*#__PURE__*/ function() {
     function RichHorizontalAlignStrategyImpl() {}
     var _proto = RichHorizontalAlignStrategyImpl.prototype;
     _proto.getHorizontalOffsets = function getHorizontalOffsets(lines, sizeResult, overflowResult, layout, style) {
-        var frameW = layout.maxTextWidth;
-        var compX = sizeResult.baselineCompensationX || 0;
-        // 统一用 frame 宽做容器
+        var _sizeResult_containerWidth;
+        var containerWidthPx = (_sizeResult_containerWidth = sizeResult.containerWidth) != null ? _sizeResult_containerWidth : layout.maxTextWidth * style.fontScale;
+        var _sizeResult_baselineCompensationX;
+        var compX = (_sizeResult_baselineCompensationX = sizeResult.baselineCompensationX) != null ? _sizeResult_baselineCompensationX : 0;
+        // 使用像素单位的容器宽度
         var baseOffsets = lines.map(function(line) {
-            return layout.getOffsetXRich(style, frameW, line.width);
+            return layout.getOffsetXRich(style, containerWidthPx, line.width);
         });
-        // 仅 visible 叠加水平补偿，clip/display 不加
+        // visible 模式下使用 baseOffset + baselineCompensationX
         var lineOffsets = layout.overflow === EFFECTS.spec.TextOverflow.visible ? baseOffsets.map(function(x) {
             return x + compX;
         }) : baseOffsets;
@@ -998,10 +1004,8 @@ var RichTextLayout = /*#__PURE__*/ function() {
     function RichVerticalAlignStrategyImpl() {}
     var _proto = RichVerticalAlignStrategyImpl.prototype;
     _proto.getVerticalOffsets = function getVerticalOffsets(lines, sizeResult, overflowResult, layout, style, singleLineHeight) {
-        var lineHeights = lines.map(function(line) {
-            return line.lineHeight;
-        });
-        var compY = sizeResult.baselineCompensationY || 0;
+        var _sizeResult_baselineCompensationY;
+        var compY = (_sizeResult_baselineCompensationY = sizeResult.baselineCompensationY) != null ? _sizeResult_baselineCompensationY : 0;
         var baselineY = 0;
         if (lines.length === 0) {
             return {
@@ -1013,7 +1017,7 @@ var RichTextLayout = /*#__PURE__*/ function() {
             case EFFECTS.spec.TextOverflow.visible:
                 {
                     // frame-based 计算
-                    var frameH = layout.maxTextHeight;
+                    var frameHpx = layout.maxTextHeight * style.fontScale;
                     var _sizeResult_bboxTop;
                     var bboxTop = (_sizeResult_bboxTop = sizeResult.bboxTop) != null ? _sizeResult_bboxTop : 0;
                     var _sizeResult_bboxHeight, _sizeResult_bboxBottom;
@@ -1027,10 +1031,10 @@ var RichTextLayout = /*#__PURE__*/ function() {
                             baselineYFrame = -bboxTop;
                             break;
                         case EFFECTS.spec.TextVerticalAlign.middle:
-                            baselineYFrame = (frameH - bboxHeight) / 2 - bboxTop;
+                            baselineYFrame = (frameHpx - bboxHeight) / 2 - bboxTop;
                             break;
                         case EFFECTS.spec.TextVerticalAlign.bottom:
-                            baselineYFrame = frameH - bboxHeight - bboxTop;
+                            baselineYFrame = frameHpx - bboxHeight - bboxTop;
                             break;
                     }
                     baselineY = baselineYFrame + compY; // 关键：叠加"向下移动 E"
@@ -1038,26 +1042,8 @@ var RichTextLayout = /*#__PURE__*/ function() {
                 }
             case EFFECTS.spec.TextOverflow.clip:
                 {
-                    var firstLine = lines[0];
-                    if (firstLine) {
-                        var _Math;
-                        var richSizes = firstLine.richOptions.map(function(o) {
-                            return o.fontSize;
-                        });
-                        var firstMax = (_Math = Math).max.apply(_Math, [].concat(richSizes.length ? richSizes : [
-                            style.fontSize
-                        ]));
-                        var fontSizeForOffset = firstMax * style.fontScale * singleLineHeight;
-                        baselineY = layout.getOffsetYRich(style, lineHeights, fontSizeForOffset) + compY;
-                    } else {
-                        baselineY = layout.getOffsetYRich(style, lineHeights, style.fontSize * style.fontScale) + compY;
-                    }
-                    break;
-                }
-            case EFFECTS.spec.TextOverflow.display:
-                {
-                    // display 垂直对齐改为基于 bbox，而不是 getOffsetYRich
-                    var frameH1 = layout.maxTextHeight;
+                    // 让 clip 垂直对齐逻辑与 display 保持一致（基于 bbox 的几何模型）
+                    var frameHpx1 = layout.maxTextHeight * style.fontScale;
                     // 用缩放后的行数据重建 baselines 和 bbox
                     var baselines = [
                         0
@@ -1065,7 +1051,6 @@ var RichTextLayout = /*#__PURE__*/ function() {
                     for(var i = 1; i < lines.length; i++){
                         baselines[i] = baselines[i - 1] + lines[i].lineHeight;
                     }
-                    // 计算 bboxTop / bboxBottom（使用行的测量值 lineAscent/lineDescent）
                     var bboxTop1 = Infinity;
                     var bboxBottom1 = -Infinity;
                     for(var i1 = 0; i1 < lines.length; i1++){
@@ -1077,26 +1062,64 @@ var RichTextLayout = /*#__PURE__*/ function() {
                         bboxBottom1 = Math.max(bboxBottom1, baselines[i1] + desc);
                     }
                     var bboxHeight1 = bboxBottom1 - bboxTop1;
+                    var baselineClipY = 0;
+                    switch(layout.textVerticalAlign){
+                        case EFFECTS.spec.TextVerticalAlign.top:
+                            baselineClipY = -bboxTop1;
+                            break;
+                        case EFFECTS.spec.TextVerticalAlign.middle:
+                            baselineClipY = (frameHpx1 - bboxHeight1) / 2 - bboxTop1;
+                            break;
+                        case EFFECTS.spec.TextVerticalAlign.bottom:
+                            baselineClipY = frameHpx1 - bboxHeight1 - bboxTop1;
+                            break;
+                    }
+                    baselineY = baselineClipY + compY;
+                    break;
+                }
+            case EFFECTS.spec.TextOverflow.display:
+                {
+                    // display 垂直对齐改为基于 bbox，而不是 getOffsetYRich
+                    var frameHpx2 = layout.maxTextHeight * style.fontScale;
+                    // 用缩放后的行数据重建 baselines 和 bbox
+                    var baselines1 = [
+                        0
+                    ];
+                    for(var i2 = 1; i2 < lines.length; i2++){
+                        baselines1[i2] = baselines1[i2 - 1] + lines[i2].lineHeight;
+                    }
+                    // 计算 bboxTop / bboxBottom（使用行的测量值 lineAscent/lineDescent）
+                    var bboxTop2 = Infinity;
+                    var bboxBottom2 = -Infinity;
+                    for(var i3 = 0; i3 < lines.length; i3++){
+                        var _lines_i_lineAscent1;
+                        var asc1 = (_lines_i_lineAscent1 = lines[i3].lineAscent) != null ? _lines_i_lineAscent1 : 0;
+                        var _lines_i_lineDescent1;
+                        var desc1 = (_lines_i_lineDescent1 = lines[i3].lineDescent) != null ? _lines_i_lineDescent1 : 0;
+                        bboxTop2 = Math.min(bboxTop2, baselines1[i3] - asc1);
+                        bboxBottom2 = Math.max(bboxBottom2, baselines1[i3] + desc1);
+                    }
+                    var bboxHeight2 = bboxBottom2 - bboxTop2;
                     // 计算 display 模式的基线
                     var baselineDisplayY = 0;
                     switch(layout.textVerticalAlign){
                         case EFFECTS.spec.TextVerticalAlign.top:
-                            baselineDisplayY = -bboxTop1;
+                            baselineDisplayY = -bboxTop2;
                             break;
                         case EFFECTS.spec.TextVerticalAlign.middle:
-                            baselineDisplayY = (frameH1 - bboxHeight1) / 2 - bboxTop1;
+                            baselineDisplayY = (frameHpx2 - bboxHeight2) / 2 - bboxTop2;
                             break;
                         case EFFECTS.spec.TextVerticalAlign.bottom:
-                            baselineDisplayY = frameH1 - bboxHeight1 - bboxTop1;
+                            baselineDisplayY = frameHpx2 - bboxHeight2 - bboxTop2;
                             break;
                     }
                     // 后续 lineYOffsets 保持按行高累计
                     var lineYOffsets = [];
                     var currentY = baselineDisplayY;
-                    for(var i2 = 0; i2 < lines.length; i2++){
+                    for(var i4 = 0; i4 < lines.length; i4++){
                         lineYOffsets.push(currentY);
-                        if (i2 < lines.length - 1) {
-                            currentY += lines[i2 + 1].lineHeight;
+                        if (i4 < lines.length - 1) {
+                            currentY += lines[i4 + 1].lineHeight;
                         }
                     }
                     return {
@@ -1451,9 +1474,12 @@ exports.RichTextComponent = /*#__PURE__*/ function(MaskableGraphic) {
         // 使用 this.canvasSize 统一设置画布尺寸
         EFFECTS.assertExist(this.canvasSize);
         var _this_canvasSize = this.canvasSize, canvasWidth = _this_canvasSize.x, canvasHeight = _this_canvasSize.y;
-        layout.width = canvasWidth / this.textStyle.fontScale;
-        layout.height = canvasHeight / this.textStyle.fontScale;
-        this.renderToTexture(canvasWidth, canvasHeight, flipY, function(context) {
+        // 确保canvas宽高至少为1
+        var safeW = Math.max(1, Math.ceil(canvasWidth));
+        var safeH = Math.max(1, Math.ceil(canvasHeight));
+        layout.width = safeW / this.textStyle.fontScale;
+        layout.height = safeH / this.textStyle.fontScale;
+        this.renderToTexture(safeW, safeH, flipY, function(context) {
             // 步骤6: 绘制文本
             _this.drawTextWithStrategies(context, wrapResult.lines, horizontalAlignResult, TextVerticalAlignResult, overflowResult, _this.textStyle);
         }, {
@@ -1468,12 +1494,15 @@ exports.RichTextComponent = /*#__PURE__*/ function(MaskableGraphic) {
         }
         var _this_size = this.size, _this_size_x = _this_size.x, x = _this_size_x === void 0 ? 1 : _this_size_x, _this_size_y = _this_size.y, y = _this_size_y === void 0 ? 1 : _this_size_y;
         var layout = this.textLayout;
+        var fontScale = this.textStyle.fontScale || 1;
+        // 防止 frameW / frameH 为 0
+        var frameW = Math.max(1, layout.maxTextWidth || 0);
+        var frameH = Math.max(1, layout.maxTextHeight || 0);
         switch(layout.overflow){
             case EFFECTS.spec.TextOverflow.visible:
                 {
-                    var _Math;
-                    var frameW = layout.maxTextWidth;
-                    var frameH = layout.maxTextHeight;
+                    var frameWpx = frameW * fontScale;
+                    var frameHpx = frameH * fontScale;
                     var _sizeResult_bboxTop;
                     var bboxTop = (_sizeResult_bboxTop = sizeResult.bboxTop) != null ? _sizeResult_bboxTop : 0;
                     var _sizeResult_bboxHeight, _sizeResult_bboxBottom;
@@ -1487,17 +1516,17 @@ exports.RichTextComponent = /*#__PURE__*/ function(MaskableGraphic) {
                             baselineYFrame = -bboxTop;
                             break;
                         case EFFECTS.spec.TextVerticalAlign.middle:
-                            baselineYFrame = (frameH - bboxHeight) / 2 - bboxTop;
+                            baselineYFrame = (frameHpx - bboxHeight) / 2 - bboxTop;
                             break;
                         case EFFECTS.spec.TextVerticalAlign.bottom:
-                            baselineYFrame = frameH - bboxHeight - bboxTop;
+                            baselineYFrame = frameHpx - bboxHeight - bboxTop;
                             break;
                     }
                     // 上下溢出检测
                     var contentTopInFrame = baselineYFrame + bboxTop;
                     var contentBottomInFrame = baselineYFrame + bboxBottom;
                     var overflowTop = Math.max(0, -contentTopInFrame);
-                    var overflowBottom = Math.max(0, contentBottomInFrame - frameH);
+                    var overflowBottom = Math.max(0, contentBottomInFrame - frameHpx);
                     // 垂直扩张
                     var expandTop = overflowTop;
                     var expandBottom = overflowBottom;
@@ -1528,56 +1557,78 @@ exports.RichTextComponent = /*#__PURE__*/ function(MaskableGraphic) {
                     var compY = expandTop;
                     // 水平扩张
                     var lines = sizeResult.lines || [];
+                    // 1. 先按 frameWpx 计算每行的对齐起点（逻辑对齐）
                     var xOffsetsFrame = lines.map(function(line) {
-                        return layout.getOffsetXRich(_this.textStyle, frameW, line.width);
+                        return layout.getOffsetXRich(_this.textStyle, frameWpx, line.width);
                     });
-                    var leftMost = xOffsetsFrame.length > 0 ? (_Math = Math).min.apply(_Math, [].concat(xOffsetsFrame)) : 0;
-                    var ex = Math.max(0, -leftMost);
-                    var expandLeft = ex;
-                    var expandRight = ex;
-                    var finalW = frameW + expandLeft + expandRight;
-                    var finalH = frameH + expandTop + expandBottom;
+                    // 2. 用对齐后的偏移 + 行宽算出内容的左右边界
+                    var contentMinX = Infinity;
+                    var contentMaxX = -Infinity;
+                    for(var i = 0; i < lines.length; i++){
+                        var _xOffsetsFrame_i;
+                        var off = (_xOffsetsFrame_i = xOffsetsFrame[i]) != null ? _xOffsetsFrame_i : 0;
+                        var _lines_i_width;
+                        var w = (_lines_i_width = lines[i].width) != null ? _lines_i_width : 0; // 像素宽
+                        contentMinX = Math.min(contentMinX, off);
+                        contentMaxX = Math.max(contentMaxX, off + w);
+                    }
+                    if (!isFinite(contentMinX)) {
+                        contentMinX = 0;
+                    }
+                    if (!isFinite(contentMaxX)) {
+                        contentMaxX = 0;
+                    }
+                    // 3. 计算内容相对于 frame 的越界量
+                    var overflowLeft = Math.max(0, -contentMinX); // 内容左边 < 0
+                    var overflowRight = Math.max(0, contentMaxX - frameWpx); // 内容右边 > frameWpx?
+                    // 4. 让 canvas 左右都扩张到能容下整个内容 bbox
+                    var expandLeft = overflowLeft;
+                    var expandRight = overflowRight;
+                    // 5. 最终 canvas 宽高
+                    var finalWpx = Math.ceil(frameWpx + expandLeft + expandRight);
+                    var finalHpx = Math.ceil(frameHpx + expandTop + expandBottom);
                     // 记录补偿，供垂直对齐策略叠加
                     sizeResult.baselineCompensationX = expandLeft;
                     sizeResult.baselineCompensationY = compY;
-                    sizeResult.canvasWidth = finalW;
-                    sizeResult.canvasHeight = finalH;
-                    this.canvasSize = new EFFECTS.math.Vector2(finalW, finalH);
+                    // containerWidth 用 frameWpx，而不是 finalWpx
+                    sizeResult.containerWidth = frameWpx;
+                    sizeResult.canvasWidth = finalWpx;
+                    sizeResult.canvasHeight = finalHpx;
+                    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 * finalW * this.SCALE_FACTOR * this.SCALE_FACTOR, y1 * finalH * this.SCALE_FACTOR * this.SCALE_FACTOR);
-                    this.size = this.item.transform.size.clone();
+                    this.item.transform.size.set(x1 * finalWpx * this.SCALE_FACTOR * this.SCALE_FACTOR, y1 * finalHpx * this.SCALE_FACTOR * this.SCALE_FACTOR);
                     this.initialized = true;
                     break;
                 }
             case EFFECTS.spec.TextOverflow.clip:
                 {
-                    var frameW1 = layout.maxTextWidth;
-                    var frameH1 = layout.maxTextHeight;
+                    var frameWpx1 = frameW * fontScale;
+                    var frameHpx1 = frameH * fontScale;
                     // 直接使用 frame 尺寸作为画布尺寸
-                    sizeResult.canvasWidth = frameW1;
-                    sizeResult.canvasHeight = frameH1;
+                    sizeResult.canvasWidth = frameWpx1;
+                    sizeResult.canvasHeight = frameHpx1;
                     // clip 模式不需要任何补偿
                     sizeResult.baselineCompensationX = 0;
                     sizeResult.baselineCompensationY = 0;
                     // 设置 canvas 和节点变换
-                    this.canvasSize = new EFFECTS.math.Vector2(frameW1, frameH1);
+                    this.canvasSize = new EFFECTS.math.Vector2(frameWpx1, frameHpx1);
                     // 把 layout 的尺寸更新为 frame 尺寸
-                    layout.width = frameW1 / this.textStyle.fontScale;
-                    layout.height = frameH1 / this.textStyle.fontScale;
+                    layout.width = frameW;
+                    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 * frameW1 * this.SCALE_FACTOR * this.SCALE_FACTOR, y2 * frameH1 * this.SCALE_FACTOR * this.SCALE_FACTOR);
-                    this.size = this.item.transform.size.clone();
+                    this.item.transform.size.set(x2 * frameWpx1 * this.SCALE_FACTOR * this.SCALE_FACTOR, y2 * frameHpx1 * this.SCALE_FACTOR * this.SCALE_FACTOR);
                     this.initialized = true;
                     break;
                 }
             case EFFECTS.spec.TextOverflow.display:
                 {
                     if (!this.initialized) {
-                        this.canvasSize = new EFFECTS.math.Vector2(layout.maxTextWidth, layout.maxTextHeight);
-                        this.item.transform.size.set(x * this.canvasSize.x * this.SCALE_FACTOR * this.SCALE_FACTOR, y * this.canvasSize.y * this.SCALE_FACTOR * this.SCALE_FACTOR);
-                        this.size = this.item.transform.size.clone();
+                        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.initialized = true;
                     }
                     break;
@@ -1696,7 +1747,7 @@ EFFECTS.applyMixins(exports.RichTextComponent, [
 
 /**
  * 插件版本号
- */ var version = "2.8.0-alpha.5";
+ */ var version = "2.8.0";
 EFFECTS.registerPlugin("rich-text", RichTextLoader);
 EFFECTS.logger.info("Plugin rich text version: " + version + ".");
 if (version !== EFFECTS__namespace.version) {