From da94ef92b3a10952b35780af5810c9c78e9c9b0d Mon Sep 17 00:00:00 2001
From: MiniPear <pearminipro@gmail.com>
Date: Tue, 4 Jul 2023 11:47:23 +0800
Subject: [PATCH] feat(handle): rotate label for vertical (#294)

---
 __tests__/integration/snapshots/Slider2.png | Bin 1933 -> 1958 bytes
 __tests__/integration/snapshots/Slider7.png | Bin 2661 -> 2797 bytes
 src/ui/slider/handle.ts                     |   4 +++-
 src/ui/slider/index.ts                      |  19 +++++++++++++++----
 4 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/__tests__/integration/snapshots/Slider2.png b/__tests__/integration/snapshots/Slider2.png
index add2aa1d5024fe95c30dfdf282e2dd59178cd9ce..fb8da46820160dd60a42e2e17a82b6305a73c57c 100644
GIT binary patch
delta 981
zcmV;`11kKD52g>0Hh)`5L_t(|obBAtYn%lh$MGjlrs-tzt5Itc?IK}QtF`FT1x4^s
z1rH*4+k))Hf5L+&*~1?8<aNCYg5Ctdix3g~g_N?kT{X6i+EQ&Mo1~dEnRF7n7u|y<
zYv$98PpYri@p*>t^F7U*hi9HC3IG5A004mBo}O+FpPHH)DSwLML{StYJ305pjT;L+
zJw0z6KYo01C+7mNeO(L4)YQ~SrBeB9baZs6R;%^z<m}be)s^}A`Kucn8xM#GKskE5
zIQzut=;+XqBS&^L9zW<md-iNGJ3ITAq9|VJ!h8UJK{o?3R<GALjYqTD>}b&7;NZ`W
z)$8^Co}QlZY=1QXZdNw~vZd+i>5e{s?AWm`Z2~~5lz<2Vz^!lF0eS8pi!XLEcxK_k
z<M-a%@je}ySr~r2)4g7MVdU@K+6UnGq?9|5lP6Dh^m%tI0J~2q0XcN&P#Kp6U<Y+A
zAgk@_QnR_zE{dZ1({r2ss;X1X<!kNLc6I5d2LTZ2T7N)JUEY8C@cu8KJbmWh#qiL;
z&mwX&t}Zp(jk(3vsmqh6cXBQO+t;;#thD=DuYY>q%MTs+?&v_@e@1t5_VQYF{?z5k
z(<|-1)=tg^VEelI3}kt&+Is)%gP(Ns8UU2zwz3xh;MOD{07L`?fQWzq5D^dnBD*Fa
z>+7xCR)3q{_O)BhQr?aSpfja^SzkQ!=2+vxN8{I57HU5p>)kuJw(p*YuT1>u#KoRU
z?~O9|17LHd2IS(Iw+>u6|H0h{AADwJc>KYo-fC@Qy>+d!Ja=y3(r0h~;oK*$Rwf^P
zex}SF0oYur0a=>;eBZ&N&tAA|;<5SvEi|zA`+vOyw=e7+ysI_+{y!fmib6mDcA-+A
zfmHVlTwiXS-}IjquPt8euT*R8UwbD2wx`rPkb_5`y>#~7myiDI?Y|B8kKEnt?W?bU
z-)>b}%|`#V#Y;mIe}3+ZGWP>uYo!LHHaxcW@Y64yYJBzKzGh=)sI@fPU+LYmUcYnV
z>M6t{e?4Ct99t`MKLEB?`meBhtF?`>$tUK<CX2bUcL8AgcFlVr0Nh%m5d;I1umrMy
z?8<;#ZG2g8EjRX*y$1kW+m!*CJ@?-J##bMYmc0i6Tk9?J;)~yXKG2*yH}KQrt>%?_
zbMC^v!8`uAJaXXhav8e;@c)$>kd=jR`WG*MddFtxs(tnA-+uAV_{f37)4%p!0Q|C2
z12TU9Q?ujuKQ&wC4gh3!<uecfc0U0e0U#nE07U)^b<6km@AOD200000NkvXXu0mjf
D7<U7j

delta 942
zcmV;f15x~@4~-9yHh)4%L_t(|obBDeZ`}1A$MMf$pMT_hjyVz%Ad#F>;!=aEDpC<r
zBawEfGIc9br*2(4b?6_^fr*)|3lhxT-K9k>L_s)7r4%`o(4>h|+wu9wIcLW#zyJjM
zUh(n0l*eQI-1px1-k$pE`<1Q~000000D%8LwSEqto12>|rGLCyN|`#yxx2f&%e7kV
z?Q`eOtsLZB0QRqM0hybdn;IG#`e&=vnj9Y=KXj0@H#avomX?<8?(FRRP(%Q#G2F-5
zueMsP$=TW21C7UL4qd){x!k^e`&XruH~KIifIajxAWt<KjjxSIyWQ?-P_x<m%2}h)
zI8>|Ep3YVS;D2HDGawIi_3G80u0M0;OrJIZAXP~~1OedDx9@=b`n8om^fLI`^1|8a
z>7MuL$+hLfXM5f2&EHS`v0wWDe3w*m2Xf)Ug`Tc=#{w{TDhbHx)2FNWSpW`D-vYAP
zt*^G*8{JY${mY+y-CI??YOk$#H@o%KhaLn#q;CPacz@%``5!#_ub<Cfx>62LPJAUI
z5997?ySsR2rE~GdbMpr|7l8fiTR=9tqn)=tn0ft2$N&4{#OVK82RVCftG;yc#&h!<
z-O<iL&IMrq`uYrHZL8k->%ULF+t1$spc<7tME|ngo$cC(|M=5%d-228P<_1n%=5pv
zeq{Qk<$tR80^q?Ot9pS_N?Ex0*2(pi>yxL?{`Si8nV)^K@ZOs<o9&yURqqABgAGJL
zmOpv_*oo)Qe?0N{^yabe{dB1@bz=3_!rzWmy%zuvR(U|Wo%Zl{r#(7x<oj!%pN%z-
zZgf@`$E(~6fNxfLKz6n}kCjr&@K|H#i^HM%{eRt^dqb5i1;Cyv56JLXbGwvMw!52O
z1mk|UGc-KfxL4g)0PLmufDDh_A89<Xarefh$<NO=R{qnRIC84DKMeukTQv}`@g6<(
zlbhEs{rOa>)ppkwuQj{()<=#`zw9+$fB`lT0Xg}?FK^arBlqttymP!h*4&zX<#+SL
z^&#<{y}t=SRR$s;rId1F_WZ3Av*&MBy$1mMQ~5Ix03J=Vfdh&IlW+t!d}N>kvU2lM
z^U7adpQ(Be0QNRq^#Y}o(pg&^S^Vhlt;K8aJUuir-mQ8c0QNQzcOYBqOZ9u}cgE`D
zlUr5q0>J(ZL_iK7n^}MMrQdw?#4|r$ta=v!_Gcgh0>Gn3Kmdpc2mp~!0h6cZh(-MS
QY5)KL07*qoM6N<$f`a7wiU0rr

diff --git a/__tests__/integration/snapshots/Slider7.png b/__tests__/integration/snapshots/Slider7.png
index 7727d0f4cef5a95a35bdfa06a8ced73711dfd9f0..0c35a120110d4d9d4e6bea9e8c91d058ef13b684 100644
GIT binary patch
literal 2797
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
GSN{d}LQ7o$

literal 2661
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
DVR%Ps

diff --git a/src/ui/slider/handle.ts b/src/ui/slider/handle.ts
index 3ef336db0..35fb2818e 100644
--- a/src/ui/slider/handle.ts
+++ b/src/ui/slider/handle.ts
@@ -79,15 +79,17 @@ export class Handle extends GUI<HandleStyleProps> {
 
   private renderLabel(container: Group) {
     const { showLabel } = this.attributes;
-    const style = subStyleProps(this.attributes, 'label');
+    const { transform, ...style } = subStyleProps(this.attributes, 'label');
     const [labelStyle, groupStyle] = splitStyle(style, []);
 
     const labelGroup = select(container).maybeAppendByClassName(CLASS_NAMES.labelGroup, 'g').styles(groupStyle);
+
     // @ts-ignore
     const { text, ...rest } = { ...HANDLE_LABEL_DEFAULT_CFG, ...labelStyle };
     ifShow(!!showLabel, labelGroup, (group) => {
       this.label = group.maybeAppendByClassName(CLASS_NAMES.label, 'text').styles({
         ...rest,
+        transform,
         text: `${text}`,
       });
 
diff --git a/src/ui/slider/index.ts b/src/ui/slider/index.ts
index e537f8b0d..bdd2ec452 100644
--- a/src/ui/slider/index.ts
+++ b/src/ui/slider/index.ts
@@ -296,6 +296,14 @@ export class Slider extends GUI<SliderStyleProps> {
     };
   }
 
+  private inferTextStyle(handleType: HandleType): Record<string, any> {
+    const { orientation } = this.attributes;
+    if (orientation === 'horizontal') return {};
+    if (handleType === 'start') return { transform: 'rotate(90)', textAlign: 'start' };
+    if (handleType === 'end') return { transform: 'rotate(90)', textAlign: 'end' };
+    return {};
+  }
+
   /**
    * 计算手柄应当处于的位置
    * @param handleType start手柄还是end手柄
@@ -315,6 +323,7 @@ export class Slider extends GUI<SliderStyleProps> {
     const temp = new Text({
       style: {
         ...labelStyle,
+        ...this.inferTextStyle(handleType),
         text,
       },
     });
@@ -332,8 +341,8 @@ export class Slider extends GUI<SliderStyleProps> {
     // 相对于获取两端可用空间
     const { width: iW, height: iH } = this.availableSpace;
     const { x: fX, y: fY, width: fW, height: fH } = this.calcMask();
+    const totalSpacing = spacing + size;
     if (orientation === 'horizontal') {
-      const totalSpacing = spacing + size;
       const finalWidth = totalSpacing + textWidth / 2;
       if (handleType === 'start') {
         const left = fX - totalSpacing - textWidth;
@@ -343,11 +352,12 @@ export class Slider extends GUI<SliderStyleProps> {
         x = sign ? finalWidth : -finalWidth;
       }
     } else {
-      const finalWidth = spacing + size;
+      const positiveSize = totalSpacing;
+      const negativeSize = textHeight + totalSpacing;
       if (handleType === 'start') {
-        y = fY - size > textHeight ? -finalWidth : finalWidth;
+        y = fY - size > textHeight ? -negativeSize : positiveSize;
       } else {
-        y = iH - fY - fH - size > textHeight ? finalWidth : -finalWidth;
+        y = iH - (fY + fH) - size > textHeight ? negativeSize : -positiveSize;
       }
     }
     return { x, y, text };
@@ -360,6 +370,7 @@ export class Slider extends GUI<SliderStyleProps> {
     return {
       ...style,
       ...this.calcHandleText(handleType),
+      ...this.inferTextStyle(handleType),
     };
   }