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:
@@ -63,17 +63,31 @@ const usePreserveOnWindowResize = (
|
||||
pageIndex: number,
|
||||
) => {
|
||||
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 { width, height } = previousDimensionsRef.current;
|
||||
previousDimensionsRef.current = { width: window.innerWidth, height: window.innerHeight };
|
||||
|
||||
if (!isResizeInProgressRef.current) {
|
||||
isResizeInProgressRef.current = true;
|
||||
pageIndexOnResizeStartRef.current = pageIndex;
|
||||
}
|
||||
|
||||
if (!shouldPreserveOnResizeChange(readingMode, pageScaleMode, width, height)) {
|
||||
return;
|
||||
}
|
||||
|
||||
setPageToScrollToIndex(pageIndex);
|
||||
}, [readingMode, pageScaleMode, pageIndex]);
|
||||
setPageToScrollToIndex(pageIndexOnResizeStartRef.current);
|
||||
|
||||
clearTimeout(activeResizeTimeoutRef.current);
|
||||
activeResizeTimeoutRef.current = setTimeout(() => {
|
||||
isResizeInProgressRef.current = false;
|
||||
pageIndexOnResizeStartRef.current = null;
|
||||
}, 50);
|
||||
}, [readingMode, pageScaleMode]);
|
||||
|
||||
useWindowEvent('resize', handleResize);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user