diff --git a/frontend/src/components/shared/RightRail.tsx b/frontend/src/components/shared/RightRail.tsx index 79349bdb8..3abec0845 100644 --- a/frontend/src/components/shared/RightRail.tsx +++ b/frontend/src/components/shared/RightRail.tsx @@ -7,7 +7,6 @@ import { useRightRail } from '../../contexts/RightRailContext'; import { useFileState, useFileSelection, useFileManagement } from '../../contexts/FileContext'; import { useNavigationState } from '../../contexts/NavigationContext'; import { useTranslation } from 'react-i18next'; -import { usePanState } from '../../hooks/usePanState'; import LanguageSelector from '../shared/LanguageSelector'; import { useRainbowThemeContext } from '../shared/RainbowThemeProvider'; @@ -16,7 +15,7 @@ import BulkSelectionPanel from '../pageEditor/BulkSelectionPanel'; export default function RightRail() { const { t } = useTranslation(); - const isPanning = usePanState(); + const [isPanning, setIsPanning] = useState(false); const { toggleTheme } = useRainbowThemeContext(); const { buttons, actions } = useRightRail(); const topButtons = useMemo(() => buttons.filter(b => (b.section || 'top') === 'top' && (b.visible ?? true)), [buttons]); @@ -234,7 +233,10 @@ export default function RightRail() { color={isPanning ? "blue" : undefined} radius="md" className="right-rail-icon" - onClick={() => (window as any).embedPdfPan?.togglePan()} + onClick={() => { + (window as any).embedPdfPan?.togglePan(); + setIsPanning(!isPanning); + }} disabled={currentView !== 'viewer'} > diff --git a/frontend/src/components/viewer/PanControlsExporter.tsx b/frontend/src/components/viewer/PanControlsExporter.tsx index 6ed41bc29..ecd6915ca 100644 --- a/frontend/src/components/viewer/PanControlsExporter.tsx +++ b/frontend/src/components/viewer/PanControlsExporter.tsx @@ -21,11 +21,10 @@ export function PanControlsExporter() { pan.disablePan(); }, togglePan: () => { - console.log('EmbedPDF: Toggling pan mode, current isPanning:', isPanning); pan.togglePan(); }, makePanDefault: () => pan.makePanDefault(), - isPanning: isPanning, + get isPanning() { return isPanning; }, // Use getter to always return current value // Subscribe to pan state changes for reactive UI onPanStateChange: (callback: (isPanning: boolean) => void) => { setPanStateListeners(prev => [...prev, callback]); @@ -36,11 +35,6 @@ export function PanControlsExporter() { }, }; - console.log('EmbedPDF pan controls exported to window.embedPdfPan', { - isPanning, - panAPI: pan, - availableMethods: Object.keys(pan) - }); } else { console.warn('EmbedPDF pan API not available yet'); } diff --git a/frontend/src/components/viewer/PdfViewerToolbar.tsx b/frontend/src/components/viewer/PdfViewerToolbar.tsx index 1c24d752b..7f612a8ff 100644 --- a/frontend/src/components/viewer/PdfViewerToolbar.tsx +++ b/frontend/src/components/viewer/PdfViewerToolbar.tsx @@ -35,6 +35,7 @@ export function PdfViewerToolbar({ const [dynamicZoom, setDynamicZoom] = useState(currentZoom); const [dynamicPage, setDynamicPage] = useState(currentPage); const [dynamicTotalPages, setDynamicTotalPages] = useState(totalPages); + const [isPanning, setIsPanning] = useState(false); // Update zoom and scroll state from EmbedPDF APIs useEffect(() => { @@ -53,6 +54,12 @@ export function PdfViewerToolbar({ setDynamicTotalPages(totalPagesNum); setPageInput(currentPageNum); } + + // Update pan mode state + if ((window as any).embedPdfPan) { + const panState = (window as any).embedPdfPan.isPanning || false; + setIsPanning(panState); + } }; // Update state immediately diff --git a/frontend/src/hooks/usePanState.ts b/frontend/src/hooks/usePanState.ts deleted file mode 100644 index 424c26600..000000000 --- a/frontend/src/hooks/usePanState.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { useState, useEffect } from 'react'; - -/** - * Hook to track EmbedPDF pan state for reactive UI components - */ -export function usePanState() { - const [isPanning, setIsPanning] = useState(false); - - useEffect(() => { - // Subscribe to pan state changes - const unsubscribe = (window as any).embedPdfPan?.onPanStateChange?.((newIsPanning: boolean) => { - setIsPanning(newIsPanning); - }); - - // Get initial state - if ((window as any).embedPdfPan?.isPanning !== undefined) { - setIsPanning((window as any).embedPdfPan.isPanning); - } - - return unsubscribe || (() => {}); - }, []); - - return isPanning; -} \ No newline at end of file