From 642d91a1947d9feac264eb2c83c1ca2efcda3ef2 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sat, 8 Oct 2022 21:32:46 +1100
Subject: Prevent endmost tick labels being clipped

---
 src/components/TimeLine.vue | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

(limited to 'src/components/TimeLine.vue')

diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue
index e074b7c..3d2f9ea 100644
--- a/src/components/TimeLine.vue
+++ b/src/components/TimeLine.vue
@@ -8,7 +8,7 @@
 			:style="tickStyles(n)" class="animate-fadein"/>
 		<text fill="#606060" v-for="n in ticks" :key="n"
 			:x="width/2 + 12" y="0"
-			text-anchor="start" :style="tickLabelStyles(n)" class="text-sm animate-fadein">
+			text-anchor="start" dominant-baseline="middle" :style="tickLabelStyles(n)" class="text-sm animate-fadein">
 			{{Math.round(n * 100) / 100}}
 		</text>
 	</svg>
@@ -219,15 +219,24 @@ function onZoom(evt: WheelEvent){
 
 // Styles
 function tickStyles(tick: number){
+	let y = (tick - startDate.value) / (endDate.value - startDate.value) * props.height;
 	return {
-		transform: `translate(0, ${(tick - startDate.value) / (endDate.value - startDate.value) * props.height}px)`,
-		transition: 'transform 300ms linear',
+		transform: `translate(0, ${y}px)`,
+		transition: 'transform 300ms ease-out',
 	}
 }
 function tickLabelStyles(tick: number){
+	let y = (tick - startDate.value) / (endDate.value - startDate.value) * props.height;
+	let fontHeight = 10;
+	if (Math.abs(y) < fontHeight/2){
+		y = fontHeight;
+	}
+	if (Math.abs(y - props.height) < fontHeight/2){
+		y = props.height - fontHeight;
+	}
 	return {
-		transform: `translate(0, ${(tick - startDate.value) / (endDate.value - startDate.value) * props.height + 5}px)`,
-		transition: 'transform 300ms linear',
+		transform: `translate(0, ${y}px)`,
+		transition: 'transform 300ms ease-out',
 	}
 }
 </script>
-- 
cgit v1.2.3