Add pinch events to control zooming (#370)

* add zoom and pan to image

* add pinch events on trackpad for zooming

meerkat/interactive/app/src/lib/component/core/image/Image.svelte

@@ -15,12 +15,15 @@
 	// Cursor style.
 	export let cursor: string = 'default';
 
-	console.log("Image.svelte: enableZoom = ", zoom);
-
 	const handleWheel = (event: WheelEvent) => {
+		if (!event.ctrlKey) {
+			return;
+		}
+
+		// Zoom in/out
 		const { deltaY } = event;
 		event.preventDefault();
-		zoom += deltaY * 0.01;
+		zoom += -deltaY * 0.01;
 		zoom = Math.max(zoom, 1);
 	};
 

meerkat/interactive/app/src/lib/component/core/medimage/MedicalImage.svelte

@@ -124,6 +124,13 @@
 	}
 
 	function handleScroll(event: WheelEvent) {
+		// Pinch-to-zoom action on MacOS.
+		// https://dev.to/danburzo/pinch-me-i-m-zooming-gestures-in-the-dom-a0e
+		if (event.ctrlKey) {
+			zoom += -event.deltaY * 0.01;
+			zoom = Math.max(zoom, 1);
+			return;
+		}
 		event.preventDefault();
 		if (numSlices === 1) {
 			return;