make previews consistent for zoom and scroll

Author: icecrasher321

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/docx-preview.tsx

@@ -7,23 +7,36 @@ import { cn } from '@/lib/core/utils/cn'
 import type { WorkspaceFileRecord } from '@/lib/uploads/contexts/workspace'
 import { useWorkspaceFileBinary } from '@/hooks/queries/workspace-files'
 import { PDF_PAGE_SKELETON, PreviewError, resolvePreviewError } from './preview-shared'
+import { PreviewToolbar } from './preview-toolbar'
+import { bindPreviewWheelZoom } from './preview-wheel-zoom'
 
 const logger = createLogger('DocxPreview')
 
+const DOCX_ZOOM_MIN = 25
+const DOCX_ZOOM_MAX = 400
+const DOCX_ZOOM_STEP = 20
+const DOCX_ZOOM_WHEEL_SENSITIVITY = 0.005
+
 /**
  * Fit the rendered docx pages to the host container width using a CSS scale.
  * The library renders `<section class="docx">` at the document's natural page
  * width (in cm), which overflows narrow panels.
  */
-function fitDocxToContainer(host: HTMLElement) {
+function fitDocxToContainer(host: HTMLElement, viewport: HTMLElement, zoomPercent: number) {
   const wrapper = host.querySelector<HTMLElement>('.docx-wrapper')
   if (!wrapper) return
   const section = wrapper.querySelector<HTMLElement>('section.docx')
   if (!section) return
 
-  wrapper.style.transform = ''
-  wrapper.style.transformOrigin = 'top left'
+  host.style.minWidth = ''
+  host.style.minHeight = ''
+  host.style.width = ''
+  host.style.display = 'flex'
+  host.style.flexDirection = 'column'
+  host.style.alignItems = 'center'
+  wrapper.style.zoom = ''
   wrapper.style.width = ''
+  wrapper.style.flex = '0 0 auto'
   wrapper.style.marginRight = ''
   wrapper.style.marginBottom = ''
 
@@ -34,16 +47,16 @@ function fitDocxToContainer(host: HTMLElement) {
   const horizontalPadding =
     Number.parseFloat(wrapperStyle.paddingLeft) + Number.parseFloat(wrapperStyle.paddingRight)
   const naturalWrapperWidth = naturalPageWidth + horizontalPadding
-  const available = host.clientWidth
-  const scale = Math.min(1, available / naturalWrapperWidth)
-
-  if (scale >= 1) return
+  const available = viewport.clientWidth
+  const fitScale = Math.min(1, available / naturalWrapperWidth)
+  const scale = fitScale * (zoomPercent / 100)
+  const scaledWrapperWidth = naturalWrapperWidth * scale
 
   wrapper.style.width = `${naturalWrapperWidth}px`
-  wrapper.style.transform = `scale(${scale})`
-  const naturalHeight = wrapper.offsetHeight
-  wrapper.style.marginRight = `${(scale - 1) * naturalWrapperWidth}px`
-  wrapper.style.marginBottom = `${(scale - 1) * naturalHeight}px`
+  wrapper.style.zoom = String(scale)
+  host.style.width = `${Math.max(available, scaledWrapperWidth)}px`
+  host.style.minWidth = `${scaledWrapperWidth}px`
+  host.style.minHeight = `${wrapper.offsetHeight * scale}px`
 }
 
 export const DocxPreview = memo(function DocxPreview({
@@ -56,7 +69,9 @@ export const DocxPreview = memo(function DocxPreview({
   streamingContent?: string
 }) {
   const containerRef = useRef<HTMLDivElement>(null)
+  const scrollContainerRef = useRef<HTMLDivElement>(null)
   const lastSuccessfulHtmlRef = useRef('')
+  const zoomPercentRef = useRef(100)
   const {
     data: fileData,
     isLoading,
@@ -65,25 +80,106 @@ export const DocxPreview = memo(function DocxPreview({
   const [renderError, setRenderError] = useState<string | null>(null)
   const [rendering, setRendering] = useState(false)
   const [hasRenderedPreview, setHasRenderedPreview] = useState(false)
+  const [zoomPercent, setZoomPercent] = useState(100)
+  const [pageCount, setPageCount] = useState(0)
+  const [currentPage, setCurrentPage] = useState(1)
+  const [documentRenderVersion, setDocumentRenderVersion] = useState(0)
 
   const applyPostRenderStyling = useCallback(() => {
     const container = containerRef.current
-    if (!container) return
+    const scrollContainer = scrollContainerRef.current
+    if (!container || !scrollContainer) return
     const wrapper = container.querySelector<HTMLElement>('.docx-wrapper')
     if (wrapper) wrapper.style.background = 'transparent'
-    container.querySelectorAll<HTMLElement>('section.docx').forEach((page) => {
+    const pages = Array.from(container.querySelectorAll<HTMLElement>('section.docx'))
+    pages.forEach((page, index) => {
       page.style.boxShadow = 'var(--shadow-medium)'
+      page.dataset.page = String(index + 1)
     })
-    fitDocxToContainer(container)
+    setPageCount((previous) => (previous === pages.length ? previous : pages.length))
+    setCurrentPage((current) => (pages.length > 0 ? Math.min(current, pages.length) : 1))
+    fitDocxToContainer(container, scrollContainer, zoomPercentRef.current)
   }, [])
 
   useEffect(() => {
+    const scrollContainer = scrollContainerRef.current
+    if (!scrollContainer) return
+    const observer = new ResizeObserver(() => applyPostRenderStyling())
+    observer.observe(scrollContainer)
+    return () => observer.disconnect()
+  }, [applyPostRenderStyling])
+
+  const applyZoomAt = useCallback(
+    (nextZoom: number, anchorX: number, anchorY: number) => {
+      const scrollContainer = scrollContainerRef.current
+      if (!scrollContainer) return
+
+      const clampedZoom = Math.round(Math.min(Math.max(nextZoom, DOCX_ZOOM_MIN), DOCX_ZOOM_MAX))
+      const wrapper = containerRef.current?.querySelector<HTMLElement>('.docx-wrapper')
+      const containerRect = scrollContainer.getBoundingClientRect()
+      const anchorClientX = containerRect.left + anchorX
+      const anchorClientY = containerRect.top + anchorY
+      const beforeRect = wrapper?.getBoundingClientRect()
+      const anchorRatioX =
+        beforeRect && beforeRect.width > 0
+          ? (anchorClientX - beforeRect.left) / beforeRect.width
+          : 0
+      const anchorRatioY =
+        beforeRect && beforeRect.height > 0
+          ? (anchorClientY - beforeRect.top) / beforeRect.height
+          : 0
+
+      zoomPercentRef.current = clampedZoom
+      setZoomPercent(clampedZoom)
+      applyPostRenderStyling()
+
+      const afterRect = wrapper?.getBoundingClientRect()
+      if (!beforeRect || !afterRect) return
+
+      scrollContainer.scrollLeft += afterRect.left + anchorRatioX * afterRect.width - anchorClientX
+      scrollContainer.scrollTop += afterRect.top + anchorRatioY * afterRect.height - anchorClientY
+    },
+    [applyPostRenderStyling]
+  )
+
+  useEffect(() => {
+    const scrollContainer = scrollContainerRef.current
+    if (!scrollContainer) return
+
+    return bindPreviewWheelZoom(scrollContainer, (event) => {
+      const rect = scrollContainer.getBoundingClientRect()
+      applyZoomAt(
+        zoomPercentRef.current * (1 - event.deltaY * DOCX_ZOOM_WHEEL_SENSITIVITY),
+        event.clientX - rect.left,
+        event.clientY - rect.top
+      )
+    })
+  }, [applyZoomAt])
+
+  useEffect(() => {
+    const scrollContainer = scrollContainerRef.current
     const container = containerRef.current
-    if (!container) return
-    const observer = new ResizeObserver(() => fitDocxToContainer(container))
-    observer.observe(container)
+    if (!scrollContainer || !container || pageCount === 0) return
+
+    const pages = Array.from(container.querySelectorAll<HTMLElement>('section.docx'))
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            const page = Number((entry.target as HTMLElement).dataset.page)
+            if (page) setCurrentPage(page)
+          }
+        }
+      },
+      { root: scrollContainer, threshold: 0.5 }
+    )
+
+    for (const page of pages) {
+      observer.observe(page)
+    }
+
     return () => observer.disconnect()
-  }, [])
+  }, [pageCount, documentRenderVersion])
 
   useEffect(() => {
     if (!containerRef.current || !fileData || streamingContent !== undefined) return
@@ -106,6 +202,7 @@ export const DocxPreview = memo(function DocxPreview({
           applyPostRenderStyling()
           lastSuccessfulHtmlRef.current = containerRef.current.innerHTML
           setHasRenderedPreview(true)
+          setDocumentRenderVersion((version) => version + 1)
         }
       } catch (err) {
         if (!cancelled) {
@@ -128,6 +225,7 @@ export const DocxPreview = memo(function DocxPreview({
 
   useEffect(() => {
     if (streamingContent === undefined || !containerRef.current) return
+    if (streamingContent.trim().length === 0) return
 
     let cancelled = false
     const controller = new AbortController()
@@ -155,6 +253,7 @@ export const DocxPreview = memo(function DocxPreview({
 
         const arrayBuffer = await response.arrayBuffer()
         if (cancelled || !containerRef.current) return
+        if (arrayBuffer.byteLength === 0) return
 
         const { renderAsync } = await import('docx-preview')
         if (cancelled || !containerRef.current) return
@@ -170,13 +269,15 @@ export const DocxPreview = memo(function DocxPreview({
           applyPostRenderStyling()
           lastSuccessfulHtmlRef.current = containerRef.current.innerHTML
           setHasRenderedPreview(true)
+          setDocumentRenderVersion((version) => version + 1)
         }
       } catch (err) {
         if (!cancelled && !(err instanceof DOMException && err.name === 'AbortError')) {
           if (containerRef.current && previousHtml) {
             containerRef.current.innerHTML = previousHtml
             applyPostRenderStyling()
             setHasRenderedPreview(true)
+            setDocumentRenderVersion((version) => version + 1)
           }
           const msg = toError(err).message || 'Failed to render document'
           logger.info('Transient DOCX streaming preview error (suppressed)', { error: msg })
@@ -201,15 +302,78 @@ export const DocxPreview = memo(function DocxPreview({
   const showSkeleton =
     !hasRenderedPreview && (streamingContent !== undefined || isLoading || rendering)
 
+  const scrollToPage = (page: number) => {
+    const scrollContainer = scrollContainerRef.current
+    const target = containerRef.current?.querySelector<HTMLElement>(
+      `section.docx[data-page="${page}"]`
+    )
+    if (!scrollContainer || !target) return
+
+    if (zoomPercentRef.current !== 100) {
+      applyZoomAt(100, scrollContainer.clientWidth / 2, scrollContainer.clientHeight / 2)
+    }
+
+    scrollContainer.scrollTo({
+      top: target.offsetTop - scrollContainer.offsetTop - 16,
+      behavior: 'smooth',
+    })
+  }
+
   return (
-    <div className='relative h-full w-full overflow-auto bg-[var(--surface-1)]'>
-      {showSkeleton && (
-        <div className='absolute inset-0 z-10 bg-[var(--surface-1)]'>{PDF_PAGE_SKELETON}</div>
-      )}
-      <div
-        ref={containerRef}
-        className={cn('h-full w-full overflow-auto', showSkeleton && 'opacity-0')}
+    <div className='flex h-full min-h-0 w-full flex-col overflow-hidden bg-[var(--surface-1)]'>
+      <PreviewToolbar
+        navigation={{
+          current: currentPage,
+          total: pageCount,
+          label: 'page',
+          canPrevious: pageCount > 0 && currentPage > 1,
+          canNext: pageCount > 0 && currentPage < pageCount,
+          onPrevious: () => {
+            const previous = Math.max(1, currentPage - 1)
+            setCurrentPage(previous)
+            scrollToPage(previous)
+          },
+          onNext: () => {
+            const next = Math.min(pageCount, currentPage + 1)
+            setCurrentPage(next)
+            scrollToPage(next)
+          },
+        }}
+        zoom={{
+          label: `${zoomPercent}%`,
+          canZoomOut: zoomPercent > DOCX_ZOOM_MIN,
+          canZoomIn: zoomPercent < DOCX_ZOOM_MAX,
+          onReset: () => {
+            const c = scrollContainerRef.current
+            applyZoomAt(100, c ? c.clientWidth / 2 : 0, c ? c.clientHeight / 2 : 0)
+          },
+          onZoomOut: () => {
+            const c = scrollContainerRef.current
+            applyZoomAt(
+              zoomPercent - DOCX_ZOOM_STEP,
+              c ? c.clientWidth / 2 : 0,
+              c ? c.clientHeight / 2 : 0
+            )
+          },
+          onZoomIn: () => {
+            const c = scrollContainerRef.current
+            applyZoomAt(
+              zoomPercent + DOCX_ZOOM_STEP,
+              c ? c.clientWidth / 2 : 0,
+              c ? c.clientHeight / 2 : 0
+            )
+          },
+        }}
       />
+      <div
+        ref={scrollContainerRef}
+        className='relative min-h-0 flex-1 overflow-auto bg-[var(--surface-1)]'
+      >
+        {showSkeleton && (
+          <div className='absolute inset-0 z-10 bg-[var(--surface-1)]'>{PDF_PAGE_SKELETON}</div>
+        )}
+        <div ref={containerRef} className={cn('min-h-full w-full', showSkeleton && 'opacity-0')} />
+      </div>
     </div>
   )
 })

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/pdf-viewer.tsx

@@ -6,6 +6,7 @@ import { pdfjs, Document as ReactPdfDocument, Page as ReactPdfPage } from 'react
 import 'react-pdf/dist/Page/TextLayer.css'
 import { Skeleton } from '@/components/emcn'
 import { PreviewToolbar } from '@/app/workspace/[workspaceId]/files/components/file-viewer/preview-toolbar'
+import { bindPreviewWheelZoom } from '@/app/workspace/[workspaceId]/files/components/file-viewer/preview-wheel-zoom'
 
 pdfjs.GlobalWorkerOptions.workerSrc = new URL(
   'pdfjs-dist/build/pdf.worker.min.mjs',
@@ -120,9 +121,14 @@ export const PdfViewerCore = memo(function PdfViewerCore({ source, filename }: P
   }, [])
 
   const scrollToPage = (page: number) => {
+    const container = containerRef.current
+    if (container && zoomRef.current !== PDF_ZOOM_DEFAULT) {
+      applyZoomAt(PDF_ZOOM_DEFAULT, container.clientWidth / 2, container.clientHeight / 2)
+    }
+
     const wrapper = pageRefs.current[page - 1]
-    if (wrapper && containerRef.current) {
-      containerRef.current.scrollTo({ top: wrapper.offsetTop - 16, behavior: 'smooth' })
+    if (wrapper && container) {
+      container.scrollTo({ top: wrapper.offsetTop - 16, behavior: 'smooth' })
     }
   }
 
@@ -153,20 +159,14 @@ export const PdfViewerCore = memo(function PdfViewerCore({ source, filename }: P
     const container = containerRef.current
     if (!container) return
 
-    const onWheel = (e: WheelEvent) => {
-      if (!e.ctrlKey) return
-      e.preventDefault()
-
+    return bindPreviewWheelZoom(container, (e) => {
       const next = Math.min(
         PDF_ZOOM_MAX,
         Math.max(PDF_ZOOM_MIN, zoomRef.current * (1 - e.deltaY * 0.005))
       )
       const rect = container.getBoundingClientRect()
       applyZoomAt(next, e.clientX - rect.left, e.clientY - rect.top)
-    }
-
-    container.addEventListener('wheel', onWheel, { passive: false })
-    return () => container.removeEventListener('wheel', onWheel)
+    })
   }, [applyZoomAt])
 
   return (