Merge branch 'tweak_debug_print'

tamuratak · Nov 9, 2024 · 7e9088f · 7e9088f
2 parents 1df3dc4 + e56b8e3
commit 7e9088f
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 24 deletions.
diff --git a/viewer/components/viewerloading.ts b/viewer/components/viewerloading.ts
@@ -1,7 +1,7 @@
 import type { PdfViewerState } from 'latex-toybox-protocol-types'
 import { pdfFilePrefix } from '../utils/encodepdffilepath.js'
 import type { ILatexToyboxPdfViewer, IPDFViewerApplication, IPDFViewerApplicationOptions } from './interface.js'
-import { debugPrint } from '../utils/debug.js'
+import { debugPrintElements } from '../utils/debug.js'
 import { trimSelectElement, viewerContainer, viewerDom, RenderingStates, ScrollMode } from './constants.js'
 
 declare const PDFViewerApplication: IPDFViewerApplication
@@ -139,9 +139,6 @@ export class ViewerLoading {
  */
 function makeMasksForAllVisiblePages() {
     const maskArray: HTMLDivElement[] = []
-    if (!viewerContainer || !viewerDom) {
-        return maskArray
-    }
     const visiblePages = PDFViewerApplication.pdfViewer._getVisiblePages()
     for (const visiblePage of visiblePages.views) {
         const page = visiblePage.view.div
@@ -159,7 +156,8 @@ function makeMasksForAllVisiblePages() {
         div.style.left = pageRect.left + 'px'
         // When the trim mode is enabled, the width of the page is much larger
         // than the width of the viewerDom. It hides the scrollbar. So we have to use the minimum value.
-        div.style.width = Math.min(viewerDom.clientWidth, pageRect.width) + 'px'
+        const viewerDomRect = viewerDom.getBoundingClientRect()
+        div.style.width = Math.min(viewerDomRect.width, pageRect.width) + 'px'
         div.style.height = pageRect.height + 'px'
         const img = new Image()
         img.src = canvas.toDataURL()
@@ -169,22 +167,11 @@ function makeMasksForAllVisiblePages() {
         div.appendChild(img)
         viewerContainer.appendChild(div)
         div.style.display = 'inherit'
-        debugPrintElements([['page', page], ['canvas', canvas], ['div', div], ['img', img]])
+        debugPrintElements([page, canvas, div, img])
     }
     return maskArray
 }
 
-function debugPrintElements(elems: [string, HTMLElement][]) {
-    const mesg = []
-    for (const [name, elem] of elems) {
-        mesg.push(name)
-        const rect = elem.getBoundingClientRect()
-        const { top, left, width, height } = rect
-        mesg.push({ top, left, width, height })
-    }
-    debugPrint(...mesg)
-}
-
 function createViewerContainerSpacer() {
     const spacer = document.createElement('div')
     const viewerDomRect = viewerDom.getBoundingClientRect()
@@ -195,17 +182,11 @@ function createViewerContainerSpacer() {
     const pageBottomMargin = 10
     spacer.style.height = viewerDomRect.height + pageBottomMargin + 'px'
     viewerContainer.appendChild(spacer)
-    debugPrintElements([['viewer', viewerDom], ['spacer', spacer]])
+    debugPrintElements([viewerContainer, viewerDom, spacer])
     return spacer
 }
 
 export function isAllVisiblePagesRendered(): boolean {
     const pageViews = PDFViewerApplication.pdfViewer._getVisiblePages()
-    debugPrint(
-        'pageViews',
-        pageViews.ids,
-        'renderingState',
-        pageViews.views.map(view => view.view.renderingState)
-    )
     return pageViews.views.every(view => view.view.renderingState === RenderingStates.FINISHED)
 }
diff --git a/viewer/utils/debug.ts b/viewer/utils/debug.ts
@@ -16,3 +16,27 @@ export function debugPrint(...args: unknown[]) {
     }
     console.log(mesg)
 }
+
+export function debugPrintElements(elems: HTMLElement[]) {
+    if (!DEBUG) {
+        return
+    }
+    const mesg = []
+    for (const elem of elems) {
+        let elemName = elem.nodeName.toLowerCase()
+        const elemId = elem.id
+        if (elemId) {
+            elemName += ' id=' + elemId
+        }
+        const classList = Array.from(elem.classList)
+        if (classList.length > 0) {
+            elemName += ' class=' + JSON.stringify(classList)
+        }
+        mesg.push(elemName)
+        const rect = elem.getBoundingClientRect()
+        const { top, left, width, height } = rect
+        const clientWidth = elem.clientWidth
+        mesg.push({ top, left, width, height, clientWidth })
+    }
+    debugPrint(...mesg)
+}