saulteafarmer/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2025-09-18 01:19:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix scroll page identification

Browse Source
This commit is contained in:
Reece Browne 2025-09-17 14:35:44 +01:00
parent dac176f0c6
commit da6ecc6619
3 changed files with 28 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/components/viewer/PdfViewerToolbar.tsx
View File

@ -33,17 +33,20 @@ export function PdfViewerToolbar({
currentZoom: _currentZoom = 100,
}: PdfViewerToolbarProps) {
const { t } = useTranslation();
const { getScrollState, getZoomState, scrollActions, zoomActions, registerImmediateZoomUpdate } = useViewer();
const { getScrollState, getZoomState, scrollActions, zoomActions, registerImmediateZoomUpdate, registerImmediateScrollUpdate } = useViewer();
const scrollState = getScrollState();
const zoomState = getZoomState();
const [pageInput, setPageInput] = useState(scrollState.currentPage || currentPage);
const [displayZoomPercent, setDisplayZoomPercent] = useState(zoomState.zoomPercent || 140);
// Update page input when scroll state changes
// Register for immediate scroll updates and sync with actual scroll state
useEffect(() => {
registerImmediateScrollUpdate((currentPage, totalPages) => {
setPageInput(currentPage);
});
setPageInput(scrollState.currentPage);
}, [scrollState.currentPage]);
}, [registerImmediateScrollUpdate]);
// Register for immediate zoom updates and sync with actual zoom state
useEffect(() => {

4
frontend/src/components/viewer/ScrollAPIBridge.tsx
View File

@ -8,7 +8,7 @@ import { useViewer } from '../../contexts/ViewerContext';
*/
export function ScrollAPIBridge() {
const { provides: scroll, state: scrollState } = useScroll();
const { registerBridge } = useViewer();
const { registerBridge, triggerImmediateScrollUpdate } = useViewer();
const [_localState, setLocalState] = useState({
currentPage: 1,
@ -25,6 +25,8 @@ export function ScrollAPIBridge() {
setLocalState(prevState => {
// Only update if state actually changed
if (prevState.currentPage !== newState.currentPage || prevState.totalPages !== newState.totalPages) {
// Trigger immediate update for responsive UI
triggerImmediateScrollUpdate(newState.currentPage, newState.totalPages);
return newState;
}
return prevState;

19
frontend/src/contexts/ViewerContext.tsx
View File

@ -61,6 +61,10 @@ interface ViewerContextType {
// Immediate update callbacks
registerImmediateZoomUpdate: (callback: (percent: number) => void) => void;
registerImmediateScrollUpdate: (callback: (currentPage: number, totalPages: number) => void) => void;
// Internal - for bridges to trigger immediate updates
triggerImmediateScrollUpdate: (currentPage: number, totalPages: number) => void;
// Action handlers - call EmbedPDF APIs directly
scrollActions: {
@ -139,6 +143,9 @@ export const ViewerProvider: React.FC<ViewerProviderProps> = ({ children }) => {
// Immediate zoom callback for responsive display updates
const immediateZoomUpdateCallback = useRef<((percent: number) => void) | null>(null);
// Immediate scroll callback for responsive display updates
const immediateScrollUpdateCallback = useRef<((currentPage: number, totalPages: number) => void) | null>(null);
const registerBridge = (type: string, ref: BridgeRef) => {
bridgeRefs.current[type as keyof typeof bridgeRefs.current] = ref;
};
@ -383,6 +390,16 @@ export const ViewerProvider: React.FC<ViewerProviderProps> = ({ children }) => {
immediateZoomUpdateCallback.current = callback;
};
const registerImmediateScrollUpdate = (callback: (currentPage: number, totalPages: number) => void) => {
immediateScrollUpdateCallback.current = callback;
};
const triggerImmediateScrollUpdate = (currentPage: number, totalPages: number) => {
if (immediateScrollUpdateCallback.current) {
immediateScrollUpdateCallback.current(currentPage, totalPages);
}
};
const value: ViewerContextType = {
// UI state
isThumbnailSidebarVisible,
@ -401,6 +418,8 @@ export const ViewerProvider: React.FC<ViewerProviderProps> = ({ children }) => {
// Immediate updates
registerImmediateZoomUpdate,
registerImmediateScrollUpdate,
triggerImmediateScrollUpdate,
// Actions
scrollActions,