diff --git a/package.json b/package.json index 34d5ed2..ca3bb2c 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "@rolemodel/spider", "description": "Shared high level web components for RoleModel Software and beyond", "packageManager": "yarn@4.12.0", - "version": "0.0.7", + "version": "0.0.8", "author": "RoleModel Software", "license": "MIT", "type": "module", diff --git a/src/components/pdf-viewer/page/pdf-page.js b/src/components/pdf-viewer/page/pdf-page.js index d776d37..ba77ad5 100644 --- a/src/components/pdf-viewer/page/pdf-page.js +++ b/src/components/pdf-viewer/page/pdf-page.js @@ -1,4 +1,4 @@ -import { html } from 'lit' +import { html, render } from 'lit' import * as pdfjsLib from 'pdfjs-dist' import { PDFViewerComponent } from '../pdf-viewer-component.js' import { normalizeText } from '../helpers/text-helper.js' @@ -80,6 +80,13 @@ export default class PDFPage extends PDFViewerComponent { textLayerDiv.innerHTML = '' await this.renderTextLayer(viewport, textLayerDiv) + + const annotationLayerDiv = this.shadowRoot.querySelector('.annotation-layer') + annotationLayerDiv.style.width = `${viewport.width}px` + annotationLayerDiv.style.height = `${viewport.height}px` + annotationLayerDiv.innerHTML = '' + + await this.renderLinkAnnotationLayer(viewport, annotationLayerDiv) } catch (error) { if (error.name !== 'RenderingCancelledException') { console.error('Error rendering page:', error) @@ -143,6 +150,57 @@ export default class PDFPage extends PDFViewerComponent { } } + async renderLinkAnnotationLayer(viewport, annotationLayerDiv) { + try { + const annotations = await this.page.getAnnotations({ intent: 'display' }) + const linkAnnotations = annotations.filter(annotation => + annotation?.subtype === 'Link' && + Array.isArray(annotation.rect) && + (annotation.url || annotation.unsafeUrl) + ) + + const links = linkAnnotations.map(annotation => { + const linkUrl = annotation.url || annotation.unsafeUrl + const viewportRect = this._getViewportRect(annotation.rect, viewport) + if (!viewportRect) return html`` + + const [left, top, width, height] = viewportRect + return html` + + ` + }) + render(html`${links}`, annotationLayerDiv) + } catch (error) { + console.error('Error rendering annotation layer:', error) + } + } + + _getViewportRect(annotationRect, viewport) { + let coords + if (typeof viewport.convertToViewportRectangle === 'function') { + coords = viewport.convertToViewportRectangle(annotationRect) + } else { + const [x1, y1, x2, y2] = annotationRect + const scale = viewport.scale || 1 + coords = [ + Math.min(x1, x2) * scale, + viewport.height - (Math.max(y1, y2) * scale), + Math.max(x1, x2) * scale, + viewport.height - (Math.min(y1, y2) * scale) + ] + } + + const [x1, y1, x2, y2] = coords + return [Math.min(x1, x2), Math.min(y1, y2), Math.abs(x2 - x1), Math.abs(y2 - y1)] + } + highlightText(element, text, itemStart, matches) { element.innerHTML = '' @@ -197,6 +255,7 @@ export default class PDFPage extends PDFViewerComponent {