From c542f036070b70145bbb8917b03cf074d8f2b257 Mon Sep 17 00:00:00 2001
From: xile611 <dingling112@gmail.com>
Date: Fri, 17 Jan 2025 10:27:09 +0800
Subject: [PATCH] fix: fix layout of title when has invalid verticalAlign

---
 .../vrender-components/src/title/title.ts     | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/vrender-components/src/title/title.ts b/packages/vrender-components/src/title/title.ts
index 81af2efef..912250ca8 100644
--- 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.empty() ? 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,22 @@ 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.empty() ? 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.empty() ? 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);
         }