From e5fa875039b599d6885a819433bbd630449a03ab Mon Sep 17 00:00:00 2001
From: MiniPear <pearminipro@gmail.com>
Date: Wed, 5 Jul 2023 20:06:35 +0800
Subject: [PATCH] fix(animation): title

---
 src/ui/axis/guides/labels.ts |  2 +-
 src/ui/axis/guides/ticks.ts  |  2 +-
 src/ui/axis/guides/title.ts  | 19 ++++++++++++++++---
 src/ui/axis/types.ts         |  1 +
 4 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/ui/axis/guides/labels.ts b/src/ui/axis/guides/labels.ts
index a7e3d85ac..8e9582d70 100644
--- a/src/ui/axis/guides/labels.ts
+++ b/src/ui/axis/guides/labels.ts
@@ -257,7 +257,7 @@ export function renderLabels(
           }),
       (exit) =>
         exit.transition(function () {
-          const animation = fadeOut(this, animate.exit);
+          const animation = fadeOut(this.childNodes[0], animate.exit);
           onAnimateFinished(animation, () => select(this).remove());
           return animation;
         })
diff --git a/src/ui/axis/guides/ticks.ts b/src/ui/axis/guides/ticks.ts
index 387093b1b..7f42d385a 100644
--- a/src/ui/axis/guides/ticks.ts
+++ b/src/ui/axis/guides/ticks.ts
@@ -114,7 +114,7 @@ export function renderTicks(
         }),
       (exit) =>
         exit.transition(function () {
-          const animation = fadeOut(this, animate.exit);
+          const animation = fadeOut(this.childNodes[0], animate.exit);
           onAnimateFinished(animation, () => this.remove());
           return animation;
         })
diff --git a/src/ui/axis/guides/title.ts b/src/ui/axis/guides/title.ts
index eeb89c614..ab5672861 100644
--- a/src/ui/axis/guides/title.ts
+++ b/src/ui/axis/guides/title.ts
@@ -4,13 +4,13 @@ import type { DisplayObject } from '../../../shapes';
 import {
   normalize,
   parseSeriesAttr,
-  percentTransform,
   renderExtDo,
   scale,
   select,
   splitStyle,
   subStyleProps,
   type Selection,
+  percentTransform,
 } from '../../../util';
 import { parsePosition } from '../../title';
 import { CLASS_NAMES } from '../constant';
@@ -55,6 +55,18 @@ function getTitlePosition(
   return { x, y };
 }
 
+function inferTransform(n: DisplayObject, direction: string, position: string): string {
+  const node = n.cloneNode(true);
+  node.style.transform = 'scale(1, 1)';
+  node.style.transform = 'none';
+  const { height } = node.getBBox();
+  if (direction === 'vertical') {
+    if (position === 'left') return `rotate(-90) translate(0, ${height / 2})`;
+    if (position === 'right') return `rotate(-90) translate(0, -${height / 2})`;
+  }
+  return '';
+}
+
 function applyTitleStyle(
   title: Selection,
   group: Selection,
@@ -63,11 +75,12 @@ function applyTitleStyle(
   animate: GenericAnimation
 ) {
   const style = subStyleProps(attr, 'title');
-  const [titleStyle, { transform = '', ...groupStyle }] = splitStyle(style);
+  const [titleStyle, { transform: specified, ...groupStyle }] = splitStyle(style);
 
   title.styles(titleStyle);
   group.styles(groupStyle);
-  // the transform of g has some limitation, so we need to apply the transform to the title twice
+
+  const transform = specified || inferTransform(title.node(), titleStyle.direction, titleStyle.position);
   percentTransform(title.node(), transform);
 
   const { x, y } = getTitlePosition(
diff --git a/src/ui/axis/types.ts b/src/ui/axis/types.ts
index 10471132d..0f6308352 100644
--- a/src/ui/axis/types.ts
+++ b/src/ui/axis/types.ts
@@ -63,6 +63,7 @@ export type LabelOverlapCfg =
 
 export type AxisTitleStyleProps = Omit<TitleStyleProps, 'position'> & {
   position: TitleStyleProps['position'] | 'start' | 'end';
+  direction: 'horizontal' | 'vertical';
 };
 
 export type AxisTruncateStyleProps = {