diff options
| author | Terry Truong <terry06890@gmail.com> | 2022-10-08 21:32:46 +1100 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2022-10-09 04:31:16 +1100 |
| commit | 642d91a1947d9feac264eb2c83c1ca2efcda3ef2 (patch) | |
| tree | 2afdda08bce64c0e70048fb91d77d3c9eb7d30ae /src/components | |
| parent | 8e742d65d6da933e8a90b45bbc890b6d09d8d04e (diff) | |
Prevent endmost tick labels being clipped
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/TimeLine.vue | 19 |
1 files changed, 14 insertions, 5 deletions
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> |