dist

src/Model/Utility/utility.ts

@@ -229,6 +229,8 @@ export function localeCompare(a: string, b: string): number {
 // ui
 export function implementPinchZoom(canvas: HTMLElement) {
     let pinching = false;
+    let dragging = false;
+    let scrolling = false;
     let lastElement: HTMLElement | undefined = undefined;
 
     let initialDistance: number,
@@ -292,25 +294,55 @@ export function implementPinchZoom(canvas: HTMLElement) {
     canvas.addEventListener("wheel", (event: WheelEvent) => {
         event.preventDefault();
 
+	if (!scrolling) {
         initialZoom = currentZoom;
         initialX = currentX;
         initialY = currentY;
-
-        if (!event.shiftKey) {
-            apply(currentZoom, [
-                currentX - event.deltaX,
-                currentY - event.deltaY,
-            ]);
-            return;
+	    scrolling = true
 	}
-        apply(currentZoom - event.deltaY * 0.01);
+
+	const canvasWidth = canvas.offsetWidth;
+	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();
     });
 
+    canvas.addEventListener("mousedown", (event: MouseEvent) => {
+	initialZoom = currentZoom;
+	initialX = currentX;
+	initialY = currentY;
+	initialTouchX = event.clientX;
+	initialTouchY = event.clientY;
+	dragging = true;
+    })
+    canvas.addEventListener("mouseup", () => {
+	dragging = false;
+    })
+    canvas.addEventListener("mousemove", (event: MouseEvent) => {
+	if (!dragging) return;
+	apply(currentZoom, [
+	    initialX +
+	    (event.clientX - initialTouchX) / initialZoom,
+	    initialY +
+	    (event.clientY - initialTouchY) / initialZoom,
+	]);
+    })
+
     canvas.addEventListener("touchstart", (event: TouchEvent) => {
-        (document.activeElement as HTMLElement).blur();
+	(document.activeElement as HTMLElement)?.blur();
 
 	const el = element();
 	if (!el) return;