3 files changed, 45 insertions, 44 deletions

diff --git a/src/web/component/timeline/index.js b/src/web/component/timeline/index.js
index fa0601b..f83a159 100644
--- a/src/web/component/timeline/index.js
+++ b/src/web/component/timeline/index.js
@@ -23,43 +23,39 @@ for (let i = 0; i < 10000; ++i) {
 const zoom = new (class {
 	constructor() {
 		this.committed = 5;
-		this.count = 5;
 		container.style.gridTemplateColumns = `repeat(5, 1fr)`;
-		container.classList.toggle('tiling', this.count != 1);
+		container.classList.toggle('tiling', this.committed != 1);
 		this.por = { x: 0, y: 0 };
 		this.eor = null;
 		this.y_offset = 0;
+		this.distance = 0;
 	}
 
-	update(delta, point) {
-		this.count += delta;
-		this.count = Math.min(Math.max(this.count, 1), 20);
-
-		const scale = this.committed / this.count;
-
+	update(distance, point) {
+		const scale = distance / this.distance;
 		const x = point.x - this.por.x;
-
 		container.style.transform = `translate(${x}px, 0px) scale(${scale})`;
 	}
 
-	set point_of_reference(point) {
+	set reference({ point, distance }) {
 		const rect = container.getClientRects()[0];
 
 		this.por = { x: point.x, y: point.y - rect.y };
 		container.style.transformOrigin = `${this.por.x}px ${this.por.y}px`;
 		this.eor = Z.document.shadowRoot.elementFromPoint(point.x, point.y);
-		this.y_offset = this.eor.getBoundingClientRect().y;
+
+		const box_rect = this.eor.getBoundingClientRect();
+		this.y_offset = box_rect.y;
+
+		this.distance = distance;
 	}
 
-	commit() {
-		console.log('commit');
-		this.count = Math.round(this.count);
-		container.style.gridTemplateColumns = `repeat(${this.count}, 1fr)`;
-		container.classList.toggle('tiling', this.count != 1);
+	commit(distance) {
+		const scale = distance / this.distance;
+		this.committed = Math.round(Math.min(Math.max(this.committed / scale, 1), 20));
+		container.style.gridTemplateColumns = `repeat(${this.committed}, 1fr)`;
+		container.classList.toggle('tiling', this.committed != 1);
 		container.style.transform = 'scale(1)';
-		this.committed = this.count;
-
-		void container.offsetHeight;
 
 		const rect = this.eor.getBoundingClientRect();
 
@@ -75,20 +71,19 @@ Z.document.onwheel = (event) => {
 		return;
 	}
 	event.preventDefault();
-	zoom.update(event.wheelDeltaY / 120, { x: 0, y: 0 });
-	zoom.commit();
+	// TODO
 };
 
 const pinch = new Pinch(Z.document);
 
 pinch.onstart = (event) => {
-	zoom.point_of_reference = event.point;
+	zoom.reference = event;
 };
 
 pinch.onpinch = (event) => {
-	zoom.update(event.zoom_delta / 20, event.point);
+	zoom.update(event.distance, event.point);
 };
 
-pinch.onfinish = () => {
-	zoom.commit();
+pinch.onfinish = (event) => {
+	zoom.commit(event.distance);
 };
diff --git a/src/web/index.css b/src/web/index.css
index 934c713..6b1927f 100644
--- a/src/web/index.css
+++ b/src/web/index.css
@@ -16,4 +16,5 @@ body {
 	display: block;
 	height: 100vh;
 	overflow-y: auto;
+	background: gray;
 }
diff --git a/src/web/pinch.js b/src/web/pinch.js
index 935dfa0..bb06b0d 100644
--- a/src/web/pinch.js
+++ b/src/web/pinch.js
@@ -1,7 +1,6 @@
 class Pinch {
 	constructor(element) {
 		this.event_cache = [];
-		this.previous_diff = null;
 		this.onpinch = () => {};
 		this.onfinish = () => {};
 		this.onstart = () => {};
@@ -18,12 +17,17 @@ class Pinch {
 		this.event_cache.push(event);
 
 		if (this.event_cache.length === 2) {
+			const diff = Math.hypot(
+				this.event_cache[0].clientX - this.event_cache[1].clientX,
+				this.event_cache[0].clientY - this.event_cache[1].clientY,
+			);
+
 			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 });
+			this.onstart({ point, distance: diff });
 		}
 	}
 
@@ -34,30 +38,35 @@ class Pinch {
 		this.event_cache[index] = event;
 
 		if (this.event_cache.length === 2) {
-			event.preventDefault();
-
 			const diff = Math.hypot(
 				this.event_cache[0].clientX - this.event_cache[1].clientX,
 				this.event_cache[0].clientY - this.event_cache[1].clientY,
 			);
 
-			if (this.previous_diff != null) {
-				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,
-				};
-
-				const delta = this.previous_diff - diff;
-				this.onpinch({ zoom_delta: delta, point });
-			}
+			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.previous_diff = diff;
+			this.onpinch({ distance: diff, point });
 		}
 	}
 
 	pointer_up_handler(event) {
 		let cleanup = false;
+		const ev = {};
+
 		if (this.event_cache.length === 2) {
+			ev['distance'] = Math.hypot(
+				this.event_cache[0].clientX - this.event_cache[1].clientX,
+				this.event_cache[0].clientY - this.event_cache[1].clientY,
+			);
+
+			ev['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,
+			};
+
 			cleanup = true;
 		}
 
@@ -66,12 +75,8 @@ class Pinch {
 		);
 		this.event_cache.splice(index, 1);
 
-		if (this.event_cache.length < 2) {
-			this.previous_diff = null;
-		}
-
 		if (cleanup) {
-			this.onfinish();
+			this.onfinish(ev);
 		}
 	}
 }