improve zooming and scrolling

src/Model/Global/fileTransferModel.ts

@@ -149,14 +149,15 @@ export default class FileTransferModel {
             });
         }
         const rawBackup = stringify(files);
-	console.log(rawBackup);
+        console.log(rawBackup);
         const encrypted = await encryptString(rawBackup, passphrase);
-	const blob = new Blob([encrypted], {type: "text/plain"});
-	return blob;
+        const blob = new Blob([encrypted], { type: "text/plain" });
+        return blob;
     };
 
     readonly prepareFileForSending = (filePath: string[]): string => {
-        const fileContent: string | undefined = this.storageModel.read(filePath);
+        const fileContent: string | undefined =
+            this.storageModel.read(filePath);
         if (fileContent == null) return "";
 
         const fileData: FileData = {

src/Model/Utility/utility.ts

@@ -278,32 +278,95 @@ export function localeCompare(a: string, b: string): number {
     return a.localeCompare(b);
 }
 
-// ui 
-export function implementPinchZoom(element: HTMLElement) {
-    let initialDistance = 0;
+// ui
+export function implementPinchZoom(targetSelector: string) {
     let pinching = false;
 
-    const distance = (e: TouchEvent) => Math.hypot(e.touches[0].pageX - e.touches[1].pageX,
-        e.touches[0].pageY - e.touches[1].pageY);
-    function apply(factor) {
-	element.style.transform = `scale(${(Math.floor(factor*100)/100).toString()})`;
+    let initialDistance = 0;
+
+    let currentZoom = 1;
+    let initialZoom = 1;
+
+    let currentX = 0;
+    let currentY = 0;
+    let initialX = 0;
+    let initialY = 0;
+    let initialTouchX = 0;
+    let initialTouchY = 0;
+
+    const MIN = 0.25;
+    const MAX = 5;
+
+    const element = (): HTMLElement => canvas.querySelector(targetSelector);
+    const parent = (): HTMLElement => element().parentElement;
+    const distance = (e: TouchEvent) =>
+        Math.hypot(
+            e.touches[0].pageX - e.touches[1].pageX,
+            e.touches[0].pageY - e.touches[1].pageY,
+        );
+    const point = (e: TouchEvent, direction: "x" | "y", i: number) =>
+        e.touches[i][direction == "x" ? "clientX" : "clientY"];
+    const midpoint = (e: TouchEvent, direction: "x" | "y") =>
+        (point(e, direction, 0) + point(e, direction, 1)) / 2;
+
+    function apply(factor: number, offset: [number, number]) {
+        if (factor < MIN) return apply(MIN, offset);
+        if (factor > MAX) return apply(5, offset);
+        if (!element) return;
+
+        const [x, y] = offset;
+        element().style.transform = `scale(${(Math.floor(factor * 100) / 100).toString()}) translate(${x}px, ${y}px)`;
+        currentX = x;
+        currentY = y;
+        currentZoom = factor;
     }
 
-    element.addEventListener("touchstart", (event: TouchEvent) => {
-	if (event.touches.length != 2) return;
-	initialDistance = distance(event);
+    const canvas = document.body;
+    canvas.addEventListener("touchstart", (event: TouchEvent) => {
+	(document.activeElement as HTMLElement).blur();
+
+        initialZoom = currentZoom;
+	initialX = currentX;
+	initialY = currentY;
+
+        if (event.touches.length != 2) {
+	    pinching = false;
+	    initialTouchX = event.touches[0].clientX;
+	    initialTouchY = event.touches[0].clientY;
+	    return;
+	}
+
 	pinching = true;
-	apply(1);
+	initialDistance = distance(event);
+	initialTouchX = midpoint(event, "x");
+	initialTouchY = midpoint(event, "y");
     });
-    element.addEventListener("touchend", (event: TouchEvent) => {
-	if (event.touches.length == 2) return;
-	pinching = false;
-    })
-    element.addEventListener("touchmove", (event: TouchEvent) => {
-	if (!pinching) return;
+    canvas.addEventListener("touchmove", (event: TouchEvent) => {
+	if (!pinching) {
+	    apply(currentZoom, [
+		initialX + (((event.touches[0].clientX - initialTouchX)/initialZoom)),
+		initialY + ((event.touches[0].clientY - initialTouchY)/initialZoom),
+	    ]);
+	    return;
+	}
+	if (event.touches.length < 2) return;
 	event.preventDefault();
 	const currentDistance = distance(event);
-	const factor = currentDistance / initialDistance;
-	apply(factor);
-    })
-} 
+	const midX = midpoint(event, "x");
+	const midY = midpoint(event, "y");
+	const ratio = currentDistance / initialDistance;
+	const difference = currentDistance - initialDistance;
+	apply(initialZoom * ratio, [initialX + (midX - difference - initialTouchX)/initialZoom, initialY + (midY - difference - initialTouchY)/initialZoom]);
+    });
+    canvas.addEventListener("wheel", (event: WheelEvent) => {
+	event.preventDefault();
+	if (!event.shiftKey) {
+	    apply(currentZoom, [currentX - event.deltaX, currentY - event.deltaY]);
+	    return;
+	};
+	apply(currentZoom + (event.deltaY < 0 ? 1 : -1) * 0.1, [initialX, initialY]);
+    });
+    canvas.addEventListener("scroll", (event: MouseEvent) => {
+	event.preventDefault();
+    });
+}