first sketch of pinch zoom

2 files changed, 51 insertions, 12 deletions

diff --git a/src/web/component/timeline/index.css b/src/web/component/timeline/index.css
index 4060deb..8e61fcf 100644
--- a/src/web/component/timeline/index.css
+++ b/src/web/component/timeline/index.css
@@ -2,6 +2,15 @@
 	width: 100%;
 	display: inline-grid;
 	gap: 0px;
+	transition: transform 0.1s ease;
+}
+
+.image {
+	text-align: center;
+	align-content: center;
+	font-weight: bold;
+	font-size: 0.5em;
+	overflow: hidden;
 }
 
 #container.tiling .image {
diff --git a/src/web/component/timeline/index.js b/src/web/component/timeline/index.js
index 0bbbcc2..0e237a1 100644
--- a/src/web/component/timeline/index.js
+++ b/src/web/component/timeline/index.js
@@ -9,8 +9,9 @@ function getRandomColor() {
   return color;
 }
 
-for (let i = 0; i < 100; ++i) {
+for (let i = 0; i < 10000; ++i) {
 	container.appendChild(Z.native('div', {
+		innerText: i,
 		className: 'image',
 		style: {
 			background: getRandomColor(),
@@ -19,24 +20,53 @@ for (let i = 0; i < 100; ++i) {
 	}));
 }
 
-const set_number_of_rows = (n) => {
-	container.style.gridTemplateColumns = '1fr '.repeat(n);
+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', n != 1);
-};
+	update(delta, point) {
+		this.count += delta;
+		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;
 
-let zoom_state = 5;
-set_number_of_rows(zoom_state);
+		container.style.transformOrigin = `${x}px ${y}px`;
+		container.style.transform = `scale(${scale})`;
 
+	}
+
+	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);
+		this.committed = this.count;
+	}
+});
 
 Z.document.onwheel = (event) => {
 	if (!event.ctrlKey) {
 		return;
 	}
-
 	event.preventDefault();
+	zoom.update(event.wheelDeltaY / 120, { x: 0, y: 0 });
+	zoom.commit();
+};
 
-	zoom_state += event.wheelDeltaY / 120;
-	zoom_state = Math.max(zoom_state, 1);
-	set_number_of_rows(zoom_state);
-}
+const pinch = new Pinch(Z.document);
+pinch.onpinch = (delta, point) => {
+	zoom.update(delta / 20, point);
+};
+
+pinch.onfinish = (delta) => {
+	zoom.commit();
+};