From 8e8554331b39c6f8859c1a9fe17a8b6ee57f3023 Mon Sep 17 00:00:00 2001 From: thislight Date: Thu, 21 Nov 2024 16:22:22 +0800 Subject: [PATCH] StackedRouter: increase swipe to back area --- src/platform/StackedRouter.tsx | 55 +++++++++++++++++++++------------- 1 file changed, 35 insertions(+), 20 deletions(-) diff --git a/src/platform/StackedRouter.tsx b/src/platform/StackedRouter.tsx index bc3e948..4eb58bb 100644 --- a/src/platform/StackedRouter.tsx +++ b/src/platform/StackedRouter.tsx @@ -294,8 +294,9 @@ const StackedRouter: Component = (oprops) => { }; let reenterableAnimation: Animation | undefined; - let origX = 0, - origWidth = 0; + let origWidth = 0, + origFigX = 0, + origFigY = 0; const resetAnimation = () => { reenterableAnimation = undefined; @@ -307,23 +308,25 @@ const StackedRouter: Component = (oprops) => { if (event.touches.length !== 1) { 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(); - 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); + const [fig0] = event.touches; + const { width } = event.currentTarget.getBoundingClientRect(); + origWidth = width; + origFigX = fig0.clientX; + origFigY = fig0.clientY; + + 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 = ( @@ -336,13 +339,25 @@ const StackedRouter: Component = (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.stopPropagation(); - const [fig0] = event.touches; - const ofsX = fig0.clientX - origX; const pc = ofsX / origWidth / window.devicePixelRatio; const { activeDuration, delay } =