From 47ba8f3b29854508b41815883798052dbcfd4c5c Mon Sep 17 00:00:00 2001 From: harupy Date: Sun, 24 Apr 2022 14:51:14 +0900 Subject: [PATCH 01/12] Reset rotation and position on double click --- src/Preview.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/Preview.tsx b/src/Preview.tsx index a2fa55e3..372b7dab 100644 --- a/src/Preview.tsx +++ b/src/Preview.tsx @@ -229,6 +229,13 @@ const Preview: React.FC = props => { ], ); + const onDoubleClick: React.MouseEventHandler = () => { + if (visible) { + setScale(1); + setPosition(initialPosition); + } + }; + useEffect(() => { const { wheelDirection } = lastWheelZoomDirection; if (wheelDirection > 0) { @@ -248,6 +255,7 @@ const Preview: React.FC = props => { passive: false, }); const onKeyDownListener = addEventListener(window, 'keydown', onKeyDown, false); + const onDoubleClickLister = addEventListener(window, 'dblclick', onDoubleClick, false); try { // Resolve if in iframe lost event @@ -266,13 +274,14 @@ const Preview: React.FC = props => { onMouseMoveListener.remove(); onScrollWheelListener.remove(); onKeyDownListener.remove(); + onDoubleClickLister.remove(); /* istanbul ignore next */ if (onTopMouseUpListener) onTopMouseUpListener.remove(); /* istanbul ignore next */ if (onTopMouseMoveListener) onTopMouseMoveListener.remove(); }; - }, [visible, isMoving, onKeyDown]); + }, [visible, isMoving, onKeyDown, onDoubleClick]); return ( Date: Sun, 24 Apr 2022 15:56:33 +0900 Subject: [PATCH 02/12] add tests --- tests/preview.test.tsx | 71 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 71 insertions(+) diff --git a/tests/preview.test.tsx b/tests/preview.test.tsx index 5084ec54..40a74493 100644 --- a/tests/preview.test.tsx +++ b/tests/preview.test.tsx @@ -165,6 +165,77 @@ describe('Preview', () => { }); }); + it('Reset scale on double click', () => { + const wrapper = mount( + , + ); + + act(() => { + wrapper.find('.rc-image').simulate('click'); + jest.runAllTimers(); + wrapper.update(); + }); + + act(() => { + wrapper.find('.rc-image-preview-operations-operation').at(1).simulate('click'); + jest.runAllTimers(); + wrapper.update(); + }); + expect(wrapper.find('.rc-image-preview-img').prop('style')).toMatchObject({ + transform: 'scale3d(2, 2, 1) rotate(0deg)', + }); + + const doubleClickEvent = new Event('dblclick'); + act(() => { + global.dispatchEvent(doubleClickEvent); + jest.runAllTimers(); + wrapper.update(); + }); + expect(wrapper.find('.rc-image-preview-img').prop('style')).toMatchObject({ + transform: 'scale3d(1, 1, 1) rotate(0deg)', + }); + }); + + it('Reset position on double click', () => { + const wrapper = mount( + , + ); + + wrapper.find('.rc-image').simulate('click'); + wrapper.find('.rc-image-preview-img').simulate('mousedown', { + pageX: 0, + pageY: 0, + button: 0, + }); + + const mousemoveEvent = new Event('mousemove'); + + // @ts-ignore + mousemoveEvent.pageX = 50; + // @ts-ignore + mousemoveEvent.pageY = 50; + + act(() => { + global.dispatchEvent(mousemoveEvent); + jest.runAllTimers(); + wrapper.update(); + }); + + expect(wrapper.find('.rc-image-preview-img-wrapper').prop('style')).toMatchObject({ + transform: 'translate3d(50px, 50px, 0)', + }); + + const doubleClickEvent = new Event('dblclick'); + act(() => { + global.dispatchEvent(doubleClickEvent); + jest.runAllTimers(); + wrapper.update(); + }); + expect(wrapper.find('.rc-image-preview-img-wrapper').prop('style')).toMatchObject({ + transform: 'translate3d(0px, 0px, 0)', + }); + }); + it('Mouse Event', () => { const clientWidthMock = jest .spyOn(document.documentElement, 'clientWidth', 'get') From 80163e11af52c979177067fbed125e2c7a52f9c6 Mon Sep 17 00:00:00 2001 From: harupy Date: Sun, 24 Apr 2022 16:07:31 +0900 Subject: [PATCH 03/12] address comment --- src/Preview.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/Preview.tsx b/src/Preview.tsx index 372b7dab..76044f19 100644 --- a/src/Preview.tsx +++ b/src/Preview.tsx @@ -230,10 +230,11 @@ const Preview: React.FC = props => { ); const onDoubleClick: React.MouseEventHandler = () => { - if (visible) { - setScale(1); - setPosition(initialPosition); + if (!visible) { + return; } + setScale(1); + setPosition(initialPosition); }; useEffect(() => { From 2b05c5d103e098801e3be5df75c97dec7229519b Mon Sep 17 00:00:00 2001 From: harupy Date: Sun, 24 Apr 2022 16:39:58 +0900 Subject: [PATCH 04/12] use useCallback --- src/Preview.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Preview.tsx b/src/Preview.tsx index 76044f19..de5c186b 100644 --- a/src/Preview.tsx +++ b/src/Preview.tsx @@ -229,13 +229,13 @@ const Preview: React.FC = props => { ], ); - const onDoubleClick: React.MouseEventHandler = () => { + const onDoubleClick = useCallback(() => { if (!visible) { return; } setScale(1); setPosition(initialPosition); - }; + }, [setScale, setPosition, visible]); useEffect(() => { const { wheelDirection } = lastWheelZoomDirection; From 03b27a03a2b337790330e102f1dcc04b18c106e7 Mon Sep 17 00:00:00 2001 From: harupy Date: Sun, 24 Apr 2022 17:05:58 +0900 Subject: [PATCH 05/12] fix typo --- src/Preview.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Preview.tsx b/src/Preview.tsx index de5c186b..393f59dc 100644 --- a/src/Preview.tsx +++ b/src/Preview.tsx @@ -256,7 +256,7 @@ const Preview: React.FC = props => { passive: false, }); const onKeyDownListener = addEventListener(window, 'keydown', onKeyDown, false); - const onDoubleClickLister = addEventListener(window, 'dblclick', onDoubleClick, false); + const onDoubleClickListener = addEventListener(window, 'dblclick', onDoubleClick, false); try { // Resolve if in iframe lost event @@ -275,7 +275,7 @@ const Preview: React.FC = props => { onMouseMoveListener.remove(); onScrollWheelListener.remove(); onKeyDownListener.remove(); - onDoubleClickLister.remove(); + onDoubleClickListener.remove(); /* istanbul ignore next */ if (onTopMouseUpListener) onTopMouseUpListener.remove(); From 170557b619f2da87f893514ff35347e6eca2abc2 Mon Sep 17 00:00:00 2001 From: harupy Date: Sun, 24 Apr 2022 17:41:09 +0900 Subject: [PATCH 06/12] use img onDoubleClick prop --- src/Preview.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/Preview.tsx b/src/Preview.tsx index 393f59dc..02195f4b 100644 --- a/src/Preview.tsx +++ b/src/Preview.tsx @@ -229,13 +229,13 @@ const Preview: React.FC = props => { ], ); - const onDoubleClick = useCallback(() => { + const onDoubleClick = () => { if (!visible) { return; } setScale(1); setPosition(initialPosition); - }, [setScale, setPosition, visible]); + }; useEffect(() => { const { wheelDirection } = lastWheelZoomDirection; @@ -256,7 +256,6 @@ const Preview: React.FC = props => { passive: false, }); const onKeyDownListener = addEventListener(window, 'keydown', onKeyDown, false); - const onDoubleClickListener = addEventListener(window, 'dblclick', onDoubleClick, false); try { // Resolve if in iframe lost event @@ -275,7 +274,6 @@ const Preview: React.FC = props => { onMouseMoveListener.remove(); onScrollWheelListener.remove(); onKeyDownListener.remove(); - onDoubleClickListener.remove(); /* istanbul ignore next */ if (onTopMouseUpListener) onTopMouseUpListener.remove(); @@ -327,6 +325,7 @@ const Preview: React.FC = props => { > Date: Sun, 24 Apr 2022 17:53:57 +0900 Subject: [PATCH 07/12] remove onDoubleClick from useEffect deps --- src/Preview.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Preview.tsx b/src/Preview.tsx index 02195f4b..17cebead 100644 --- a/src/Preview.tsx +++ b/src/Preview.tsx @@ -280,7 +280,7 @@ const Preview: React.FC = props => { /* istanbul ignore next */ if (onTopMouseMoveListener) onTopMouseMoveListener.remove(); }; - }, [visible, isMoving, onKeyDown, onDoubleClick]); + }, [visible, isMoving, onKeyDown]); return ( Date: Sun, 24 Apr 2022 18:02:34 +0900 Subject: [PATCH 08/12] fix tests --- tests/preview.test.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/tests/preview.test.tsx b/tests/preview.test.tsx index 40a74493..002b9cdb 100644 --- a/tests/preview.test.tsx +++ b/tests/preview.test.tsx @@ -185,9 +185,8 @@ describe('Preview', () => { transform: 'scale3d(2, 2, 1) rotate(0deg)', }); - const doubleClickEvent = new Event('dblclick'); act(() => { - global.dispatchEvent(doubleClickEvent); + wrapper.find('.rc-image-preview-img').simulate('dblclick'); jest.runAllTimers(); wrapper.update(); }); @@ -225,9 +224,8 @@ describe('Preview', () => { transform: 'translate3d(50px, 50px, 0)', }); - const doubleClickEvent = new Event('dblclick'); act(() => { - global.dispatchEvent(doubleClickEvent); + wrapper.find('.rc-image-preview-img').simulate('dblclick'); jest.runAllTimers(); wrapper.update(); }); From 8c0d9236aeb0c7d2481aa235d3271163de811239 Mon Sep 17 00:00:00 2001 From: harupy Date: Wed, 27 Apr 2022 11:10:28 +0900 Subject: [PATCH 09/12] fix coverage --- src/Preview.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/Preview.tsx b/src/Preview.tsx index 17cebead..e613c7ba 100644 --- a/src/Preview.tsx +++ b/src/Preview.tsx @@ -230,11 +230,10 @@ const Preview: React.FC = props => { ); const onDoubleClick = () => { - if (!visible) { - return; + if (visible) { + setScale(1); + setPosition(initialPosition); } - setScale(1); - setPosition(initialPosition); }; useEffect(() => { From 7022d57f16f04f5ae404ba1b9a2cb4c5a3f30563 Mon Sep 17 00:00:00 2001 From: harupy Date: Wed, 27 Apr 2022 13:14:01 +0900 Subject: [PATCH 10/12] fix tests --- tests/preview.test.tsx | 98 +++++++++++++++++++----------------------- 1 file changed, 44 insertions(+), 54 deletions(-) diff --git a/tests/preview.test.tsx b/tests/preview.test.tsx index 002b9cdb..4b434ccc 100644 --- a/tests/preview.test.tsx +++ b/tests/preview.test.tsx @@ -33,6 +33,31 @@ describe('Preview', () => { jest.useRealTimers(); }); + const fireMouseEvent = ( + eventName: 'mouseDown' | 'mouseMove' | 'mouseUp', + element: Element | Window, + info: { + pageX?: number; + pageY?: number; + button?: number; + } = {}, + ) => { + const event = createEvent[eventName](element); + Object.keys(info).forEach(key => { + Object.defineProperty(event, key, { + get: () => info[key], + }); + }); + + act(() => { + fireEvent(element, event); + }); + + act(() => { + jest.runAllTimers(); + }); + }; + it('Show preview and close', () => { const onPreviewCloseMock = jest.fn(); const { container } = render( @@ -166,70 +191,60 @@ describe('Preview', () => { }); it('Reset scale on double click', () => { - const wrapper = mount( + const { container } = render( , ); + fireEvent.click(container.querySelector('.rc-image')); act(() => { - wrapper.find('.rc-image').simulate('click'); jest.runAllTimers(); - wrapper.update(); }); + fireEvent.click(document.querySelectorAll('.rc-image-preview-operations-operation')[1]); act(() => { - wrapper.find('.rc-image-preview-operations-operation').at(1).simulate('click'); jest.runAllTimers(); - wrapper.update(); }); - expect(wrapper.find('.rc-image-preview-img').prop('style')).toMatchObject({ + expect(document.querySelector('.rc-image-preview-img')).toHaveStyle({ transform: 'scale3d(2, 2, 1) rotate(0deg)', }); + fireEvent.dblClick(document.querySelector('.rc-image-preview-img')); act(() => { - wrapper.find('.rc-image-preview-img').simulate('dblclick'); jest.runAllTimers(); - wrapper.update(); }); - expect(wrapper.find('.rc-image-preview-img').prop('style')).toMatchObject({ + expect(document.querySelector('.rc-image-preview-img')).toHaveStyle({ transform: 'scale3d(1, 1, 1) rotate(0deg)', }); }); it('Reset position on double click', () => { - const wrapper = mount( + const { container } = render( , ); - wrapper.find('.rc-image').simulate('click'); - wrapper.find('.rc-image-preview-img').simulate('mousedown', { + fireEvent.click(container.querySelector('.rc-image')); + act(() => { + jest.runAllTimers(); + }); + + fireMouseEvent('mouseDown', document.querySelector('.rc-image-preview-img'), { pageX: 0, pageY: 0, button: 0, }); - - const mousemoveEvent = new Event('mousemove'); - - // @ts-ignore - mousemoveEvent.pageX = 50; - // @ts-ignore - mousemoveEvent.pageY = 50; - - act(() => { - global.dispatchEvent(mousemoveEvent); - jest.runAllTimers(); - wrapper.update(); + fireMouseEvent('mouseMove', window, { + pageX: 50, + pageY: 50, }); - - expect(wrapper.find('.rc-image-preview-img-wrapper').prop('style')).toMatchObject({ + expect(document.querySelector('.rc-image-preview-img-wrapper')).toHaveStyle({ transform: 'translate3d(50px, 50px, 0)', }); + fireEvent.dblClick(document.querySelector('.rc-image-preview-img')); act(() => { - wrapper.find('.rc-image-preview-img').simulate('dblclick'); jest.runAllTimers(); - wrapper.update(); }); - expect(wrapper.find('.rc-image-preview-img-wrapper').prop('style')).toMatchObject({ + expect(document.querySelector('.rc-image-preview-img-wrapper')).toHaveStyle({ transform: 'translate3d(0px, 0px, 0)', }); }); @@ -244,31 +259,6 @@ describe('Preview', () => { let left = 0; let top = 0; - const fireMouseEvent = ( - eventName: 'mouseDown' | 'mouseMove' | 'mouseUp', - element: Element | Window, - info: { - pageX?: number; - pageY?: number; - button?: number; - } = {}, - ) => { - const event = createEvent[eventName](element); - Object.keys(info).forEach(key => { - Object.defineProperty(event, key, { - get: () => info[key], - }); - }); - - act(() => { - fireEvent(element, event); - }); - - act(() => { - jest.runAllTimers(); - }); - }; - const imgEleMock = spyElementPrototypes(HTMLImageElement, { offsetWidth: { get: () => offsetWidth, From f1d16ac4630b1d90dea1ab57aa76a38f529398c8 Mon Sep 17 00:00:00 2001 From: Harutaka Kawamura Date: Wed, 27 Apr 2022 13:28:58 +0900 Subject: [PATCH 11/12] Update src/Preview.tsx Co-authored-by: afc163 --- src/Preview.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Preview.tsx b/src/Preview.tsx index e613c7ba..2dcd6a12 100644 --- a/src/Preview.tsx +++ b/src/Preview.tsx @@ -230,7 +230,7 @@ const Preview: React.FC = props => { ); const onDoubleClick = () => { - if (visible) { + if (visible && scale !== 1) { setScale(1); setPosition(initialPosition); } From 27a0fa97c8187c67fab2586a2a75d4565eadbe73 Mon Sep 17 00:00:00 2001 From: harupy Date: Wed, 27 Apr 2022 16:10:46 +0900 Subject: [PATCH 12/12] fix conditions Signed-off-by: harupy --- src/Preview.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/Preview.tsx b/src/Preview.tsx index 2dcd6a12..e17cc528 100644 --- a/src/Preview.tsx +++ b/src/Preview.tsx @@ -230,9 +230,13 @@ const Preview: React.FC = props => { ); const onDoubleClick = () => { - if (visible && scale !== 1) { - setScale(1); - setPosition(initialPosition); + if (visible) { + if (scale !== 1) { + setScale(1); + } + if (position.x !== initialPosition.x || position.y !== initialPosition.y) { + setPosition(initialPosition); + } } };