IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'feature/new-viewer' of github.com:ONLYOFFICE/DocSpace into feature/new-viewer

Browse Source
This commit is contained in:
DmitrySychugov 2023-01-16 14:07:22 +05:00
commit dea8435427
1 changed files with 33 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
packages/components/viewer/sub-components/mobile-viewer.js
View File

@ -19,6 +19,7 @@ function MobileViewer({
const lastTapTime = React.useRef(0); const lastTapTime = React.useRef(0);
const unmount = React.useRef(false); const unmount = React.useRef(false);
const isDoubleTapRef = React.useRef(false); const isDoubleTapRef = React.useRef(false);
const setTimeoutIDTap = React.useRef();
const [crop, setCrop] = React.useState({ const [crop, setCrop] = React.useState({
x: left, x: left,
@ -32,6 +33,7 @@ function MobileViewer({
unmount.current = false; unmount.current = false;
return () => { return () => {
setTimeoutIDTap.current && clearTimeout(setTimeoutIDTap.current);
unmount.current = true; unmount.current = true;
}; };
}, []); }, []);
@ -95,32 +97,6 @@ function MobileViewer({
useGesture( useGesture(
{ {
onDragStart: ({ pinching }) => {
if (pinching) return;
const time = new Date().getTime();
if (time - lastTapTime.current < 300) {
lastTapTime.current = 0;
isDoubleTapRef.current = true;
const imageWidth = imgRef.current.width;
const imageHeight = imgRef.current.height;
const containerBounds = imgRef.current.parentNode.getBoundingClientRect();
const deltaWidth = (containerBounds.width - imageWidth) / 2;
const deltaHeight = (containerBounds.height - imageHeight) / 2;
setCrop((pre) => ({
...pre,
scale: 1,
rotate: 0,
x: deltaWidth,
y: deltaHeight,
}));
} else {
lastTapTime.current = time;
}
},
onDrag: ({ onDrag: ({
offset: [dx, dy], offset: [dx, dy],
movement: [mdx, mdy], movement: [mdx, mdy],
@ -150,7 +126,7 @@ function MobileViewer({
})); }));
}, },
onDragEnd: ({ cancel, canceled, movement: [mdx, mdy] }) => { onDragEnd: ({ cancel, canceled, movement: [mdx, mdy], dragging }) => {
if (unmount.current) { if (unmount.current) {
return; return;
} }
@ -159,7 +135,6 @@ function MobileViewer({
isDoubleTapRef.current = false; isDoubleTapRef.current = false;
cancel(); cancel();
} }
if (crop.scale === 1) { if (crop.scale === 1) {
if (mdx < -imgRef.current.width / 4) { if (mdx < -imgRef.current.width / 4) {
return onNext(); return onNext();
@ -212,8 +187,6 @@ function MobileViewer({
return memo; return memo;
}, },
onPinchEnd: (event) => { onPinchEnd: (event) => {
console.log("onPinchEnd", event, unmount.current);
if (unmount.current) { if (unmount.current) {
return; return;
} }
@ -224,8 +197,36 @@ function MobileViewer({
}); });
setCrop((pre) => ({ ...pre, ...newPoint })); setCrop((pre) => ({ ...pre, ...newPoint }));
}, },
onClick: (event) => { onClick: () => {
setPanelVisible((visible) => !visible); const time = new Date().getTime();
if (time - lastTapTime.current < 300) {
//on Double Tap
lastTapTime.current = 0;
isDoubleTapRef.current = true;
const imageWidth = imgRef.current.width;
const imageHeight = imgRef.current.height;
const containerBounds = imgRef.current.parentNode.getBoundingClientRect();
const deltaWidth = (containerBounds.width - imageWidth) / 2;
const deltaHeight = (containerBounds.height - imageHeight) / 2;
setCrop((pre) => ({
...pre,
scale: 1,
rotate: 0,
x: deltaWidth,
y: deltaHeight,
}));
clearTimeout(setTimeoutIDTap.current);
} else {
lastTapTime.current = time;
setTimeoutIDTap.current = setTimeout(() => {
// onTap
setPanelVisible((visible) => !visible);
}, 300);
}
}, },
}, },
{ {