fix: fix layout of title when has invalid verticalAlign

VisActor · Jan 17, 2025 · d82843f · d82843f
1 parent 0f77996
commit d82843f
Showing 1 changed file with 17 additions and 9 deletions.
diff --git a/packages/vrender-components/src/title/title.ts b/packages/vrender-components/src/title/title.ts
@@ -261,15 +261,16 @@ export class Title extends AbstractComponent<Required<TitleAttrs>> {
 
       if (isValid(verticalAlign) || isValid(textStyle.verticalAlign)) {
         const mainTitleVerticalAlign = textStyle.verticalAlign ? textStyle.verticalAlign : verticalAlign;
-        const mainTitleHeight = fixedMainTitleHeight ?? this._mainTitle.AABBBounds.height();
+        const mainTitleHeight =
+          fixedMainTitleHeight ?? (this._mainTitle.AABBBounds.isEmpty() ? 0 : this._mainTitle.AABBBounds.height());
 
-        if (mainTitleVerticalAlign === 'middle' && isValid(mainTitleHeight)) {
+        if (mainTitleVerticalAlign === 'middle') {
           this._mainTitle.setAttribute('y', mainTitleHeight / 2);
           this._mainTitle.setAttribute('textBaseline', 'middle');
-        } else if (mainTitleVerticalAlign === 'bottom' && isValid(mainTitleHeight)) {
+        } else if (mainTitleVerticalAlign === 'bottom') {
           this._mainTitle.setAttribute('y', mainTitleHeight);
           this._mainTitle.setAttribute('textBaseline', 'bottom');
-        } else {
+        } else if (mainTitleVerticalAlign === 'top') {
           this._mainTitle.setAttribute('y', 0);
           this._mainTitle.setAttribute('textBaseline', mainTitleVerticalAlign);
         }
@@ -298,17 +299,24 @@ export class Title extends AbstractComponent<Required<TitleAttrs>> {
         const subTitleYStart = this._mainTitle
           ? isValid(fixedMainTitleHeight)
             ? // 如果是用户指定的高度，根据bounds的height 和指定高度求最大值
-              this._mainTitle.AABBBounds.y1 + Math.max(this._mainTitle.AABBBounds.height(), fixedMainTitleHeight)
+              this._mainTitle.AABBBounds.y1 +
+              Math.max(
+                this._mainTitle.AABBBounds.isEmpty() ? 0 : this._mainTitle.AABBBounds.height(),
+                fixedMainTitleHeight
+              )
             : this._mainTitle.AABBBounds.y2
           : 0;
-        const subTitleHeight = subtextStyle.height ?? height ?? this._subTitle.AABBBounds.height();
-        if (subTitleVerticalAlign === 'middle' && isValid(subTitleHeight)) {
+        const subTitleHeight =
+          subtextStyle.height ??
+          height ??
+          (this._subTitle.AABBBounds.isEmpty() ? 0 : this._subTitle.AABBBounds.height());
+        if (subTitleVerticalAlign === 'middle') {
           this._subTitle.setAttribute('y', subTitleYStart + subTitleHeight / 2);
           this._subTitle.setAttribute('textBaseline', 'middle');
-        } else if (subTitleVerticalAlign === 'bottom' && isValid(subTitleHeight)) {
+        } else if (subTitleVerticalAlign === 'bottom') {
           this._subTitle.setAttribute('y', subTitleYStart + subTitleHeight);
           this._subTitle.setAttribute('textBaseline', 'bottom');
-        } else {
+        } else if (subTitleVerticalAlign === 'top') {
           this._subTitle.setAttribute('y', subTitleYStart);
           this._subTitle.setAttribute('textBaseline', subTitleVerticalAlign);
         }