From fd05b73fc493297a6fc93282a8b79767d3974faa Mon Sep 17 00:00:00 2001 From: Noah Eigenfeld Date: Tue, 4 Jun 2024 13:19:03 -0400 Subject: [PATCH] fix: bring back text div adjustment --- .../components/PdfHighlight/PdfHighlight.tsx | 2 - .../PdfViewer/PdfViewerTextLayer.tsx | 80 ++++++++++--------- 2 files changed, 41 insertions(+), 41 deletions(-) diff --git a/packages/discovery-react-components/src/components/DocumentPreview/components/PdfHighlight/PdfHighlight.tsx b/packages/discovery-react-components/src/components/DocumentPreview/components/PdfHighlight/PdfHighlight.tsx index 15c858468..ed29c4c88 100644 --- a/packages/discovery-react-components/src/components/DocumentPreview/components/PdfHighlight/PdfHighlight.tsx +++ b/packages/discovery-react-components/src/components/DocumentPreview/components/PdfHighlight/PdfHighlight.tsx @@ -88,8 +88,6 @@ const PdfHighlight: FC = ({ const { textDivs } = pdfRenderedText || {}; - console.log('textDivs', textDivs); - const highlightShapes = useMemo(() => { if (boxHighlights) { return getShapeFromBboxHighlight(boxHighlights, page); diff --git a/packages/discovery-react-components/src/components/DocumentPreview/components/PdfViewer/PdfViewerTextLayer.tsx b/packages/discovery-react-components/src/components/DocumentPreview/components/PdfViewer/PdfViewerTextLayer.tsx index 78e840cc5..3910d0888 100644 --- a/packages/discovery-react-components/src/components/DocumentPreview/components/PdfViewer/PdfViewerTextLayer.tsx +++ b/packages/discovery-react-components/src/components/DocumentPreview/components/PdfViewer/PdfViewerTextLayer.tsx @@ -1,6 +1,6 @@ import { FC, useEffect, useRef, useCallback } from 'react'; import cx from 'classnames'; -import { TextContent, PDFPageProxy } from 'pdfjs-dist/types/src/display/api'; +import { TextContent, TextItem, PDFPageProxy } from 'pdfjs-dist/types/src/display/api'; import { PageViewport } from 'pdfjs-dist/types/src/display/display_utils'; import { TextLayerBuilder } from 'pdfjs-dist/web/pdf_viewer.mjs'; import { TextLayer as PdfJsTextLayer } from 'pdfjs-dist/build/pdf.mjs'; @@ -78,19 +78,20 @@ const PdfViewerTextLayer: FC = ({ textLayerWrapper.append(builder.div); signal.addEventListener('abort', () => builder.cancel()); - await _renderTextLayer(builder, textLayerWrapper, viewport); - //TODO: is textLayerWrapper the right value for the container? const pdfJsTextLayer = new PdfJsTextLayer({ textContentSource: textContent, container: textLayerWrapper, viewport }); await pdfJsTextLayer.render(); - return { textContent, viewport, page, textDivs: pdfJsTextLayer.textDivs }; + const textDivs = pdfJsTextLayer.textDivs; + await _renderTextLayer(builder, textContent, textLayerWrapper, scale, viewport, textDivs); + //TODO: is textLayerWrapper the right value for the container? + return { textContent, viewport, page, textDivs }; } return undefined; }, - [loadedPage, loadedText, textLayerWrapper] + [loadedPage, loadedText, scale, textLayerWrapper] ) ); @@ -117,10 +118,11 @@ const PdfViewerTextLayer: FC = ({ */ async function _renderTextLayer( builder: TextLayerBuilder, - // textContent: TextContent, + textContent: TextContent, textLayerDiv: HTMLDivElement, - // scale: number, - viewport: PageViewport + scale: number, + viewport: PageViewport, + textDivs: HTMLElement[] // loadedPage: PDFPageProxy ) { // render @@ -136,7 +138,7 @@ async function _renderTextLayer( // TODO: if this method is only 2 commands, can we extract them to the component renderer above? await builder.render(viewport); - // _adjustTextDivs(builder.textDivs, textContent.items as TextItem[], scale); + _adjustTextDivs(textDivs, textContent.items as TextItem[], scale); } /** @@ -145,35 +147,35 @@ async function _renderTextLayer( * @param textItems * @param scale */ -// function _adjustTextDivs( -// textDivs: HTMLElement[], -// textItems: TextItem[] | null, -// scale: number -// ): void { -// const scaleXPattern = /scaleX\(([\d.]+)\)/; -// (textDivs || []).forEach((textDivElm, index) => { -// const textItem = textItems?.[index]; -// if (!textItem) return; - -// const expectedWidth = textItem.width * scale; -// const actualWidth = textDivElm.getBoundingClientRect().width; - -// function getScaleX(element: HTMLElement) { -// const match = element.style.transform?.match(scaleXPattern); -// if (match) { -// return parseFloat(match[1]); -// } -// return null; -// } -// const currentScaleX = getScaleX(textDivElm); -// if (currentScaleX && !isNaN(currentScaleX)) { -// const newScale = `scaleX(${(expectedWidth / actualWidth) * currentScaleX})`; -// textDivElm.style.transform = textDivElm.style.transform.replace(scaleXPattern, newScale); -// } else { -// const newScale = `scaleX(${expectedWidth / actualWidth})`; -// textDivElm.style.transform = newScale; -// } -// }); -// } +function _adjustTextDivs( + textDivs: HTMLElement[], + textItems: TextItem[] | null, + scale: number +): void { + const scaleXPattern = /scaleX\(([\d.]+)\)/; + (textDivs || []).forEach((textDivElm, index) => { + const textItem = textItems?.[index]; + if (!textItem) return; + + const expectedWidth = textItem.width * scale; + const actualWidth = textDivElm.getBoundingClientRect().width; + + function getScaleX(element: HTMLElement) { + const match = element.style.transform?.match(scaleXPattern); + if (match) { + return parseFloat(match[1]); + } + return null; + } + const currentScaleX = getScaleX(textDivElm); + if (currentScaleX && !isNaN(currentScaleX)) { + const newScale = `scaleX(${(expectedWidth / actualWidth) * currentScaleX})`; + textDivElm.style.transform = textDivElm.style.transform.replace(scaleXPattern, newScale); + } else { + const newScale = `scaleX(${expectedWidth / actualWidth})`; + textDivElm.style.transform = newScale; + } + }); +} export default PdfViewerTextLayer;