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;