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

Added functionality for zoom in\out by sliding the wheel #52

Merged
merged 6 commits into from
Dec 22, 2020
Merged

Added functionality for zoom in\out by sliding the wheel #52

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9946d8a
- Added functionality for zoom in\out by moving the wheel. Listening …
Dec 20, 2020
73bc3df
- Added tests for zoom in and out by wheel
Dec 20, 2020
22d29d2
- CR fix 1: Zooming in/out using the wheel only if visible is true
Dec 21, 2020
a2a275a
- CR fix 2: Removed curly braces from the if-return statement
Dec 21, 2020
0e60a35
- CR fix 3: Creating a new object reference every wheel change to sup…
Dec 21, 2020
f900a46
- CR fix 4: Fixed compile error
Dec 22, 2020
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
Next Next commit
- 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.
  • Loading branch information
omri.g committed Dec 20, 2020
commit 9946d8ae8e6d6259aaea9b6ab28d0139b9c3b0e9
23 changes: 21 additions & 2 deletions src/Preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<IDialogPropTypes, 'onClose'> {
onClose?: (e: React.SyntheticEvent<Element>) => void;
Expand Down Expand Up @@ -55,6 +55,7 @@ const Preview: React.FC<PreviewProps> = 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);
Expand Down Expand Up @@ -176,12 +177,29 @@ const Preview: React.FC<PreviewProps> = props => {
}
};

React.useEffect(() => {
const onWheelMove: React.WheelEventHandler<HTMLBodyElement> = event => {
shaodahong marked this conversation as resolved.
Show resolved Hide resolved
event.preventDefault();
const wheelDirection = event.deltaY;
setLastWheelZoomDirection(wheelDirection);
shaodahong marked this conversation as resolved.
Show resolved Hide resolved
shaodahong marked this conversation as resolved.
Show resolved Hide resolved
};

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
Expand All @@ -198,6 +216,7 @@ const Preview: React.FC<PreviewProps> = props => {
return () => {
onMouseUpListener.remove();
onMouseMoveListener.remove();
onScrollWheelListener.remove();

/* istanbul ignore next */
if (onTopMouseUpListener) onTopMouseUpListener.remove();
Expand Down