Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Reset rotation and position on double click #119

Merged
merged 12 commits into from
Apr 27, 2022
Merged

Reset rotation and position on double click #119

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
47ba8f3
Reset rotation and position on double click
harupy Apr 24, 2022
73c1fd1
add tests
harupy Apr 24, 2022
80163e1
address comment
harupy Apr 24, 2022
2b05c5d
use useCallback
harupy Apr 24, 2022
03b27a0
fix typo
harupy Apr 24, 2022
170557b
use img onDoubleClick prop
harupy Apr 24, 2022
1b98448
remove onDoubleClick from useEffect deps
harupy Apr 24, 2022
2bd86d5
fix tests
harupy Apr 24, 2022
8c0d923
fix coverage
harupy Apr 27, 2022
7022d57
fix tests
harupy Apr 27, 2022
f1d16ac
Update src/Preview.tsx
harupy Apr 27, 2022
27a0fa9
fix conditions
harupy Apr 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions src/Preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,6 +229,13 @@ const Preview: React.FC<PreviewProps> = props => {
],
);

const onDoubleClick = () => {
if (visible) {
harupy marked this conversation as resolved.
Show resolved Hide resolved
setScale(1);
setPosition(initialPosition);
}
};
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

加个 useCallBack，不然每次刷新都进下面的 useEffect 了。

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

完毕!


useEffect(() => {
const { wheelDirection } = lastWheelZoomDirection;
if (wheelDirection > 0) {
Expand Down Expand Up @@ -317,6 +324,7 @@ const Preview: React.FC<PreviewProps> = props => {
>
<img
onMouseDown={onMouseDown}
onDoubleClick={onDoubleClick}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@afc163 What do you think about the current implementation?

ref={imgRef}
className={`${prefixCls}-img`}
src={combinationSrc}
Expand Down
109 changes: 84 additions & 25 deletions tests/preview.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -165,6 +190,65 @@ describe('Preview', () => {
});
});

it('Reset scale on double click', () => {
const { container } = render(
<Image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />,
);

fireEvent.click(container.querySelector('.rc-image'));
act(() => {
jest.runAllTimers();
});

fireEvent.click(document.querySelectorAll('.rc-image-preview-operations-operation')[1]);
act(() => {
jest.runAllTimers();
});
expect(document.querySelector('.rc-image-preview-img')).toHaveStyle({
transform: 'scale3d(2, 2, 1) rotate(0deg)',
});

fireEvent.dblClick(document.querySelector('.rc-image-preview-img'));
act(() => {
jest.runAllTimers();
});
expect(document.querySelector('.rc-image-preview-img')).toHaveStyle({
transform: 'scale3d(1, 1, 1) rotate(0deg)',
});
});

it('Reset position on double click', () => {
const { container } = render(
<Image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />,
);

fireEvent.click(container.querySelector('.rc-image'));
act(() => {
jest.runAllTimers();
});

fireMouseEvent('mouseDown', document.querySelector('.rc-image-preview-img'), {
pageX: 0,
pageY: 0,
button: 0,
});
fireMouseEvent('mouseMove', window, {
pageX: 50,
pageY: 50,
});
expect(document.querySelector('.rc-image-preview-img-wrapper')).toHaveStyle({
transform: 'translate3d(50px, 50px, 0)',
});

fireEvent.dblClick(document.querySelector('.rc-image-preview-img'));
act(() => {
jest.runAllTimers();
});
expect(document.querySelector('.rc-image-preview-img-wrapper')).toHaveStyle({
transform: 'translate3d(0px, 0px, 0)',
});
});

it('Mouse Event', () => {
const clientWidthMock = jest
.spyOn(document.documentElement, 'clientWidth', 'get')
Expand All @@ -175,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,
Expand Down