From 5f6e110ecbcf48700f0f949995cba0bd2ef0d251 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Mon, 10 Oct 2022 20:29:00 +1100
Subject: Fix non-pointer-centered scrolling in horizontal mode

---
 src/App.vue                 | 2 +-
 src/components/BaseLine.vue | 2 +-
 src/components/TimeLine.vue | 6 +++---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d422a41..7d7cd98 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="absolute left-0 top-0 w-screen h-screen overflow-hidden flex flex-col" style="bg-stone-800" >
 	<!-- Title bar -->
-	<div class="flex shadow gap-2 p-2 bg-stone-900 text-yellow-500">
+	<div class="flex gap-2 p-2 bg-stone-900 text-yellow-500">
 		<h1 class="my-auto ml-2 text-4xl">Histplorer</h1>
 		<div class="mx-auto"/> <!-- Spacer -->
 		<!-- Icons -->
diff --git a/src/components/BaseLine.vue b/src/components/BaseLine.vue
index bde2e56..84a3846 100644
--- a/src/components/BaseLine.vue
+++ b/src/components/BaseLine.vue
@@ -36,7 +36,7 @@ function periodStyles(period){
 		flexGrow: period.len,
 	};
 }
-const labelStyles = computed(() => ({
+const labelStyles: Record<string,string> = computed(() => ({
 	transform: props.vert ? 'rotate(90deg) translate(50%, 0)' : 'none',
 	whiteSpace: 'nowrap',
 	width: props.vert ? '40px' : 'auto',
diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue
index e5da628..a5722f4 100644
--- a/src/components/TimeLine.vue
+++ b/src/components/TimeLine.vue
@@ -73,7 +73,7 @@ const resizeObserver = new ResizeObserver((entries) => {
 		}
 	}
 });
-onMounted(() => resizeObserver.observe(rootRef.value));
+onMounted(() => resizeObserver.observe(rootRef.value as HTMLElement));
 
 // Vars
 const startDate = ref(props.initialStart); // Lowest date on displayed timeline
@@ -91,7 +91,7 @@ const END_TICK_SZ = 4; // Size for MIN_DATE/MAX_DATE ticks
 const availLen = computed(() => props.vert ? height.value : width.value);
 
 // For initialisation
-function initTicks(): number[] {
+function initTicks(){
 	// Find smallest usable scale
 	for (let i = 0; i < SCALES.length; i++){
 		let dateLen = endDate.value - startDate.value;
@@ -196,7 +196,7 @@ function zoomTimeline(frac: number){
 		let innerOffset = 0; // Element-relative ptrOffset
 		if (rootRef.value != null){ // Can become null during dev-server hot-reload for some reason
 			let rect = rootRef.value.getBoundingClientRect();
-			innerOffset = ptrOffset - rect.top;
+			innerOffset = props.vert ? ptrOffset - rect.top : ptrOffset - rect.left;
 		}
 		let zoomCenter = startDate.value + (innerOffset / availLen.value) * oldDateLen;
 		newStart = zoomCenter - (zoomCenter - startDate.value) * frac;
-- 
cgit v1.2.3