From 21e458df2abe7e5df15f388b886b33dd42ec467c Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Mon, 29 Jul 2024 13:29:59 +0100
Subject: [PATCH] Improve PDF double-click listener (#19556)

GitOrigin-RevId: 3d8f316481d8be30ffe1a04a270b978b4720ccbe
---
 .../pdf-preview/components/pdf-js-viewer.tsx  | 23 +++++++++++--------
 .../pdf-preview/util/pdf-js-wrapper.js        | 14 +++++------
 2 files changed, 20 insertions(+), 17 deletions(-)

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 c290b76308..d45075792e 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
@@ -1,4 +1,11 @@
-import { memo, useCallback, useEffect, useRef, useState } from 'react'
+import {
+  memo,
+  MouseEventHandler,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
 import { debounce, throttle } from 'lodash'
 import PdfViewerControlsToolbar from './pdf-viewer-controls-toolbar'
 import { useProjectContext } from '../../../shared/context/project-context'
@@ -244,16 +251,14 @@ function PdfJsViewer({ url, pdfFile }: PdfJsViewerProps) {
         const textLayerDiv =
           textLayer.source.textLayerDiv ?? textLayer.source.textLayer.div
 
-        const pageElement = textLayerDiv.closest('.page')
+        if (!textLayerDiv.dataset.listeningForDoubleClick) {
+          textLayerDiv.dataset.listeningForDoubleClick = true
 
-        if (!pageElement.dataset.listeningForDoubleClick) {
-          pageElement.dataset.listeningForDoubleClick = true
-
-          const doubleClickListener = (event: Event) => {
+          const doubleClickListener: MouseEventHandler = event => {
             const clickPosition = pdfJsWrapper.clickPosition(
               event,
-              pageElement,
-              textLayer
+              textLayerDiv.closest('.page').querySelector('canvas'),
+              textLayer.pageNumber - 1
             )
 
             if (clickPosition) {
@@ -270,7 +275,7 @@ function PdfJsViewer({ url, pdfFile }: PdfJsViewerProps) {
             }
           }
 
-          pageElement.addEventListener('dblclick', doubleClickListener)
+          textLayerDiv.addEventListener('dblclick', doubleClickListener)
         }
       }
 
diff --git a/services/web/frontend/js/features/pdf-preview/util/pdf-js-wrapper.js b/services/web/frontend/js/features/pdf-preview/util/pdf-js-wrapper.js
index 6a92630a21..9f4716edea 100644
--- a/services/web/frontend/js/features/pdf-preview/util/pdf-js-wrapper.js
+++ b/services/web/frontend/js/features/pdf-preview/util/pdf-js-wrapper.js
@@ -162,16 +162,14 @@ export default class PDFJSWrapper {
   }
 
   // get the page and offset of a click event
-  clickPosition(event, pageElement, textLayer) {
-    const { viewport } = this.viewer.getPageView(textLayer.pageNumber - 1)
-
-    const pageCanvas = pageElement.querySelector('canvas')
-
-    if (!pageCanvas) {
+  clickPosition(event, canvas, page) {
+    if (!canvas) {
       return
     }
 
-    const pageRect = pageCanvas.getBoundingClientRect()
+    const { viewport } = this.viewer.getPageView(page)
+
+    const pageRect = canvas.getBoundingClientRect()
 
     const dx = event.clientX - pageRect.left
     const dy = event.clientY - pageRect.top
@@ -179,7 +177,7 @@ export default class PDFJSWrapper {
     const [left, top] = viewport.convertToPdfPoint(dx, dy)
 
     return {
-      page: textLayer.pageNumber - 1,
+      page,
       offset: {
         left,
         top: viewport.viewBox[3] - top,