diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-js-viewer.tsx b/services/web/frontend/js/features/pdf-preview/components/pdf-js-viewer.tsx index bb79627518..4e955d91a7 100644 --- a/services/web/frontend/js/features/pdf-preview/components/pdf-js-viewer.tsx +++ b/services/web/frontend/js/features/pdf-preview/components/pdf-js-viewer.tsx @@ -39,9 +39,9 @@ function PdfJsViewer({ url, pdfFile }: PdfJsViewerProps) { // rawScale is different from scale as it is always a number. // This is relevant when scale is e.g. 'page-width'. - const [rawScale, setRawScale] = useState(null) - const [page, setPage] = useState(null) - const [totalPages, setTotalPages] = useState(null) + const [rawScale, setRawScale] = useState(null) + const [page, setPage] = useState(null) + const [totalPages, setTotalPages] = useState(null) // local state values const [pdfJsWrapper, setPdfJsWrapper] = useState() @@ -140,23 +140,23 @@ function PdfJsViewer({ url, pdfFile }: PdfJsViewerProps) { pdfJsWrapper.eventBus.off('pagerendered', handleRenderedInitialPageNumber) } - const handleScaleChanged = () => { - setRawScale(pdfJsWrapper.viewer.currentScale) + const handleScaleChanged = (scale: { scale: number }) => { + setRawScale(scale.scale) } // `pagesinit` fires when the data for rendering the first page is ready. pdfJsWrapper.eventBus.on('pagesinit', handlePagesinit) // `pagerendered` fires when a page was actually rendered. pdfJsWrapper.eventBus.on('pagerendered', handleRendered) - // Once a page has been rendered we know the scale that it has been rendered to. - pdfJsWrapper.eventBus.on('pagerendered', handleScaleChanged) // Once a page has been rendered we can set the initial current page number. pdfJsWrapper.eventBus.on('pagerendered', handleRenderedInitialPageNumber) + pdfJsWrapper.eventBus.on('scalechanging', handleScaleChanged) + return () => { pdfJsWrapper.eventBus.off('pagesinit', handlePagesinit) pdfJsWrapper.eventBus.off('pagerendered', handleRendered) - pdfJsWrapper.eventBus.off('pagerendered', handleScaleChanged) pdfJsWrapper.eventBus.off('pagerendered', handleRenderedInitialPageNumber) + pdfJsWrapper.eventBus.off('scalechanging', handleScaleChanged) } }, [pdfJsWrapper, firstRenderDone, startFetch]) @@ -394,13 +394,17 @@ function PdfJsViewer({ url, pdfFile }: PdfJsViewerProps) { break case 'zoom-in': if (pdfJsWrapper) { - setScale(`${pdfJsWrapper.viewer.currentScale * 1.25}`) + setScale( + `${Math.min(pdfJsWrapper.viewer.currentScale * 1.25, 9.99)}` + ) } break case 'zoom-out': if (pdfJsWrapper) { - setScale(`${pdfJsWrapper.viewer.currentScale * 0.75}`) + setScale( + `${Math.max(pdfJsWrapper.viewer.currentScale / 1.25, 0.1)}` + ) } break diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-viewer-controls-toolbar.tsx b/services/web/frontend/js/features/pdf-preview/components/pdf-viewer-controls-toolbar.tsx index 817eb497ce..cfd311c154 100644 --- a/services/web/frontend/js/features/pdf-preview/components/pdf-viewer-controls-toolbar.tsx +++ b/services/web/frontend/js/features/pdf-preview/components/pdf-viewer-controls-toolbar.tsx @@ -6,6 +6,7 @@ import PdfZoomDropdown from './pdf-zoom-dropdown' import { useResizeObserver } from '@/shared/hooks/use-resize-observer' import PdfViewerControlsMenuButton from './pdf-viewer-controls-menu-button' +import { useDetachCompileContext as useCompileContext } from '../../../shared/context/detach-compile-context' type PdfViewerControlsToolbarProps = { setZoom: (zoom: string) => void @@ -22,6 +23,8 @@ function PdfViewerControlsToolbar({ page, totalPages, }: PdfViewerControlsToolbarProps) { + const { showLogs } = useCompileContext() + const toolbarControlsElement = document.querySelector('#toolbar-pdf-controls') const [availableWidth, setAvailableWidth] = useState(1000) @@ -39,6 +42,10 @@ function PdfViewerControlsToolbar({ return null } + if (showLogs) { + return null + } + const InnerControlsComponent = availableWidth >= 300 ? PdfViewerControlsToolbarFull