timeline: fix pinch-zoom offset

1 files changed, 19 insertions, 2 deletions

diff --git a/src/web/pinch.js b/src/web/pinch.js
index 14f843a..935dfa0 100644
--- a/src/web/pinch.js
+++ b/src/web/pinch.js
@@ -4,6 +4,7 @@ class Pinch {
 		this.previous_diff = null;
 		this.onpinch = () => {};
 		this.onfinish = () => {};
+		this.onstart = () => {};
 
 		element.onpointerdown = (e) => this.pointer_down_handler(e);
 		element.onpointermove = (e) => this.pointer_move_handler(e);
@@ -15,6 +16,15 @@ class Pinch {
 
 	pointer_down_handler(event) {
 		this.event_cache.push(event);
+
+		if (this.event_cache.length === 2) {
+			const point = {
+				x: (this.event_cache[0].clientX + this.event_cache[1].clientX) / 2,
+				y: (this.event_cache[0].clientY + this.event_cache[1].clientY) / 2,
+			};
+
+			this.onstart({ point });
+		}
 	}
 
 	pointer_move_handler(event) {
@@ -38,7 +48,7 @@ class Pinch {
 				};
 
 				const delta = this.previous_diff - diff;
-				this.onpinch(delta, point);
+				this.onpinch({ zoom_delta: delta, point });
 			}
 
 			this.previous_diff = diff;
@@ -46,6 +56,11 @@ class Pinch {
 	}
 
 	pointer_up_handler(event) {
+		let cleanup = false;
+		if (this.event_cache.length === 2) {
+			cleanup = true;
+		}
+
 		const index = this.event_cache.findIndex(
 			(cached) => cached.pointerId === event.pointerId,
 		);
@@ -55,6 +70,8 @@ class Pinch {
 			this.previous_diff = null;
 		}
 
-		this.onfinish();
+		if (cleanup) {
+			this.onfinish();
+		}
 	}
 }