Merge pull request #18762 from overleaf/dp-pdf-improvements

PDF Toolbar usability improvements

GitOrigin-RevId: 138e42cad0c9c97cfe45eb00fb123084e0228fdd

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 [rawScale, setRawScale] = useState<number | null>(null)
-  const [page, setPage] = useState(null)
+  const [page, setPage] = useState<number | null>(null)
-  const [totalPages, setTotalPages] = useState(null)
+  const [totalPages, setTotalPages] = useState<number | null>(null)
 
   // local state values
   const [pdfJsWrapper, setPdfJsWrapper] = useState<PDFJSWrapper | null>()
@@ -140,23 +140,23 @@ function PdfJsViewer({ url, pdfFile }: PdfJsViewerProps) {
       pdfJsWrapper.eventBus.off('pagerendered', handleRenderedInitialPageNumber)
     }
 
-    const handleScaleChanged = () => {
+    const handleScaleChanged = (scale: { scale: number }) => {
-      setRawScale(pdfJsWrapper.viewer.currentScale)
+      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
 

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<number>(1000)
@@ -39,6 +42,10 @@ function PdfViewerControlsToolbar({
     return null
   }
 
+  if (showLogs) {
+    return null
+  }
+
   const InnerControlsComponent =
     availableWidth >= 300
       ? PdfViewerControlsToolbarFull