timeline: fix pinch-zoom offset

2 files changed, 32 insertions, 10 deletions

diff --git a/src/web/component/timeline/index.css b/src/web/component/timeline/index.css
index 8e61fcf..6d58f59 100644
--- a/src/web/component/timeline/index.css
+++ b/src/web/component/timeline/index.css
@@ -2,7 +2,7 @@
 	width: 100%;
 	display: inline-grid;
 	gap: 0px;
-	transition: transform 0.1s ease;
+	overflow-y: auto;
 }
 
 .image {
diff --git a/src/web/component/timeline/index.js b/src/web/component/timeline/index.js
index 0e237a1..fa0601b 100644
--- a/src/web/component/timeline/index.js
+++ b/src/web/component/timeline/index.js
@@ -26,6 +26,9 @@ const zoom = new (class {
 		this.count = 5;
 		container.style.gridTemplateColumns = `repeat(5, 1fr)`;
 		container.classList.toggle('tiling', this.count != 1);
+		this.por = { x: 0, y: 0 };
+		this.eor = null;
+		this.y_offset = 0;
 	}
 
 	update(delta, point) {
@@ -33,23 +36,37 @@ const zoom = new (class {
 		this.count = Math.min(Math.max(this.count, 1), 20);
 
 		const scale = this.committed / this.count;
-		const rects = Z.document.getClientRects()[0];
 
-		const x = point.x;
-		const y = point.y - rects.y;
+		const x = point.x - this.por.x;
 
-		container.style.transformOrigin = `${x}px ${y}px`;
-		container.style.transform = `scale(${scale})`;
+		container.style.transform = `translate(${x}px, 0px) scale(${scale})`;
+	}
+
+	set point_of_reference(point) {
+		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;
 	}
 
 	commit() {
 		console.log('commit');
 		this.count = Math.round(this.count);
-		container.style.transform = 'scale(1)';
 		container.style.gridTemplateColumns = `repeat(${this.count}, 1fr)`;
 		container.classList.toggle('tiling', this.count != 1);
+		container.style.transform = 'scale(1)';
 		this.committed = this.count;
+
+		void container.offsetHeight;
+
+		const rect = this.eor.getBoundingClientRect();
+
+		Z.document.scrollBy({
+			top: rect.y - this.y_offset,
+			behavior: 'instant',
+		});
 	}
 });
 
@@ -63,10 +80,15 @@ Z.document.onwheel = (event) => {
 };
 
 const pinch = new Pinch(Z.document);
-pinch.onpinch = (delta, point) => {
-	zoom.update(delta / 20, point);
+
+pinch.onstart = (event) => {
+	zoom.point_of_reference = event.point;
+};
+
+pinch.onpinch = (event) => {
+	zoom.update(event.zoom_delta / 20, event.point);
 };
 
-pinch.onfinish = (delta) => {
+pinch.onfinish = () => {
 	zoom.commit();
 };