From 9946d8ae8e6d6259aaea9b6ab28d0139b9c3b0e9 Mon Sep 17 00:00:00 2001 From: "omri.g" Date: Sun, 20 Dec 2020 16:40:23 +0200 Subject: [PATCH 1/6] - Added functionality for zoom in\out by moving the wheel. Listening to wheel event the determine the direction of the scrolling, and by that decide if zooming in or out. --- src/Preview.tsx | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/src/Preview.tsx b/src/Preview.tsx index cc975c93..a68bc340 100644 --- a/src/Preview.tsx +++ b/src/Preview.tsx @@ -15,7 +15,7 @@ import useFrameSetState from './hooks/useFrameSetState'; import getFixScaleEleTransPosition from './getFixScaleEleTransPosition'; import { context } from './PreviewGroup'; -const { useState } = React; +const { useState, useEffect } = React; interface PreviewProps extends Omit { onClose?: (e: React.SyntheticEvent) => void; @@ -55,6 +55,7 @@ const Preview: React.FC = props => { const currentPreviewIndex = previewUrlsKeys.indexOf(current); const combinationSrc = isPreviewGroup ? previewUrls.get(current) : src; const showLeftOrRightSwitches = isPreviewGroup && previewGroupCount > 1; + const [lastWheelZoomDirection, setLastWheelZoomDirection] = React.useState(0); const onAfterClose = () => { setScale(1); @@ -176,12 +177,29 @@ const Preview: React.FC = props => { } }; - React.useEffect(() => { + const onWheelMove: React.WheelEventHandler = event => { + event.preventDefault(); + const wheelDirection = event.deltaY; + setLastWheelZoomDirection(wheelDirection); + }; + + useEffect(() => { + if (lastWheelZoomDirection > 0) { + onZoomOut(); + } else if (lastWheelZoomDirection < 0) { + onZoomIn(); + } + }, [lastWheelZoomDirection]); + + useEffect(() => { let onTopMouseUpListener; let onTopMouseMoveListener; const onMouseUpListener = addEventListener(window, 'mouseup', onMouseUp, false); const onMouseMoveListener = addEventListener(window, 'mousemove', onMouseMove, false); + const onScrollWheelListener = addEventListener(window, 'wheel', onWheelMove, { + passive: false, + }); try { // Resolve if in iframe lost event @@ -198,6 +216,7 @@ const Preview: React.FC = props => { return () => { onMouseUpListener.remove(); onMouseMoveListener.remove(); + onScrollWheelListener.remove(); /* istanbul ignore next */ if (onTopMouseUpListener) onTopMouseUpListener.remove(); From 73bc3df0d9ea06f364297163ae368b2b10af2c1d Mon Sep 17 00:00:00 2001 From: "omri.g" Date: Sun, 20 Dec 2020 16:51:55 +0200 Subject: [PATCH 2/6] - Added tests for zoom in and out by wheel --- tests/preview.test.tsx | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/tests/preview.test.tsx b/tests/preview.test.tsx index 30ac9ed0..05e1ac69 100644 --- a/tests/preview.test.tsx +++ b/tests/preview.test.tsx @@ -153,6 +153,28 @@ describe('Preview', () => { expect(wrapper.find('.rc-image-preview-img').prop('style')).toMatchObject({ transform: 'scale3d(1, 1, 1) rotate(0deg)', }); + + act(() => { + const wheelEvent = new Event('wheel'); + wheelEvent.deltaY = -50; + global.dispatchEvent(wheelEvent); + jest.runAllTimers(); + wrapper.update(); + }); + expect(wrapper.find('.rc-image-preview-img').prop('style')).toMatchObject({ + transform: 'scale3d(2, 2, 1) rotate(0deg)', + }); + + act(() => { + const wheelEvent = new Event('wheel'); + wheelEvent.deltaY = 50; + global.dispatchEvent(wheelEvent); + jest.runAllTimers(); + wrapper.update(); + }); + expect(wrapper.find('.rc-image-preview-img').prop('style')).toMatchObject({ + transform: 'scale3d(1, 1, 1) rotate(0deg)', + }); }); it('Mouse Event', () => { From 22d29d22d633de15026511e3c01599385d73888e Mon Sep 17 00:00:00 2001 From: "omri.g" Date: Mon, 21 Dec 2020 13:01:04 +0200 Subject: [PATCH 3/6] - CR fix 1: Zooming in/out using the wheel only if visible is true --- src/Preview.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/Preview.tsx b/src/Preview.tsx index a68bc340..a86327bd 100644 --- a/src/Preview.tsx +++ b/src/Preview.tsx @@ -178,6 +178,9 @@ const Preview: React.FC = props => { }; const onWheelMove: React.WheelEventHandler = event => { + if (!visible) { + return; + } event.preventDefault(); const wheelDirection = event.deltaY; setLastWheelZoomDirection(wheelDirection); From a2a275ab7f4a031a4855bb36f77c522e37a547b8 Mon Sep 17 00:00:00 2001 From: "omri.g" Date: Mon, 21 Dec 2020 13:11:15 +0200 Subject: [PATCH 4/6] - CR fix 2: Removed curly braces from the if-return statement --- src/Preview.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/Preview.tsx b/src/Preview.tsx index a86327bd..b58bffb9 100644 --- a/src/Preview.tsx +++ b/src/Preview.tsx @@ -178,9 +178,7 @@ const Preview: React.FC = props => { }; const onWheelMove: React.WheelEventHandler = event => { - if (!visible) { - return; - } + if (!visible) return; event.preventDefault(); const wheelDirection = event.deltaY; setLastWheelZoomDirection(wheelDirection); From 0e60a35023c8911179b0caed4501456c760a2837 Mon Sep 17 00:00:00 2001 From: "omri.g" Date: Tue, 22 Dec 2020 00:38:22 +0200 Subject: [PATCH 5/6] - CR fix 3: Creating a new object reference every wheel change to support same wheel `deltaY` on every change --- src/Preview.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/Preview.tsx b/src/Preview.tsx index b58bffb9..0b9fcbbd 100644 --- a/src/Preview.tsx +++ b/src/Preview.tsx @@ -55,7 +55,7 @@ const Preview: React.FC = props => { const currentPreviewIndex = previewUrlsKeys.indexOf(current); const combinationSrc = isPreviewGroup ? previewUrls.get(current) : src; const showLeftOrRightSwitches = isPreviewGroup && previewGroupCount > 1; - const [lastWheelZoomDirection, setLastWheelZoomDirection] = React.useState(0); + const [lastWheelZoomDirection, setLastWheelZoomDirection] = React.useState({}); const onAfterClose = () => { setScale(1); @@ -181,13 +181,14 @@ const Preview: React.FC = props => { if (!visible) return; event.preventDefault(); const wheelDirection = event.deltaY; - setLastWheelZoomDirection(wheelDirection); + setLastWheelZoomDirection({ wheelDirection }); }; useEffect(() => { - if (lastWheelZoomDirection > 0) { + const { wheelDirection } = lastWheelZoomDirection; + if (wheelDirection > 0) { onZoomOut(); - } else if (lastWheelZoomDirection < 0) { + } else if (wheelDirection < 0) { onZoomIn(); } }, [lastWheelZoomDirection]); From f900a4671741564680c13f07cef57f4e1de49d20 Mon Sep 17 00:00:00 2001 From: "omri.g" Date: Tue, 22 Dec 2020 11:04:29 +0200 Subject: [PATCH 6/6] - CR fix 4: Fixed compile error --- src/Preview.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Preview.tsx b/src/Preview.tsx index 0b9fcbbd..92ef3cd7 100644 --- a/src/Preview.tsx +++ b/src/Preview.tsx @@ -55,7 +55,7 @@ const Preview: React.FC = props => { const currentPreviewIndex = previewUrlsKeys.indexOf(current); const combinationSrc = isPreviewGroup ? previewUrls.get(current) : src; const showLeftOrRightSwitches = isPreviewGroup && previewGroupCount > 1; - const [lastWheelZoomDirection, setLastWheelZoomDirection] = React.useState({}); + const [lastWheelZoomDirection, setLastWheelZoomDirection] = React.useState({ wheelDirection: 0 }); const onAfterClose = () => { setScale(1);