fix(touch): For viewport interactions use onPointerDown. (#4572)

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?

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}