improve pinch to zoom

src/Model/Utility/utility.ts

@@ -230,7 +230,6 @@ export function localeCompare(a: string, b: string): number {
 export function implementPinchZoom(canvas: HTMLElement) {
     let pinching = false;
     let dragging = false;
-    let scrolling = false;
     let lastElement: HTMLElement | undefined = undefined;
 
     let initialDistance: number,
@@ -294,28 +293,12 @@ export function implementPinchZoom(canvas: HTMLElement) {
     canvas.addEventListener("wheel", (event: WheelEvent) => {
 	event.preventDefault();
 
-	if (!scrolling) {
 	initialZoom = currentZoom;
 	initialX = currentX;
 	initialY = currentY;
-	    scrolling = true
-	}
 
-	const canvasWidth = canvas.offsetWidth;
+	apply(currentZoom - event.deltaY * 0.005);
-	const canvasHeight = canvas.offsetHeight;
-	const initialWidth = canvasWidth * initialZoom;
-	const initialHeight = canvasHeight * initialZoom;
-	const currentWidth = canvasWidth * currentZoom;
-	const currentHeight = canvasHeight * currentZoom;
-
-	const differenceWidth  = currentWidth - initialWidth;
-	const differenceHeight  = currentHeight - initialHeight;
-
-        apply(currentZoom - event.deltaY * 0.005, [initialX - differenceWidth, initialY - differenceHeight]);
     });
-    canvas.addEventListener("scrollend", () => {
-	scrolling = false;
-    })
     canvas.addEventListener("scroll", (event: Event) => {
 	event.preventDefault();
     });
@@ -378,14 +361,8 @@ export function implementPinchZoom(canvas: HTMLElement) {
 	if (event.touches.length < 2) return;
 	event.preventDefault();
 	const currentDistance = distance(event);
-	const midX = midpoint(event, "x");
-	const midY = midpoint(event, "y");
 	const ratio = currentDistance / initialDistance;
-	const difference = currentDistance - initialDistance;
+	apply(initialZoom * ratio);
-	apply(initialZoom * ratio, [
-	    initialX + (midX - difference - initialTouchX) / initialZoom,
-	    initialY + (midY - difference - initialTouchY) / initialZoom,
-	]);
     });
 }
 

src/View/ChatPages/taskPage.css

@@ -25,19 +25,6 @@
     padding: var(--content-padding);
 }
 
-#chat-page > div > #main > #task-page .zoom {
-    display: flex;
-    align-items: start;
-    gap: var(--large-gap);
-
-    width: auto;
-    height: auto;
-
-    transform-origin: top left;
-
-    padding: var(--content-padding);
-}
-
 #board-content .main-content {
     overflow: auto;
 }

src/ViewModel/Global/coreViewModel.ts

@@ -9,7 +9,7 @@ import ConnectionModel from "../../Model/Global/connectionModel";
 import ChatListModel from "../../Model/Chat/chatListModel";
 
 export default class CoreViewModel {
-    readonly BUILD = "Build 26.09.24.B";
+    readonly BUILD = "Build 26.09.24.C";
 
     translations: Translations;
 

src/base.css

@@ -97,3 +97,18 @@ body[theme="dark"] #background-wrapper #grass-2 {
     --color-1: hsl(110, 60%, 30%);
     --color-2: hsl(110, 50%, 24%);
 }
+
+/* Zoom */
+.zoom {
+    display: flex;
+    align-items: start;
+    gap: var(--large-gap);
+
+    width: auto;
+    height: auto;
+
+    transform-origin: center;
+
+    padding: var(--content-padding);
+}
+