From 7d58d6e10dc63e573ba11a140f5e5d7d4979d27e Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sun, 9 Oct 2022 14:43:24 +1100
Subject: Enlargen ticks present in larger scale

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

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

diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue
index 82c2f67..1456598 100644
--- a/src/components/TimeLine.vue
+++ b/src/components/TimeLine.vue
@@ -8,16 +8,16 @@
 		<line stroke="yellow" stroke-width="2px" x1="50%" y1="0%" x2="50%" y2="100%"/>
 		<template v-for="n in ticks" :key="n">
 			<line v-if="n == minDate || n == maxDate"
-				:x1="width/2 - 4" y1="0"
-				:x2="width/2 + 4" y2="0"
+				:x1="-4" y1="0"
+				:x2="4" y2="0"
 				stroke="yellow" stroke-width="8px" :style="tickStyles(n)" class="animate-fadein"/>
 			<line v-else
-				:x1="width/2 - 8" y1="0"
-				:x2="width/2 + 8" y2="0"
+				:x1="-8" y1="0"
+				:x2="8" y2="0"
 				stroke="yellow" stroke-width="1px" :style="tickStyles(n)" class="animate-fadein"/>
 		</template>
 		<text fill="#606060" v-for="n in ticks" :key="n"
-			:x="width/2 + 12" y="0"
+			:x="width/2 + 20" y="0"
 			text-anchor="start" dominant-baseline="middle" :style="tickLabelStyles(n)" class="text-sm animate-fadein">
 			{{Math.round(n * 100) / 100}}
 		</text>
@@ -242,8 +242,10 @@ function onPointerMove(evt: PointerEvent){
 		dragDiffY += yDiff;
 		if (dragHandler == 0){
 			dragHandler = setTimeout(() => {
-				shiftTimeline(-dragDiffY / props.height);
-				dragDiffY = 0;
+				if (Math.abs(dragDiffY) > 2){
+					shiftTimeline(-dragDiffY / props.height);
+					dragDiffY = 0;
+				}
 				dragHandler = 0;
 			}, 50);
 		}
@@ -293,8 +295,12 @@ function onShiftWheel(evt: WheelEvent){
 // Styles
 function tickStyles(tick: number){
 	let y = (tick - startDate.value) / (endDate.value - startDate.value) * props.height;
+	let scaleX = 1;
+	if (scaleIdx > 0 && tick % scales[scaleIdx-1] == 0){ // If the tick exists on the scale directly above this one
+		scaleX = 2;
+	}
 	return {
-		transform: `translate(0, ${y}px)`,
+		transform: `translate(${props.width/2}px, ${y}px) scale(${scaleX})`,
 		transitionProperty: 'transform',
 		transitionDuration: '300ms',
 		transitionTimingFunction: 'ease-out',
-- 
cgit v1.2.3