From 0647021d9b520e058923d2ed44fc487c513def5c Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sat, 28 Jan 2023 16:35:01 +1100
Subject: Adjust mouse wheel handling

Account for horizontal mouse wheels
Use Ctrl for zooming, and Shift for panning
---
 src/components/TimeLine.vue | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

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

diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue
index 0cdd106..d0adfc0 100644
--- a/src/components/TimeLine.vue
+++ b/src/components/TimeLine.vue
@@ -2,7 +2,7 @@
 <div class="relative overflow-hidden z-0" ref="rootRef"
 	@pointerdown="onPointerDown" @pointermove="onPointerMove" @pointerup="onPointerUp"
 	@pointercancel="onPointerUp" @pointerout="onPointerUp" @pointerleave="onPointerUp"
-	@wheel.exact="onWheel" @wheel.shift.exact="onShiftWheel"
+	@wheel.exact="onWheel" @wheel.shift.exact="onWheel" @wheel.ctrl.exact.prevent="onCtrlWheel"
 	:style="{backgroundColor: !current && closeable ? 'rgba(0,0,0,0.3)' : store.color.bg}">
 
 	<!-- Event density indicators -->
@@ -1303,11 +1303,18 @@ function onPointerUp(evt: PointerEvent){
 }
 
 function onWheel(evt: WheelEvent){
-	let shiftDir = (evt.deltaY > 0 ? 1 : -1) * (!vert.value ? -1 : 1);
-	panTimeline(shiftDir * store.scrollRatio);
+	if (Math.abs(evt.deltaY) > Math.abs(evt.deltaX)){ // Vertical wheel scroll
+		const shiftDir = (evt.deltaY > 0 ? 1 : -1) * (vert.value ? -1 : 1);
+		panTimeline(shiftDir * store.scrollRatio);
+	} else { // Horizontal wheel scroll
+		if (!vert.value){
+			const shiftDir = evt.deltaX > 0 ? 1 : -1;
+			panTimeline(shiftDir * store.scrollRatio);
+		}
+	}
 }
 
-function onShiftWheel(evt: WheelEvent){
+function onCtrlWheel(evt: WheelEvent){
 	let zoomRatio = evt.deltaY > 0 ? store.zoomRatio : 1/store.zoomRatio;
 	zoomTimeline(zoomRatio, [pointerX, pointerY]);
 }
-- 
cgit v1.2.3