From 22bd0f2c69864a3c52deb501e7122acf1364878c Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sun, 9 Oct 2022 23:50:32 +1100
Subject: Add 'momentum' to dragging

---
 src/components/TimeLine.vue | 29 ++++++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

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

diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue
index 03adfc5..58e2fbc 100644
--- a/src/components/TimeLine.vue
+++ b/src/components/TimeLine.vue
@@ -241,11 +241,29 @@ const ptrEvtCache = []; // Holds last captured PointerEvent for each pointerId (
 let lastPinchDiff = -1; // Holds last x/y distance between two pointers that are down
 let dragDiff = 0; // Holds accumlated change in pointer's x/y coordinate while dragging
 let dragHandler = 0; // Set by a setTimeout() to a handler for pointer dragging
+let dragVelocity: number; // Used to add 'drag momentum'
+let vUpdateTime: number; // Holds timestamp for last update of 'dragVelocityY'
+let vPrevPointer: null | number; // Holds pointerX/pointerY used for last update of 'dragVelocity'
+let vUpdater = 0; // Set by a setInterval(), used to update 'dragVelocity'
 function onPointerDown(evt: PointerEvent){
 	ptrEvtCache.push(evt);
 	// Update stored cursor position
 	pointerX = evt.clientX;
 	pointerY = evt.clientY;
+	// Update vars for dragging
+	dragDiff = 0;
+	dragVelocity = 0;
+	vUpdateTime = Date.now();
+	vPrevPointer = null;
+	vUpdater = setInterval(() => {
+		if (vPrevPointer != null){
+			let time = Date.now();
+			let ptrDiff = (vert2.value ? pointerY : pointerX) - vPrevPointer;
+			dragVelocity = ptrDiff / (time - vUpdateTime) * 1000;
+			vUpdateTime = time;
+		}
+		vPrevPointer = (vert2.value ? pointerY : pointerX);
+	}, 50);
 }
 function onPointerMove(evt: PointerEvent){
 	// Update event cache
@@ -288,7 +306,16 @@ function onPointerUp(evt: PointerEvent){
 	// Remove from event cache
 	const index = ptrEvtCache.findIndex((e) => e.pointerId == evt.pointerId);
 	ptrEvtCache.splice(index, 1);
-	// Reset other vars
+	// Possibly trigger 'drag momentum'
+	if (vUpdater != 0){ // Might be zero on pointerleave/etc
+		clearInterval(vUpdater);
+		vUpdater = 0;
+		if (lastPinchDiff == -1 && Math.abs(dragVelocity) > 10){
+			let scrollChg = dragVelocity * 0.1;
+			shiftTimeline(-scrollChg / props.height);
+		}
+	}
+	//
 	if (ptrEvtCache.length < 2){
 		lastPinchDiff = -1;
 	}
-- 
cgit v1.2.3

