From 816690360e391f17d632aa8869fa61eb0709f19e Mon Sep 17 00:00:00 2001 From: Richard Roberson Date: Sun, 26 Jan 2025 14:38:16 -0700 Subject: [PATCH] Fix horizontal PDF scale --- src/components/PDFViewer.tsx | 27 +++++++++++++++++++++------ src/contexts/PDFContext.tsx | 15 --------------- 2 files changed, 21 insertions(+), 21 deletions(-) diff --git a/src/components/PDFViewer.tsx b/src/components/PDFViewer.tsx index e743410..e07b6cf 100644 --- a/src/components/PDFViewer.tsx +++ b/src/components/PDFViewer.tsx @@ -1,10 +1,9 @@ 'use client'; -import { RefObject, useCallback } from 'react'; +import { RefObject, useCallback, useState, useEffect, useRef } from 'react'; import { Document, Page } from 'react-pdf'; import 'react-pdf/dist/Page/AnnotationLayer.css'; import 'react-pdf/dist/Page/TextLayer.css'; -import { useState, useEffect, useRef } from 'react'; import { PDFSkeleton } from './PDFSkeleton'; import { useTTS } from '@/contexts/TTSContext'; import { usePDF } from '@/contexts/PDFContext'; @@ -109,13 +108,25 @@ export function PDFViewer({ zoomLevel }: PDFViewerProps) { }; }, [currDocText, currentSentence, highlightPattern, clearHighlights]); - // Add scale calculation function - const calculateScale = useCallback((pageWidth = 595): number => { + // Add page dimensions state + const [pageWidth, setPageWidth] = useState(595); // default A4 width + const [pageHeight, setPageHeight] = useState(842); // default A4 height + + // Modify scale calculation function to handle orientation + const calculateScale = useCallback((width = pageWidth, height = pageHeight): number => { const margin = 24; // 24px padding on each side + const containerHeight = window.innerHeight - 100; // approximate visible height const targetWidth = containerWidth - margin; - const baseScale = targetWidth / pageWidth; + const targetHeight = containerHeight - margin; + + // Calculate scales based on both dimensions + const scaleByWidth = targetWidth / width; + const scaleByHeight = targetHeight / height; + + // Use the smaller scale to ensure the page fits both dimensions + const baseScale = Math.min(scaleByWidth, scaleByHeight); return baseScale * (zoomLevel / 100); - }, [containerWidth, zoomLevel]); + }, [containerWidth, zoomLevel, pageWidth, pageHeight]); // Add resize observer effect useEffect(() => { @@ -152,6 +163,10 @@ export function PDFViewer({ zoomLevel }: PDFViewerProps) { renderTextLayer={true} className="shadow-lg" scale={calculateScale()} + onLoadSuccess={(page) => { + setPageWidth(page.originalWidth); + setPageHeight(page.originalHeight); + }} /> diff --git a/src/contexts/PDFContext.tsx b/src/contexts/PDFContext.tsx index 04c4fd0..7e8df4e 100644 --- a/src/contexts/PDFContext.tsx +++ b/src/contexts/PDFContext.tsx @@ -39,7 +39,6 @@ interface PDFContextType { getDocument: (id: string) => Promise; removeDocument: (id: string) => Promise; isLoading: boolean; - error: string | null; extractTextFromPDF: (pdfURL: string, currDocPage: number) => Promise; highlightPattern: (text: string, pattern: string, containerRef: React.RefObject) => void; clearHighlights: () => void; @@ -65,7 +64,6 @@ const PDFContext = createContext(undefined); export function PDFProvider({ children }: { children: ReactNode }) { const [documents, setDocuments] = useState([]); const [isLoading, setIsLoading] = useState(true); - const [error, setError] = useState(null); const { isDBReady } = useConfig(); const { @@ -86,12 +84,10 @@ export function PDFProvider({ children }: { children: ReactNode }) { if (!isDBReady) return; try { - setError(null); const docs = await indexedDBService.getAllDocuments(); setDocuments(docs); } catch (error) { console.error('Failed to load documents:', error); - setError('Failed to load documents. Please try again.'); } finally { setIsLoading(false); } @@ -102,7 +98,6 @@ export function PDFProvider({ children }: { children: ReactNode }) { // Add a new document to IndexedDB const addDocument = useCallback(async (file: File): Promise => { - setError(null); const id = uuidv4(); const newDoc: PDFDocument = { id, @@ -118,32 +113,27 @@ export function PDFProvider({ children }: { children: ReactNode }) { return id; } catch (error) { console.error('Failed to add document:', error); - setError('Failed to save the document. Please try again.'); throw error; } }, []); // Get a document by ID from IndexedDB const getDocument = useCallback(async (id: string): Promise => { - setError(null); try { return await indexedDBService.getDocument(id); } catch (error) { console.error('Failed to get document:', error); - setError('Failed to retrieve the document. Please try again.'); return undefined; } }, []); // Remove a document by ID from IndexedDB const removeDocument = useCallback(async (id: string): Promise => { - setError(null); try { await indexedDBService.removeDocument(id); setDocuments((prev) => prev.filter((doc) => doc.id !== id)); } catch (error) { console.error('Failed to remove document:', error); - setError('Failed to remove the document. Please try again.'); throw error; } }, []); @@ -241,7 +231,6 @@ export function PDFProvider({ children }: { children: ReactNode }) { setTTSText(text); } catch (error) { console.error('Error loading PDF text:', error); - setError('Failed to extract PDF text'); } }, [currDocURL, currDocPage, extractTextFromPDF, setTTSText]); @@ -254,7 +243,6 @@ export function PDFProvider({ children }: { children: ReactNode }) { // Set curr document const setCurrentDocument = useCallback(async (id: string): Promise => { - setError(null); try { const doc = await getDocument(id); if (doc) { @@ -265,7 +253,6 @@ export function PDFProvider({ children }: { children: ReactNode }) { } } catch (error) { console.error('Failed to get document URL:', error); - setError('Failed to retrieve the document. Please try again.'); } }, [getDocument]); @@ -463,7 +450,6 @@ export function PDFProvider({ children }: { children: ReactNode }) { getDocument, removeDocument, isLoading, - error, extractTextFromPDF, highlightPattern, clearHighlights, @@ -483,7 +469,6 @@ export function PDFProvider({ children }: { children: ReactNode }) { getDocument, removeDocument, isLoading, - error, extractTextFromPDF, highlightPattern, clearHighlights,