@epam/pdf-highlighter-kit 0.0.4 → 0.0.6

package/dist/PDFHighlightViewer.js

@@ -1,9 +1,14 @@
+import { ZoomMode, } from './types';
 import { PDFEngine } from './core/pdf-engine';
 import { ViewportManager } from './core/viewport-manager';
 import { UnifiedLayerBuilder } from './core/unified-layer-builder';
 import { UnifiedInteractionHandler } from './core/interaction-handler';
 import { PerformanceOptimizer } from './core/performance-optimizer';
 import { buildHighlightsIndex } from './utils/highlight-adapter';
+import { applyLabelStyle, applyIconStyle, normalizeSize } from './utils/label-style';
+import { sanitizeIconHtml } from './utils/sanitize-icon-html';
+const CONTAINER_PADDING = 40;
+const ZOOM_STEP = 1.2;
 export class PDFHighlightViewer {
     constructor() {
         this.container = null;
@@ -123,6 +128,7 @@ export class PDFHighlightViewer {
             interactionMode: 'hybrid',
             performanceMode: false,
             accessibility: true,
+            bboxOrigin: 'bottom-right',
         };
         this.pdfEngine = new PDFEngine(this.options);
         this.viewportManager = new ViewportManager(this.options.bufferPages, this.options.maxCachedPages);
@@ -407,22 +413,16 @@ export class PDFHighlightViewer {
         const cached = this.pageDimensions.get(pageNumber);
         if (cached)
             return cached;
-        try {
-            // Get PDF page and its viewport at current scale
-            const page = await this.pdfEngine.getPage(pageNumber);
-            const viewport = page.getViewport({ scale: this.currentScale });
-            const dimensions = {
-                width: viewport.width,
-                height: viewport.height,
-            };
-            // Cache the dimensions
-            this.pageDimensions.set(pageNumber, dimensions);
-            return dimensions;
-        }
-        catch (error) {
-            console.error(`Failed to get dimensions for page ${pageNumber}:`, error);
-            return { width: 600, height: this.defaultPageHeight };
-        }
+        // Get PDF page and its viewport at current scale
+        const page = await this.pdfEngine.getPage(pageNumber);
+        const viewport = page.getViewport({ scale: this.currentScale });
+        const dimensions = {
+            width: viewport.width,
+            height: viewport.height,
+        };
+        // Cache the dimensions
+        this.pageDimensions.set(pageNumber, dimensions);
+        return dimensions;
     }
     /**
      * Setup accessibility features
@@ -462,11 +462,11 @@ export class PDFHighlightViewer {
                 break;
             case '+':
             case '=':
-                this.setZoom(this.currentScale * 1.2);
+                this.setZoom(this.currentScale * ZOOM_STEP);
                 event.preventDefault();
                 break;
             case '-':
-                this.setZoom(this.currentScale / 1.2);
+                this.setZoom(this.currentScale / ZOOM_STEP);
                 event.preventDefault();
                 break;
         }
@@ -508,31 +508,17 @@ export class PDFHighlightViewer {
         // Clear existing containers
         this.pdfContainer.innerHTML = '';
         this.pageContainers.clear();
-        // Get dimensions for the first page to estimate all others
-        let avgPageHeight = this.defaultPageHeight;
-        try {
-            const firstPageDimensions = await this.getPageDimensions(1);
-            avgPageHeight = firstPageDimensions.height;
-        }
-        catch (_error) {
-            console.warn('Could not get first page dimensions, using default');
-        }
+        const firstPageDimensions = await this.getPageDimensions(1);
+        const avgPageHeight = firstPageDimensions.height;
         for (let pageNumber = 1; pageNumber <= this.totalPages; pageNumber++) {
             const pageContainer = document.createElement('div');
             pageContainer.className = 'pdf-page-container';
             pageContainer.setAttribute('data-page-number', pageNumber.toString());
             pageContainer.style.marginBottom = '20px';
             pageContainer.style.position = 'relative';
-            // Try to set real dimensions, or use estimated height
-            try {
-                const dimensions = await this.getPageDimensions(pageNumber);
-                pageContainer.style.height = `${dimensions.height}px`;
-                pageContainer.style.width = `${dimensions.width}px`;
-            }
-            catch (_error) {
-                // Use average height as fallback
-                pageContainer.style.height = `${avgPageHeight}px`;
-            }
+            const dimensions = await this.getPageDimensions(pageNumber);
+            pageContainer.style.height = `${dimensions.height}px`;
+            pageContainer.style.width = `${dimensions.width}px`;
             this.pdfContainer.appendChild(pageContainer);
             this.pageContainers.set(pageNumber, pageContainer);
         }
@@ -638,21 +624,50 @@ export class PDFHighlightViewer {
     getZoom() {
         return this.currentScale;
     }
-    setZoom(scale) {
+    setZoom(value) {
+        if (value === ZoomMode.AUTO) {
+            void this.setAutoZoom();
+        }
+        else if (value === ZoomMode.PAGE_FIT) {
+            void this.setPageFitZoom();
+        }
+        else {
+            this.applyZoom(value);
+        }
+    }
+    applyZoom(scale) {
         const previousScale = this.currentScale;
         this.currentScale = Math.max(0.5, Math.min(5.0, scale));
         // Re-render visible pages with new scale
         this.reRenderVisiblePages();
         this.emit('zoomChanged', { scale: this.currentScale, previousScale });
     }
+    async setAutoZoom() {
+        const scales = await this.computeFitScales();
+        this.applyZoom(scales.scaleX);
+    }
+    async setPageFitZoom() {
+        const scales = await this.computeFitScales();
+        this.applyZoom(Math.min(scales.scaleX, scales.scaleY));
+    }
+    async computeFitScales() {
+        if (!this.container) {
+            return { scaleX: 1, scaleY: 1 };
+        }
+        const page = await this.pdfEngine.getPage(this.currentPage || 1);
+        const viewport = page.getViewport({ scale: 1 });
+        const scaleX = (this.container.clientWidth - CONTAINER_PADDING) / viewport.width;
+        const scaleY = (this.container.clientHeight - CONTAINER_PADDING) / viewport.height;
+        return { scaleX, scaleY };
+    }
     zoomIn() {
-        this.setZoom(this.currentScale * 1.2);
+        this.applyZoom(this.currentScale * ZOOM_STEP);
     }
     zoomOut() {
-        this.setZoom(this.currentScale / 1.2);
+        this.applyZoom(this.currentScale / ZOOM_STEP);
     }
     resetZoom() {
-        this.setZoom(1.5);
+        this.applyZoom(1.5);
     }
     getCurrentPage() {
         return this.currentPage;
@@ -660,6 +675,19 @@ export class PDFHighlightViewer {
     getTotalPages() {
         return this.totalPages;
     }
+    async getThumbnails(pageNumbers, options) {
+        return this.pdfEngine.getThumbnails(pageNumbers, options);
+    }
+    async getThumbnailsDataUrl(pageNumbers, options) {
+        const canvases = await this.getThumbnails(pageNumbers, options);
+        const format = options?.format ?? 'image/webp';
+        const quality = options?.quality ?? 0.85;
+        const result = new Map();
+        canvases.forEach((canvas, pageNumber) => {
+            result.set(pageNumber, canvas.toDataURL(format, quality));
+        });
+        return result;
+    }
     // =============================================================================
     // Text Selection Management
     // =============================================================================
@@ -806,7 +834,20 @@ export class PDFHighlightViewer {
         const pageData = this.pdfEngine.getPageData(pageNumber);
         if (!pageData?.textContent)
             return;
-        this.layerBuilder.updateHighlights(pageContainer, this.highlightsIndex.highlights, pageNumber, pageData.textContent, this.currentScale);
+        const normalizedHighlights = this.highlightsIndex.highlights.map((highlight) => ({
+            ...highlight,
+            bboxes: highlight.bboxes.map((bbox) => {
+                const normalized = this.normalizeBBoxForPage(bbox, bbox.page);
+                return {
+                    ...bbox,
+                    x1: normalized.x1,
+                    y1: normalized.y1,
+                    x2: normalized.x2,
+                    y2: normalized.y2,
+                };
+            }),
+        }));
+        this.layerBuilder.updateHighlights(pageContainer, normalizedHighlights, pageNumber, pageData.textContent, this.currentScale);
     }
     /**
      * Update all unified layers
@@ -884,7 +925,14 @@ export class PDFHighlightViewer {
         for (const h of this.highlightsIndex.highlights) {
             for (let i = 0; i < h.bboxes.length; i++) {
                 const b = h.bboxes[i];
-                list.push({ termId: h.id, pageNumber: b.page, occurrenceIndex: i, x1: b.x1, y1: b.y1 });
+                const normalized = this.normalizeBBoxForPage(b, b.page);
+                list.push({
+                    termId: h.id,
+                    pageNumber: b.page,
+                    occurrenceIndex: i,
+                    x1: normalized.x1,
+                    y1: normalized.y1,
+                });
             }
         }
         list.sort((a, b) => a.pageNumber - b.pageNumber || a.y1 - b.y1 || a.x1 - b.x1);
@@ -898,6 +946,7 @@ export class PDFHighlightViewer {
         if (!bbox)
             return;
         const page = bbox.page;
+        const normalizedBBox = this.normalizeBBoxForPage(bbox, page);
         this.highlightSelectedTerm(termId);
         this.setPage(page);
         void this.renderPage(page)
@@ -908,7 +957,7 @@ export class PDFHighlightViewer {
                 return;
             }
             const pageTop = pageContainer.offsetTop;
-            const y = bbox.y1 * this.currentScale;
+            const y = normalizedBBox.y1 * this.currentScale;
             this.container.scrollTop = Math.max(0, pageTop + y - 60);
             this.emit('navigationComplete', { termId, pageNumber: page, occurrenceIndex });
         })
@@ -938,7 +987,14 @@ export class PDFHighlightViewer {
         if (!this.container)
             return;
         const pageTop = this.getPageScrollTop(pageNumber);
-        const targetY = pageTop + y * this.currentScale - this.container.clientHeight * 0.3;
+        const origin = this.options.bboxOrigin ?? 'bottom-right';
+        const pixelDimensions = this.pageDimensions.get(pageNumber);
+        if (!pixelDimensions) {
+            throw new Error(`Page dimensions for page ${pageNumber} are not available`);
+        }
+        const dimensions = this.toPageCoordinateDimensions(pixelDimensions);
+        const normalizedY = origin.startsWith('bottom') ? dimensions.height - y : y;
+        const targetY = pageTop + normalizedY * this.currentScale - this.container.clientHeight * 0.3;
         this.container.scrollTop = Math.max(0, targetY);
         this.emit('coordinateNavigation', { pageNumber, x, y });
     }
@@ -1125,15 +1181,16 @@ export class PDFHighlightViewer {
                     const bbox = highlight.bboxes[bboxIndex];
                     if (bbox.page !== pageNumber)
                         continue;
+                    const normalizedBBox = this.normalizeBBoxForPage(bbox, pageNumber);
                     const highlightDiv = document.createElement('div');
                     highlightDiv.className = 'highlight';
                     highlightDiv.setAttribute('data-term-id', highlight.id);
                     highlightDiv.setAttribute('data-page', String(pageNumber));
                     highlightDiv.setAttribute('data-bbox-index', String(bboxIndex));
-                    const left = bbox.x1 * scale;
-                    const top = bbox.y1 * scale;
-                    const width = (bbox.x2 - bbox.x1) * scale;
-                    const height = (bbox.y2 - bbox.y1) * scale;
+                    const left = normalizedBBox.x1 * scale;
+                    const top = normalizedBBox.y1 * scale;
+                    const width = (normalizedBBox.x2 - normalizedBBox.x1) * scale;
+                    const height = (normalizedBBox.y2 - normalizedBBox.y1) * scale;
                     highlightDiv.style.position = 'absolute';
                     highlightDiv.style.left = `${left}px`;
                     highlightDiv.style.top = `${top}px`;
@@ -1147,27 +1204,32 @@ export class PDFHighlightViewer {
                     highlightDiv.style.userSelect = 'none';
                     highlightDiv.style.mixBlendMode = 'multiply';
                     const baseOpacity = typeof style?.opacity === 'number' ? style.opacity : 0.3;
-                    const overlappingCount = this.countOverlappingHighlights(highlightLayer, bbox, scale);
+                    const overlappingCount = this.countOverlappingHighlights(highlightLayer, normalizedBBox, scale);
                     const effectiveOpacity = Math.max(0.05, baseOpacity / Math.max(1, overlappingCount * 0.7));
                     highlightDiv.style.opacity = effectiveOpacity.toString();
                     highlightDiv.dataset.originalOpacity = effectiveOpacity.toString();
                     const hoverOpacity = typeof style?.hoverOpacity === 'number'
                         ? style.hoverOpacity
                         : Math.min(0.6, effectiveOpacity + 0.2);
+                    const labelColor = style?.borderColor ?? style?.backgroundColor ?? '#666666';
                     highlightDiv.addEventListener('mouseenter', () => {
                         if (this.options.highlightsConfig?.enableMultilineHover) {
-                            const same = highlightLayer.querySelectorAll(`[data-term-id="${highlight.id}"]`);
+                            const same = highlightLayer.querySelectorAll(`.highlight[data-term-id="${highlight.id}"]`);
                             same.forEach((el) => (el.style.opacity = String(hoverOpacity)));
-                            const other = highlightLayer.querySelectorAll(`div[data-term-id]:not([data-term-id="${highlight.id}"])`);
+                            const other = highlightLayer.querySelectorAll(`.highlight[data-term-id]:not([data-term-id="${highlight.id}"])`);
                             other.forEach((el) => (el.style.opacity = '0.1'));
                         }
                         else {
                             highlightDiv.style.opacity = String(hoverOpacity);
                         }
+                        const labelEl = highlightDiv.querySelector('.highlight-label');
+                        if (labelEl) {
+                            labelEl.style.borderColor = borderColor;
+                        }
                     });
                     highlightDiv.addEventListener('mouseleave', () => {
                         if (this.options.highlightsConfig?.enableMultilineHover) {
-                            const all = highlightLayer.querySelectorAll(`div[data-term-id]`);
+                            const all = highlightLayer.querySelectorAll('.highlight[data-term-id]');
                             all.forEach((el) => {
                                 const original = el.dataset.originalOpacity ?? '0.3';
                                 el.style.opacity = original;
@@ -1176,8 +1238,50 @@ export class PDFHighlightViewer {
                         else {
                             highlightDiv.style.opacity = highlightDiv.dataset.originalOpacity ?? '0.3';
                         }
+                        const labelEl = highlightDiv.querySelector('.highlight-label');
+                        if (labelEl) {
+                            labelEl.style.borderColor = labelColor;
+                        }
                     });
                     highlightLayer.appendChild(highlightDiv);
+                    if (highlight.label || highlight.beforeIcon) {
+                        const labelEl = document.createElement('span');
+                        labelEl.className = 'highlight-label';
+                        labelEl.setAttribute('data-term-id', highlight.id);
+                        labelEl.style.position = 'absolute';
+                        labelEl.style.left = '0';
+                        labelEl.style.transform = 'translateX(-100%)';
+                        labelEl.style.top = '-1px';
+                        labelEl.style.display = 'flex';
+                        labelEl.style.alignItems = 'center';
+                        labelEl.style.justifyContent = 'flex-end';
+                        labelEl.style.gap = '4px';
+                        labelEl.style.pointerEvents = 'auto';
+                        labelEl.style.cursor = 'pointer';
+                        labelEl.style.whiteSpace = 'nowrap';
+                        labelEl.style.border = `1px solid ${labelColor}`;
+                        applyLabelStyle(labelEl, highlight.labelStyle);
+                        if (highlight.beforeIcon) {
+                            const iconWrap = document.createElement('span');
+                            iconWrap.className = 'highlight-label-icon';
+                            iconWrap.innerHTML = sanitizeIconHtml(highlight.beforeIcon);
+                            const svg = iconWrap.querySelector('svg');
+                            if (svg) {
+                                svg.removeAttribute('width');
+                                svg.removeAttribute('height');
+                            }
+                            const iconSize = highlight.labelStyle?.iconSize;
+                            const size = normalizeSize(iconSize);
+                            iconWrap.style.width = size;
+                            iconWrap.style.height = size;
+                            applyIconStyle(iconWrap, highlight.labelStyle);
+                            labelEl.appendChild(iconWrap);
+                        }
+                        if (highlight.label) {
+                            labelEl.appendChild(document.createTextNode(highlight.label));
+                        }
+                        highlightDiv.appendChild(labelEl);
+                    }
                 }
             }
             pageContainer.appendChild(highlightLayer);
@@ -1201,6 +1305,12 @@ export class PDFHighlightViewer {
     getHighlightStyle(termId) {
         return this.getHighlightById(termId)?.style;
     }
+    getHighlightElements(root, termId) {
+        const selector = termId
+            ? `.highlight[data-term-id="${termId}"], .highlight-wrapper[data-term-id="${termId}"]`
+            : '.highlight, .highlight-wrapper';
+        return Array.from(root.querySelectorAll(selector));
+    }
     /**
      * Update highlights colors for specified page
      * */
@@ -1248,7 +1358,44 @@ export class PDFHighlightViewer {
      */
     buildSpatialIndexForPage(pageNumber) {
         const refs = this.highlightsIndex.pages[String(pageNumber)] ?? [];
-        this.performanceOptimizer.buildSpatialIndex(refs, pageNumber);
+        const normalizedRefs = refs.map((ref) => ({
+            ...ref,
+            bbox: this.normalizeBBoxForPage({ ...ref.bbox, page: ref.page }, ref.page),
+        }));
+        this.performanceOptimizer.buildSpatialIndex(normalizedRefs, pageNumber);
+    }
+    toPageCoordinateDimensions(pixelDimensions) {
+        const scale = this.currentScale > 0 ? this.currentScale : 1;
+        return {
+            width: pixelDimensions.width / scale,
+            height: pixelDimensions.height / scale,
+        };
+    }
+    normalizeBBoxForPage(bbox, pageNumber) {
+        const origin = this.options.bboxOrigin ?? 'bottom-right';
+        const pixelDimensions = this.pageDimensions.get(pageNumber);
+        if (!pixelDimensions) {
+            throw new Error(`Page dimensions for page ${pageNumber} are not available`);
+        }
+        const { width: pageWidth, height: pageHeight } = this.toPageCoordinateDimensions(pixelDimensions);
+        let x1 = bbox.x1;
+        let x2 = bbox.x2;
+        let y1 = bbox.y1;
+        let y2 = bbox.y2;
+        if (origin.endsWith('right')) {
+            x1 = pageWidth - bbox.x1;
+            x2 = pageWidth - bbox.x2;
+        }
+        if (origin.startsWith('bottom')) {
+            y1 = pageHeight - bbox.y1;
+            y2 = pageHeight - bbox.y2;
+        }
+        return {
+            x1: Math.min(x1, x2),
+            y1: Math.min(y1, y2),
+            x2: Math.max(x1, x2),
+            y2: Math.max(y1, y2),
+        };
     }
     /**
      * Build spatial indices for all pages
@@ -1297,9 +1444,9 @@ export class PDFHighlightViewer {
         // Store the selected term ID for persistence across page renders
         this.selectedTermId = termId;
         // Remove previous selection highlighting
-        this.clearSelectedTermHighlighting();
+        this.clearSelectedTermHighlighting(false);
         // Add selected class to all instances of this term
-        const termElements = this.container.querySelectorAll(`[data-term-id="${termId}"]`);
+        const termElements = this.getHighlightElements(this.container, termId);
         termElements.forEach((element) => {
             element.classList.add('selected-term');
             // Override inline styles for selected term
@@ -1314,7 +1461,7 @@ export class PDFHighlightViewer {
             htmlElement.style.transition = 'all 0.3s ease';
         });
         // Also dim all other highlights
-        const allHighlights = this.container.querySelectorAll('.highlight, .highlight-wrapper');
+        const allHighlights = this.getHighlightElements(this.container);
         allHighlights.forEach((element) => {
             const elementTermId = element.getAttribute('data-term-id');
             if (!elementTermId || elementTermId !== termId) {
@@ -1330,12 +1477,13 @@ export class PDFHighlightViewer {
     /**
      * Clear selected term highlighting
      */
-    clearSelectedTermHighlighting() {
+    clearSelectedTermHighlighting(clearStoredSelection = true) {
         if (!this.container)
             return;
-        // Clear the selected term ID
-        this.selectedTermId = null;
-        const selectedElements = this.container.querySelectorAll('.selected-term');
+        if (clearStoredSelection) {
+            this.selectedTermId = null;
+        }
+        const selectedElements = this.container.querySelectorAll('.highlight.selected-term, .highlight-wrapper.selected-term');
         selectedElements.forEach((element) => {
             element.classList.remove('selected-term');
             // Reset inline styles for selected elements
@@ -1346,7 +1494,7 @@ export class PDFHighlightViewer {
             htmlElement.style.borderWidth = '';
             // Keep original opacity as it was set by the original rendering
         });
-        const dimmedElements = this.container.querySelectorAll('.dimmed-highlight');
+        const dimmedElements = this.container.querySelectorAll('.highlight.dimmed-highlight, .highlight-wrapper.dimmed-highlight');
         dimmedElements.forEach((element) => {
             element.classList.remove('dimmed-highlight');
             // Reset inline styles for dimmed elements