Rubicon/tutu
1
0
Fork 0
Code Issues 18 Pull requests 1 Projects 1 Activity Actions

StackedRouter: increase swipe to back area
All checks were successful
/ depoly (push) Successful in 1m22s
Details

Browse source
This commit is contained in:
thislight 2024-11-21 16:22:22 +08:00
parent df5a976ec3
commit 8e8554331b
No known key found for this signature in database
GPG key ID: FCFE5192241CCD4E
1 changed files with 35 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

55
src/platform/StackedRouter.tsx
View file

@ -294,8 +294,9 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
}; };
let reenterableAnimation: Animation | undefined; let reenterableAnimation: Animation | undefined;
let origX = 0, let origWidth = 0,
origWidth = 0; origFigX = 0,
origFigY = 0;
const resetAnimation = () => { const resetAnimation = () => {
reenterableAnimation = undefined; reenterableAnimation = undefined;
@ -307,23 +308,25 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
if (event.touches.length !== 1) { if (event.touches.length !== 1) {
return; return;
} }
const [fig0] = event.touches;
const { x, width } = event.currentTarget.getBoundingClientRect();
if (fig0.clientX < x - 22 || fig0.clientX > x + 22) {
return;
}
origX = x;
origWidth = width;
event.preventDefault();
event.stopPropagation(); event.stopPropagation();
const lastFr = stack[stack.length - 1]; const [fig0] = event.touches;
const createAnimation = lastFr.animateClose ?? animateClose; const { width } = event.currentTarget.getBoundingClientRect();
reenterableAnimation = createAnimation(event.currentTarget); origWidth = width;
reenterableAnimation.pause(); origFigX = fig0.clientX;
reenterableAnimation.addEventListener("finish", resetAnimation); origFigY = fig0.clientY;
reenterableAnimation.addEventListener("cancel", resetAnimation);
if (
fig0.clientX < -22 ||
fig0.clientX > 22 ||
fig0.clientX < window.innerWidth - 22 ||
fig0.clientX > window.innerWidth + 22
) {
return;
}
// Prevent the default swipe to back/forward on iOS
event.preventDefault();
}; };
const onDialogTouchMove = ( const onDialogTouchMove = (
@ -336,13 +339,25 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
} }
} }
if (!reenterableAnimation) return; const [fig0] = event.touches;
const ofsX = fig0.clientX - origFigX;
if (!reenterableAnimation) {
if (!(ofsX > 22) || !(Math.abs(fig0.clientY - origFigY) < 44)) {
return;
}
const lastFr = stack[stack.length - 1];
const createAnimation = lastFr.animateClose ?? animateClose;
reenterableAnimation = createAnimation(event.currentTarget);
reenterableAnimation.pause();
reenterableAnimation.addEventListener("finish", resetAnimation);
reenterableAnimation.addEventListener("cancel", resetAnimation);
}
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
const [fig0] = event.touches;
const ofsX = fig0.clientX - origX;
const pc = ofsX / origWidth / window.devicePixelRatio; const pc = ofsX / origWidth / window.devicePixelRatio;
const { activeDuration, delay } = const { activeDuration, delay } =