github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-29 02:53:48 -05:00
Code Issues Projects Releases Packages Wiki Activity

Improve PDF double-click listener (#19556)

Browse source 
GitOrigin-RevId: 3d8f316481d8be30ffe1a04a270b978b4720ccbe
This commit is contained in:
Alf Eaton 2024-07-29 13:29:59 +01:00 committed by Copybot
parent 4c76667379
commit 21e458df2a
2 changed files with 20 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
services/web/frontend/js/features/pdf-preview/components/pdf-js-viewer.tsx
View file

@ -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)
}
}

14
services/web/frontend/js/features/pdf-preview/util/pdf-js-wrapper.js
View file

@ -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,