mirror/outline
1
0
Fork 0
mirror of https://github.com/outline/outline.git synced 2026-05-12 21:30:50 -05:00
Code Issues Packages Projects Releases Wiki Activity

Regression in Lightbox swipe gestures (#10148)

Browse Source 
* fix: swipe

* fix: noTouchEnd not needed

* Revert "fix: noTouchEnd not needed"

This reverts commit cda9a0e49b.

* Revert "fix: swipe"

This reverts commit c05a50be2c.

* fix: fire upon single swipe detection

* chore: `useSwipe`
This commit is contained in:
Apoorv Mishra
2025-09-11 02:18:20 +05:30
committed by GitHub
parent 6fa98ffe3a
commit 839bf5cb91
2 changed files with 90 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Lightbox.tsx
+14 -52
View File
@@ -28,6 +28,7 @@ import Fade from "./Fade";
import Button from "./Button";
import CopyToClipboard from "./CopyToClipboard";
import { Separator } from "./Actions";
import useSwipe from "~/hooks/useSwipe";
export enum LightboxStatus {
READY_TO_OPEN,
@@ -550,7 +551,8 @@ function Lightbox({ onUpdate, activePos }: Props) {
}
onSwipeRight={prev}
onSwipeLeft={next}
onSwipeUpOrDown={close}
onSwipeUp={close}
onSwipeDown={close}
status={status}
animation={animation.current}
/>
@@ -575,7 +577,8 @@ type ImageProps = {
onError: () => void;
onSwipeRight: () => void;
onSwipeLeft: () => void;
onSwipeUpOrDown: () => void;
onSwipeUp: () => void;
onSwipeDown: () => void;
status: Status;
animation: Animation | null;
};
@@ -589,59 +592,21 @@ const Image = forwardRef<HTMLImageElement, ImageProps>(function _Image(
onError,
onSwipeRight,
onSwipeLeft,
onSwipeUpOrDown,
onSwipeUp,
onSwipeDown,
status,
animation,
}: ImageProps,
ref
) {
const { t } = useTranslation();
const touchXStart = useRef<number>();
const touchXEnd = useRef<number>();
const touchYStart = useRef<number>();
const touchYEnd = useRef<number>();
const handleTouchStart = (e: React.TouchEvent<HTMLImageElement>) => {
touchXStart.current = e.changedTouches[0].screenX;
touchYStart.current = e.changedTouches[0].screenY;
};
const handleTouchMove = (e: React.TouchEvent<HTMLImageElement>) => {
touchXEnd.current = e.changedTouches[0].screenX;
touchYEnd.current = e.changedTouches[0].screenY;
const dx = touchXEnd.current - (touchXStart.current ?? 0);
const dy = touchYEnd.current - (touchYStart.current ?? 0);
const swipeRight = dx > 0 && Math.abs(dy) < Math.abs(dx);
if (swipeRight) {
return onSwipeRight();
}
const swipeLeft = dx < 0 && Math.abs(dy) < Math.abs(dx);
if (swipeLeft) {
return onSwipeLeft();
}
const swipeDown = dy > 0 && Math.abs(dy) > Math.abs(dx);
const swipeUp = dy < 0 && Math.abs(dy) > Math.abs(dx);
if (swipeUp || swipeDown) {
return onSwipeUpOrDown();
}
};
const handleTouchEnd = () => {
touchXStart.current = undefined;
touchXEnd.current = undefined;
touchYStart.current = undefined;
touchYEnd.current = undefined;
};
const handleTouchCancel = () => {
touchXStart.current = undefined;
touchXEnd.current = undefined;
touchYStart.current = undefined;
touchYEnd.current = undefined;
};
const swipeHandlers = useSwipe({
onSwipeRight,
onSwipeLeft,
onSwipeUp,
onSwipeDown,
});
const [hidden, setHidden] = useState(
status.image === null || status.image === ImageStatus.LOADING
@@ -673,10 +638,7 @@ const Image = forwardRef<HTMLImageElement, ImageProps>(function _Image(
alt={alt}
animation={animation}
onAnimationStart={() => setHidden(false)}
onTouchStart={handleTouchStart}
onTouchMove={handleTouchMove}
onTouchEnd={handleTouchEnd}
onTouchCancel={handleTouchCancel}
{...swipeHandlers}
onError={onError}
onLoad={onLoad}
$hidden={hidden}
app/hooks/useSwipe.tsx
+76
View File
@@ -0,0 +1,76 @@
import { isNumber } from "lodash";
import { useRef } from "react";
type Props = {
onSwipeRight: () => void;
onSwipeLeft: () => void;
onSwipeUp: () => void;
onSwipeDown: () => void;
};
export default function useSwipe({
onSwipeRight,
onSwipeLeft,
onSwipeUp,
onSwipeDown,
}: Props) {
const touchXStart = useRef<number>();
const touchXEnd = useRef<number>();
const touchYStart = useRef<number>();
const touchYEnd = useRef<number>();
const resetTouchPoints = () => {
touchXStart.current = undefined;
touchXEnd.current = undefined;
touchYStart.current = undefined;
touchYEnd.current = undefined;
};
const onTouchStart = (e: React.TouchEvent<HTMLImageElement>) => {
touchXStart.current = e.changedTouches[0].screenX;
touchYStart.current = e.changedTouches[0].screenY;
};
const onTouchMove = (e: React.TouchEvent<HTMLImageElement>) => {
if (isNumber(touchXStart.current) && isNumber(touchYStart.current)) {
touchXEnd.current = e.changedTouches[0].screenX;
touchYEnd.current = e.changedTouches[0].screenY;
const dx = touchXEnd.current - touchXStart.current;
const dy = touchYEnd.current - touchYStart.current;
const swipeRight = dx > 0 && Math.abs(dy) < Math.abs(dx);
if (swipeRight) {
resetTouchPoints();
return onSwipeRight();
}
const swipeLeft = dx < 0 && Math.abs(dy) < Math.abs(dx);
if (swipeLeft) {
resetTouchPoints();
return onSwipeLeft();
}
const swipeDown = dy > 0 && Math.abs(dy) > Math.abs(dx);
if (swipeDown) {
resetTouchPoints();
return onSwipeDown();
}
const swipeUp = dy < 0 && Math.abs(dy) > Math.abs(dx);
if (swipeUp) {
resetTouchPoints();
return onSwipeUp();
}
}
};
const onTouchCancel = () => {
resetTouchPoints();
};
return {
onTouchStart,
onTouchMove,
onTouchCancel,
};
}