From 50a76fa4e0f18b7802896927635031fc5fdeb53d Mon Sep 17 00:00:00 2001 From: Arjun Desai Date: Mon, 26 Jun 2023 20:15:55 -0700 Subject: [PATCH] Add pinch events to control zooming (#370) * add zoom and pan to image * add pinch events on trackpad for zooming --- .../app/src/lib/component/core/image/Image.svelte | 9 ++++++--- .../src/lib/component/core/medimage/MedicalImage.svelte | 7 +++++++ 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/meerkat/interactive/app/src/lib/component/core/image/Image.svelte b/meerkat/interactive/app/src/lib/component/core/image/Image.svelte index 60dff0890..8fcc299be 100644 --- a/meerkat/interactive/app/src/lib/component/core/image/Image.svelte +++ b/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); }; diff --git a/meerkat/interactive/app/src/lib/component/core/medimage/MedicalImage.svelte b/meerkat/interactive/app/src/lib/component/core/medimage/MedicalImage.svelte index 11452d191..6f4aa62bf 100644 --- a/meerkat/interactive/app/src/lib/component/core/medimage/MedicalImage.svelte +++ b/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;