Preserve correct page index during reader resize

Ensure the restored page index is based on the page index at the start of a resize event to maintain consistency.
At least in the continuous horizontal mode, it was possible to sometimes cause the page to change while resizing.
This commit is contained in:
schroda
2025-09-27 14:01:35 +02:00
parent 1c526b3feb
commit b1babc9dd1

View File

@@ -63,17 +63,31 @@ const usePreserveOnWindowResize = (
pageIndex: number, pageIndex: number,
) => { ) => {
const previousDimensionsRef = useRef({ width: window.innerWidth, height: window.innerHeight }); const previousDimensionsRef = useRef({ width: window.innerWidth, height: window.innerHeight });
const isResizeInProgressRef = useRef(false);
const activeResizeTimeoutRef = useRef<NodeJS.Timeout>(undefined);
const pageIndexOnResizeStartRef = useRef<number | null>(null);
const handleResize = useCallback(() => { const handleResize = useCallback(() => {
const { width, height } = previousDimensionsRef.current; const { width, height } = previousDimensionsRef.current;
previousDimensionsRef.current = { width: window.innerWidth, height: window.innerHeight }; previousDimensionsRef.current = { width: window.innerWidth, height: window.innerHeight };
if (!isResizeInProgressRef.current) {
isResizeInProgressRef.current = true;
pageIndexOnResizeStartRef.current = pageIndex;
}
if (!shouldPreserveOnResizeChange(readingMode, pageScaleMode, width, height)) { if (!shouldPreserveOnResizeChange(readingMode, pageScaleMode, width, height)) {
return; return;
} }
setPageToScrollToIndex(pageIndex); setPageToScrollToIndex(pageIndexOnResizeStartRef.current);
}, [readingMode, pageScaleMode, pageIndex]);
clearTimeout(activeResizeTimeoutRef.current);
activeResizeTimeoutRef.current = setTimeout(() => {
isResizeInProgressRef.current = false;
pageIndexOnResizeStartRef.current = null;
}, 50);
}, [readingMode, pageScaleMode]);
useWindowEvent('resize', handleResize); useWindowEvent('resize', handleResize);
}; };