From 6160718fd20db6bac6dd511183a30359d9420140 Mon Sep 17 00:00:00 2001
From: Joe Boccanfuso <109477394+jbocce@users.noreply.github.com>
Date: Thu, 5 Dec 2024 20:57:34 -0500
Subject: [PATCH] fix(touch): For viewport interactions use onPointerDown.
 (#4572)

---
 .../integration/customization/OHIFDoubleClick.spec.js | 11 +++--------
 .../ui/src/components/ViewportPane/ViewportPane.tsx   |  4 +++-
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/platform/app/cypress/integration/customization/OHIFDoubleClick.spec.js b/platform/app/cypress/integration/customization/OHIFDoubleClick.spec.js
index 20a3a6cd1..eff5d321a 100644
--- a/platform/app/cypress/integration/customization/OHIFDoubleClick.spec.js
+++ b/platform/app/cypress/integration/customization/OHIFDoubleClick.spec.js
@@ -18,14 +18,9 @@ describe('OHIF Double Click', () => {
 
       // For whatever reason, with Cypress tests, we have to activate the
       // viewport we are double clicking first.
-      cy.get('[data-cy="viewport-pane"]')
-        .eq(i)
-        .trigger('mousedown', 'center', {
-          force: true,
-        })
-        .trigger('mouseup', 'center', {
-          force: true,
-        });
+      cy.get('[data-cy="viewport-pane"]').eq(i).trigger('click', 'center', {
+        force: true,
+      });
 
       // Wait for the viewport to be 'active'.
       // TODO Is there a better way to do this?
diff --git a/platform/ui/src/components/ViewportPane/ViewportPane.tsx b/platform/ui/src/components/ViewportPane/ViewportPane.tsx
index aa79c9a20..c7f1b12e5 100644
--- a/platform/ui/src/components/ViewportPane/ViewportPane.tsx
+++ b/platform/ui/src/components/ViewportPane/ViewportPane.tsx
@@ -58,7 +58,9 @@ function ViewportPane({
       // onInteractionHandler...
       // https://reactjs.org/docs/events.html#mouse-events
       // https://stackoverflow.com/questions/8378243/catch-scrolling-event-on-overflowhidden-element
-      onMouseDown={onInteractionHandler}
+      // Use onPointerDown so that for the config property activateViewportBeforeInteraction===false,
+      // a touch drag will activate the viewport as well as apply the tool selected.
+      onPointerDown={onInteractionHandler}
       onDoubleClick={onDoubleClick}
       onClick={onInteractionHandler}
       onScroll={onInteractionHandler}