Media editor modal: disable scroll wheel zoom while a pan/drag is active (WordPress#77863)

Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>

Author: ramonjd

packages/media-editor/src/image-editor/core/interaction-controller.ts

@@ -361,6 +361,10 @@ export class InteractionController {
 	handleWheel( e: WheelEvent ): void {
 		e.preventDefault();
 
+		if ( this.drag ) {
+			return;
+		}
+
 		// Debounced gesture boundaries for wheel zoom.
 		// Start on first wheel event, end after 300ms of no events.
 		if ( ! this.wheelGestureActive ) {

packages/media-editor/src/image-editor/core/test/interaction-controller.ts

@@ -465,6 +465,31 @@ describe( 'InteractionController', () => {
 			expect( setZoomCall![ 0 ] ).toBe( 4 );
 		} );
 
+		it( 'does not zoom while pointer pan is active', () => {
+			const state = makeState( { zoom: 2 } );
+			const { controller } = createController( state );
+			const el = createMockElement();
+
+			controller.handlePointerDown(
+				createPointerEvent( { clientX: 100, clientY: 100 } ),
+				el
+			);
+
+			jest.clearAllMocks();
+
+			const wheelEvent = createWheelEvent( {
+				deltaY: -100,
+				currentTarget: null,
+			} );
+			controller.handleWheel( wheelEvent );
+
+			expect( wheelEvent.preventDefault ).toHaveBeenCalled();
+			expect( actionMocks.setZoom ).not.toHaveBeenCalled();
+			expect( actionMocks.setZoomAtPoint ).not.toHaveBeenCalled();
+
+			el._fire( 'pointerup', createPointerEvent() );
+		} );
+
 		it( 'calls onGestureStart on first wheel, onGestureEnd after debounce', () => {
 			jest.useFakeTimers( {
 				doNotFake: [ 'requestAnimationFrame', 'cancelAnimationFrame' ],