@docmentis/udoc-viewer 0.1.0

package/dist/annotation/AnnotationLayer.js

@@ -0,0 +1,1090 @@
+// PDF uses 72 points per inch, CSS uses 96 pixels per inch
+const POINTS_TO_CSS_PIXELS = 96 / 72;
+/**
+ * Manages annotation rendering and interaction for a document viewer.
+ *
+ * Annotations are rendered directly inside page slot elements for accurate positioning.
+ */
+export class AnnotationLayer {
+    /** Annotations indexed by page index */
+    pageAnnotations = new Map();
+    /** Overlay elements indexed by page index */
+    overlays = new Map();
+    /** Callback for internal link navigation */
+    onNavigate;
+    /** Callback for external link activation */
+    onOpenUri;
+    /** Current zoom level */
+    zoom = 1;
+    /** Currently active popup element */
+    activePopup = null;
+    /** Bound handler for clicking outside popup */
+    boundHandleDocumentClick = null;
+    /** Bound handler for escape key */
+    boundHandleEscapeKey = null;
+    /**
+     * Set the callback for internal link navigation.
+     */
+    setNavigateCallback(callback) {
+        this.onNavigate = callback;
+    }
+    /**
+     * Set the callback for external URI links.
+     */
+    setOpenUriCallback(callback) {
+        this.onOpenUri = callback;
+    }
+    /**
+     * Set annotations for a specific page.
+     */
+    setPageAnnotations(pageIndex, annotations) {
+        this.pageAnnotations.set(pageIndex, annotations);
+    }
+    /**
+     * Get annotations for a specific page.
+     */
+    getPageAnnotations(pageIndex) {
+        return this.pageAnnotations.get(pageIndex) ?? [];
+    }
+    /**
+     * Get all annotations with metadata, grouped by page.
+     * Returns only annotations that have metadata (comments).
+     */
+    getAllAnnotationsWithMetadata() {
+        const result = new Map();
+        for (const [pageIndex, annotations] of this.pageAnnotations) {
+            const withMetadata = annotations.filter(a => a.metadata);
+            if (withMetadata.length > 0) {
+                result.set(pageIndex, withMetadata);
+            }
+        }
+        return result;
+    }
+    /**
+     * Clear all annotations and overlays.
+     */
+    clear() {
+        this.hidePopup();
+        this.pageAnnotations.clear();
+        for (const overlay of this.overlays.values()) {
+            overlay.remove();
+        }
+        this.overlays.clear();
+    }
+    /**
+     * Set the current zoom level.
+     */
+    setZoom(zoom) {
+        this.zoom = zoom;
+    }
+    /**
+     * Show a popup for an annotation.
+     * @param anchorElement The element to anchor the popup to
+     * @param metadata The annotation metadata to display
+     * @param color The annotation color for styling
+     */
+    showPopup(anchorElement, metadata, color) {
+        // Hide any existing popup first
+        this.hidePopup();
+        // Create popup container
+        const popup = document.createElement('div');
+        popup.className = 'udoc-annotation-popup';
+        popup.style.cssText = `
+            position: absolute;
+            background: white;
+            border: 1px solid ${color};
+            border-radius: 4px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+            max-width: 300px;
+            min-width: 150px;
+            font-size: 13px;
+            line-height: 1.4;
+            color: #333;
+            z-index: 1000;
+            pointer-events: auto;
+            overflow: hidden;
+        `;
+        // Create header section - show author if exists, otherwise fallback to subject
+        const headerText = metadata.author || metadata.subject;
+        if (headerText) {
+            const header = document.createElement('div');
+            header.style.cssText = `
+                background: ${color};
+                padding: 6px 10px;
+                color: white;
+                font-weight: 500;
+                font-size: 12px;
+                text-shadow: 0 1px 1px rgba(0,0,0,0.2);
+            `;
+            header.textContent = headerText;
+            popup.appendChild(header);
+        }
+        // Create body section (contents) if exists
+        if (metadata.contents) {
+            const body = document.createElement('div');
+            body.style.cssText = `
+                padding: 8px 10px;
+                word-wrap: break-word;
+                white-space: pre-wrap;
+            `;
+            body.textContent = metadata.contents;
+            popup.appendChild(body);
+        }
+        // Position the popup relative to the anchor element
+        const anchorRect = anchorElement.getBoundingClientRect();
+        const overlay = anchorElement.closest('.udoc-annotation-overlay');
+        if (!overlay)
+            return;
+        const overlayRect = overlay.getBoundingClientRect();
+        // Position popup below and to the right of the icon
+        const popupX = anchorRect.left - overlayRect.left + anchorRect.width + 4;
+        const popupY = anchorRect.top - overlayRect.top;
+        popup.style.left = `${popupX}px`;
+        popup.style.top = `${popupY}px`;
+        overlay.appendChild(popup);
+        this.activePopup = popup;
+        // Adjust position if popup goes off-screen
+        requestAnimationFrame(() => {
+            const popupRect = popup.getBoundingClientRect();
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            // If popup extends beyond right edge, position to the left of the icon
+            if (popupRect.right > viewportWidth - 10) {
+                const newX = anchorRect.left - overlayRect.left - popupRect.width - 4;
+                popup.style.left = `${Math.max(0, newX)}px`;
+            }
+            // If popup extends beyond bottom edge, adjust upward
+            if (popupRect.bottom > viewportHeight - 10) {
+                const newY = popupY - (popupRect.bottom - viewportHeight) - 10;
+                popup.style.top = `${Math.max(0, newY)}px`;
+            }
+        });
+        // Set up event handlers for closing
+        this.boundHandleDocumentClick = (e) => {
+            if (!popup.contains(e.target) && !anchorElement.contains(e.target)) {
+                this.hidePopup();
+            }
+        };
+        this.boundHandleEscapeKey = (e) => {
+            if (e.key === 'Escape') {
+                this.hidePopup();
+            }
+        };
+        // Delay adding click listener to avoid immediate close
+        setTimeout(() => {
+            document.addEventListener('click', this.boundHandleDocumentClick);
+        }, 0);
+        document.addEventListener('keydown', this.boundHandleEscapeKey);
+    }
+    /**
+     * Hide the currently active popup.
+     */
+    hidePopup() {
+        if (this.activePopup) {
+            this.activePopup.remove();
+            this.activePopup = null;
+        }
+        if (this.boundHandleDocumentClick) {
+            document.removeEventListener('click', this.boundHandleDocumentClick);
+            this.boundHandleDocumentClick = null;
+        }
+        if (this.boundHandleEscapeKey) {
+            document.removeEventListener('keydown', this.boundHandleEscapeKey);
+            this.boundHandleEscapeKey = null;
+        }
+    }
+    /**
+     * Create or get an annotation overlay for a slot element.
+     * The overlay is positioned absolutely within the slot.
+     *
+     * @param slotEl The slot element to attach the overlay to
+     * @param pageIndex The page index for this slot
+     * @returns The overlay element
+     */
+    getOrCreateOverlay(slotEl, pageIndex) {
+        let overlay = this.overlays.get(pageIndex);
+        if (overlay && overlay.parentElement === slotEl) {
+            return overlay;
+        }
+        // Create new overlay
+        overlay = document.createElement('div');
+        overlay.className = 'udoc-annotation-overlay';
+        overlay.style.cssText = `
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+        `;
+        slotEl.appendChild(overlay);
+        this.overlays.set(pageIndex, overlay);
+        return overlay;
+    }
+    /**
+     * Render annotations for a specific page into its slot overlay.
+     *
+     * @param slotEl The slot element containing the page
+     * @param pageIndex The page index
+     */
+    renderPageAnnotations(slotEl, pageIndex) {
+        const annotations = this.pageAnnotations.get(pageIndex);
+        if (!annotations || annotations.length === 0) {
+            // Remove overlay if no annotations
+            const existing = this.overlays.get(pageIndex);
+            if (existing) {
+                existing.remove();
+                this.overlays.delete(pageIndex);
+            }
+            return;
+        }
+        const overlay = this.getOrCreateOverlay(slotEl, pageIndex);
+        overlay.innerHTML = '';
+        for (const annotation of annotations) {
+            if (!annotation.bounds)
+                continue;
+            // Replies are now nested under parent annotations, so all annotations here are top-level
+            switch (annotation.type) {
+                case 'link':
+                    this.renderLinkAnnotation(overlay, annotation);
+                    break;
+                case 'highlight':
+                    this.renderHighlightAnnotation(overlay, annotation);
+                    break;
+                case 'underline':
+                    this.renderUnderlineAnnotation(overlay, annotation);
+                    break;
+                case 'strikeOut':
+                    this.renderStrikeOutAnnotation(overlay, annotation);
+                    break;
+                case 'squiggly':
+                    this.renderSquigglyAnnotation(overlay, annotation);
+                    break;
+                // Phase 2: Text Annotations
+                case 'text':
+                    this.renderTextAnnotation(overlay, annotation);
+                    break;
+                case 'freeText':
+                    this.renderFreeTextAnnotation(overlay, annotation);
+                    break;
+                case 'stamp':
+                    this.renderStampAnnotation(overlay, annotation);
+                    break;
+                // Phase 3: Drawing Shape Annotations
+                case 'line':
+                    this.renderLineAnnotation(overlay, annotation);
+                    break;
+                case 'square':
+                    this.renderSquareAnnotation(overlay, annotation);
+                    break;
+                case 'circle':
+                    this.renderCircleAnnotation(overlay, annotation);
+                    break;
+                case 'polygon':
+                    this.renderPolygonAnnotation(overlay, annotation);
+                    break;
+                case 'polyLine':
+                    this.renderPolyLineAnnotation(overlay, annotation);
+                    break;
+                case 'ink':
+                    this.renderInkAnnotation(overlay, annotation);
+                    break;
+                // Additional Annotation Types
+                case 'caret':
+                    this.renderCaretAnnotation(overlay, annotation);
+                    break;
+                case 'redact':
+                    this.renderRedactAnnotation(overlay, annotation);
+                    break;
+            }
+        }
+    }
+    /**
+     * Render a link annotation as a clickable box.
+     */
+    renderLinkAnnotation(overlay, annotation) {
+        const screenX = annotation.bounds.x * POINTS_TO_CSS_PIXELS * this.zoom;
+        const screenY = annotation.bounds.y * POINTS_TO_CSS_PIXELS * this.zoom;
+        const screenWidth = annotation.bounds.width * POINTS_TO_CSS_PIXELS * this.zoom;
+        const screenHeight = annotation.bounds.height * POINTS_TO_CSS_PIXELS * this.zoom;
+        const box = document.createElement('div');
+        box.className = 'udoc-annotation-box udoc-annotation-link';
+        box.style.cssText = `
+            position: absolute;
+            left: ${screenX}px;
+            top: ${screenY}px;
+            width: ${screenWidth}px;
+            height: ${screenHeight}px;
+            pointer-events: auto;
+            cursor: pointer;
+        `;
+        box.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            if (annotation.action) {
+                this.handleLinkAction(annotation.action);
+            }
+        });
+        overlay.appendChild(box);
+    }
+    /**
+     * Render a highlight annotation as a colored overlay.
+     */
+    renderHighlightAnnotation(overlay, annotation) {
+        const svg = this.createSvgOverlay(annotation.bounds);
+        const color = this.colorToRgb(annotation.color, 'rgb(255, 255, 0)'); // Default yellow
+        const opacity = annotation.opacity ?? 0.4;
+        for (const quad of annotation.quads) {
+            const scaledPoints = this.scaleQuadPoints(quad.points);
+            const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
+            polygon.setAttribute('points', scaledPoints.map((p) => `${p.x},${p.y}`).join(' '));
+            polygon.setAttribute('fill', color);
+            polygon.setAttribute('fill-opacity', String(opacity));
+            polygon.setAttribute('style', 'mix-blend-mode: multiply;');
+            svg.appendChild(polygon);
+        }
+        overlay.appendChild(svg);
+        // Add clickable overlay when metadata exists
+        this.addTextMarkupClickHandler(overlay, annotation, color);
+    }
+    /**
+     * Add a clickable overlay for text markup annotations when metadata exists.
+     */
+    addTextMarkupClickHandler(overlay, annotation, color) {
+        if (!annotation.metadata)
+            return;
+        const screenX = annotation.bounds.x * POINTS_TO_CSS_PIXELS * this.zoom;
+        const screenY = annotation.bounds.y * POINTS_TO_CSS_PIXELS * this.zoom;
+        const screenWidth = annotation.bounds.width * POINTS_TO_CSS_PIXELS * this.zoom;
+        const screenHeight = annotation.bounds.height * POINTS_TO_CSS_PIXELS * this.zoom;
+        const clickArea = document.createElement('div');
+        clickArea.className = 'udoc-annotation-click-area';
+        clickArea.style.cssText = `
+            position: absolute;
+            left: ${screenX}px;
+            top: ${screenY}px;
+            width: ${screenWidth}px;
+            height: ${screenHeight}px;
+            pointer-events: auto;
+            cursor: pointer;
+        `;
+        clickArea.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.showPopup(clickArea, annotation.metadata, color);
+        });
+        overlay.appendChild(clickArea);
+    }
+    /**
+     * Render an underline annotation as lines along the bottom of text.
+     */
+    renderUnderlineAnnotation(overlay, annotation) {
+        const svg = this.createSvgOverlay(annotation.bounds);
+        const color = this.colorToRgb(annotation.color, 'rgb(0, 128, 0)'); // Default green
+        const strokeWidth = Math.max(1, 1 * this.zoom);
+        for (const quad of annotation.quads) {
+            const scaledPoints = this.scaleQuadPoints(quad.points);
+            // Draw line along bottom edge (from bottom-left to bottom-right)
+            const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+            line.setAttribute('x1', String(scaledPoints[0].x));
+            line.setAttribute('y1', String(scaledPoints[0].y));
+            line.setAttribute('x2', String(scaledPoints[1].x));
+            line.setAttribute('y2', String(scaledPoints[1].y));
+            line.setAttribute('stroke', color);
+            line.setAttribute('stroke-width', String(strokeWidth));
+            svg.appendChild(line);
+        }
+        overlay.appendChild(svg);
+        // Add clickable overlay when metadata exists
+        this.addTextMarkupClickHandler(overlay, annotation, color);
+    }
+    /**
+     * Render a strikeout annotation as lines through the middle of text.
+     */
+    renderStrikeOutAnnotation(overlay, annotation) {
+        const svg = this.createSvgOverlay(annotation.bounds);
+        const color = this.colorToRgb(annotation.color, 'rgb(255, 0, 0)'); // Default red
+        const strokeWidth = Math.max(1, 1 * this.zoom);
+        for (const quad of annotation.quads) {
+            const scaledPoints = this.scaleQuadPoints(quad.points);
+            // Calculate middle Y between top and bottom
+            const midLeftY = (scaledPoints[0].y + scaledPoints[3].y) / 2;
+            const midRightY = (scaledPoints[1].y + scaledPoints[2].y) / 2;
+            const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+            line.setAttribute('x1', String(scaledPoints[0].x));
+            line.setAttribute('y1', String(midLeftY));
+            line.setAttribute('x2', String(scaledPoints[1].x));
+            line.setAttribute('y2', String(midRightY));
+            line.setAttribute('stroke', color);
+            line.setAttribute('stroke-width', String(strokeWidth));
+            svg.appendChild(line);
+        }
+        overlay.appendChild(svg);
+        // Add clickable overlay when metadata exists
+        this.addTextMarkupClickHandler(overlay, annotation, color);
+    }
+    /**
+     * Render a squiggly annotation as wavy lines under text.
+     */
+    renderSquigglyAnnotation(overlay, annotation) {
+        const svg = this.createSvgOverlay(annotation.bounds);
+        const color = this.colorToRgb(annotation.color, 'rgb(255, 0, 0)'); // Default red
+        const strokeWidth = Math.max(1, 1 * this.zoom);
+        const wavelength = 4 * this.zoom;
+        const amplitude = 2 * this.zoom;
+        for (const quad of annotation.quads) {
+            const scaledPoints = this.scaleQuadPoints(quad.points);
+            const startX = scaledPoints[0].x;
+            const endX = scaledPoints[1].x;
+            const startY = scaledPoints[0].y;
+            const endY = scaledPoints[1].y;
+            // Generate wavy path
+            let path = `M ${startX} ${startY}`;
+            const totalLength = Math.sqrt((endX - startX) ** 2 + (endY - startY) ** 2);
+            const steps = Math.ceil(totalLength / wavelength);
+            for (let i = 0; i < steps; i++) {
+                const t1 = (i + 0.5) / steps;
+                const t2 = (i + 1) / steps;
+                const midX = startX + (endX - startX) * t1;
+                const midY = startY + (endY - startY) * t1;
+                const nextX = startX + (endX - startX) * t2;
+                const nextY = startY + (endY - startY) * t2;
+                // Alternate up and down
+                const direction = i % 2 === 0 ? -1 : 1;
+                path += ` Q ${midX} ${midY + amplitude * direction}, ${nextX} ${nextY}`;
+            }
+            const pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+            pathEl.setAttribute('d', path);
+            pathEl.setAttribute('stroke', color);
+            pathEl.setAttribute('stroke-width', String(strokeWidth));
+            pathEl.setAttribute('fill', 'none');
+            svg.appendChild(pathEl);
+        }
+        overlay.appendChild(svg);
+        // Add clickable overlay when metadata exists
+        this.addTextMarkupClickHandler(overlay, annotation, color);
+    }
+    // =========================================================================
+    // Phase 2: Text Annotation Renderers
+    // =========================================================================
+    /**
+     * Render a text (sticky note) annotation as an icon.
+     */
+    renderTextAnnotation(overlay, annotation) {
+        const screenX = annotation.bounds.x * POINTS_TO_CSS_PIXELS * this.zoom;
+        const iconSize = 20 * this.zoom;
+        const color = this.colorToRgb(annotation.color, 'rgb(255, 208, 0)'); // Default yellow
+        // Position at bottom-left of bounds (PDF anchors sticky notes at lower-left corner)
+        // After Y-flip, lower-left becomes bottom-left in screen coords
+        const screenY = (annotation.bounds.y + annotation.bounds.height) * POINTS_TO_CSS_PIXELS * this.zoom -
+            iconSize;
+        // Create icon container
+        const icon = document.createElement('div');
+        icon.className = 'udoc-annotation-text-icon';
+        icon.style.cssText = `
+            position: absolute;
+            left: ${screenX}px;
+            top: ${screenY}px;
+            width: ${iconSize}px;
+            height: ${iconSize}px;
+            pointer-events: auto;
+            cursor: pointer;
+        `;
+        // Create SVG icon based on type
+        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svg.setAttribute('viewBox', '0 0 24 24');
+        svg.setAttribute('width', String(iconSize));
+        svg.setAttribute('height', String(iconSize));
+        // Use a note/comment icon path
+        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        path.setAttribute('d', 'M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z');
+        path.setAttribute('fill', color);
+        path.setAttribute('stroke', 'rgba(0,0,0,0.3)');
+        path.setAttribute('stroke-width', '1');
+        svg.appendChild(path);
+        icon.appendChild(svg);
+        // Add click handler to show popup with metadata
+        if (annotation.metadata) {
+            icon.addEventListener('click', (e) => {
+                e.stopPropagation();
+                this.showPopup(icon, annotation.metadata, color);
+            });
+        }
+        overlay.appendChild(icon);
+    }
+    /**
+     * Render a free text (typewriter/text box) annotation.
+     */
+    renderFreeTextAnnotation(overlay, annotation) {
+        const screenX = annotation.bounds.x * POINTS_TO_CSS_PIXELS * this.zoom;
+        const screenY = annotation.bounds.y * POINTS_TO_CSS_PIXELS * this.zoom;
+        const screenWidth = annotation.bounds.width * POINTS_TO_CSS_PIXELS * this.zoom;
+        const screenHeight = annotation.bounds.height * POINTS_TO_CSS_PIXELS * this.zoom;
+        const color = this.colorToRgb(annotation.color, 'rgb(0, 0, 0)'); // Default black
+        const borderColor = this.colorToRgb(annotation.borderColor, 'transparent');
+        // Create text box
+        const textBox = document.createElement('div');
+        textBox.className = 'udoc-annotation-freetext';
+        textBox.style.cssText = `
+            position: absolute;
+            left: ${screenX}px;
+            top: ${screenY}px;
+            width: ${screenWidth}px;
+            height: ${screenHeight}px;
+            color: ${color};
+            border: 1px solid ${borderColor};
+            font-size: ${12 * this.zoom}px;
+            font-family: Helvetica, Arial, sans-serif;
+            text-align: ${annotation.justification};
+            overflow: hidden;
+            word-wrap: break-word;
+            pointer-events: none;
+            padding: ${2 * this.zoom}px;
+            box-sizing: border-box;
+        `;
+        if (annotation.contents) {
+            textBox.textContent = annotation.contents;
+        }
+        // Render callout line if present
+        if (annotation.calloutLine && annotation.calloutLine.length >= 2) {
+            const svg = this.createSvgOverlay(annotation.bounds);
+            const lineColor = this.colorToRgb(annotation.borderColor, 'rgb(0, 0, 0)');
+            const strokeWidth = Math.max(1, 1 * this.zoom);
+            const pathData = annotation.calloutLine
+                .map((point, i) => {
+                const x = point.x * POINTS_TO_CSS_PIXELS * this.zoom;
+                const y = point.y * POINTS_TO_CSS_PIXELS * this.zoom;
+                return `${i === 0 ? 'M' : 'L'} ${x} ${y}`;
+            })
+                .join(' ');
+            const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+            path.setAttribute('d', pathData);
+            path.setAttribute('stroke', lineColor);
+            path.setAttribute('stroke-width', String(strokeWidth));
+            path.setAttribute('fill', 'none');
+            svg.appendChild(path);
+            overlay.appendChild(svg);
+        }
+        overlay.appendChild(textBox);
+    }
+    /**
+     * Render a stamp annotation as a bordered text label.
+     */
+    renderStampAnnotation(overlay, annotation) {
+        const screenX = annotation.bounds.x * POINTS_TO_CSS_PIXELS * this.zoom;
+        const screenY = annotation.bounds.y * POINTS_TO_CSS_PIXELS * this.zoom;
+        const screenWidth = annotation.bounds.width * POINTS_TO_CSS_PIXELS * this.zoom;
+        const screenHeight = annotation.bounds.height * POINTS_TO_CSS_PIXELS * this.zoom;
+        const color = this.colorToRgb(annotation.color, 'rgb(255, 0, 0)'); // Default red
+        // If stamp has custom appearance, we just show the bounds
+        // (actual appearance would be rendered via the page content)
+        // For standard stamps, show the name
+        const stamp = document.createElement('div');
+        stamp.className = 'udoc-annotation-stamp';
+        stamp.style.cssText = `
+            position: absolute;
+            left: ${screenX}px;
+            top: ${screenY}px;
+            width: ${screenWidth}px;
+            height: ${screenHeight}px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            pointer-events: none;
+        `;
+        // Only show text for standard stamps without custom appearance
+        if (!annotation.hasCustomAppearance && annotation.name) {
+            const label = document.createElement('span');
+            label.style.cssText = `
+                color: ${color};
+                font-size: ${Math.min(screenHeight * 0.4, 16 * this.zoom)}px;
+                font-weight: bold;
+                font-family: Helvetica, Arial, sans-serif;
+                text-transform: uppercase;
+                border: 2px solid ${color};
+                padding: ${2 * this.zoom}px ${4 * this.zoom}px;
+                transform: rotate(-15deg);
+                white-space: nowrap;
+            `;
+            label.textContent = annotation.name;
+            stamp.appendChild(label);
+        }
+        overlay.appendChild(stamp);
+    }
+    // =========================================================================
+    // Phase 3: Drawing Shape Annotation Renderers
+    // =========================================================================
+    /**
+     * Render a line annotation with optional line endings.
+     */
+    renderLineAnnotation(overlay, annotation) {
+        const svg = this.createSvgOverlay(annotation.bounds);
+        const color = this.colorToRgb(annotation.color, 'rgb(0, 0, 0)');
+        const interiorColor = this.colorToRgb(annotation.interiorColor, color);
+        const strokeWidth = (annotation.borderWidth ?? 1) * this.zoom;
+        const opacity = annotation.opacity ?? 1;
+        // Scale coordinates
+        const startX = annotation.start.x * POINTS_TO_CSS_PIXELS * this.zoom;
+        const startY = annotation.start.y * POINTS_TO_CSS_PIXELS * this.zoom;
+        const endX = annotation.end.x * POINTS_TO_CSS_PIXELS * this.zoom;
+        const endY = annotation.end.y * POINTS_TO_CSS_PIXELS * this.zoom;
+        // Create group for line and endings
+        const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+        g.setAttribute('opacity', String(opacity));
+        // Draw main line
+        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+        line.setAttribute('x1', String(startX));
+        line.setAttribute('y1', String(startY));
+        line.setAttribute('x2', String(endX));
+        line.setAttribute('y2', String(endY));
+        line.setAttribute('stroke', color);
+        line.setAttribute('stroke-width', String(strokeWidth));
+        g.appendChild(line);
+        // Draw line endings
+        const angle = Math.atan2(endY - startY, endX - startX);
+        this.drawLineEnding(g, startX, startY, annotation.startEnding, angle + Math.PI, strokeWidth, color, interiorColor);
+        this.drawLineEnding(g, endX, endY, annotation.endEnding, angle, strokeWidth, color, interiorColor);
+        svg.appendChild(g);
+        overlay.appendChild(svg);
+    }
+    /**
+     * Draw a line ending at a point.
+     */
+    drawLineEnding(g, x, y, ending, angle, strokeWidth, color, interiorColor) {
+        if (ending === 'None')
+            return;
+        const size = strokeWidth * 4;
+        switch (ending) {
+            case 'OpenArrow': {
+                const p1x = x - size * Math.cos(angle - Math.PI / 6);
+                const p1y = y - size * Math.sin(angle - Math.PI / 6);
+                const p2x = x - size * Math.cos(angle + Math.PI / 6);
+                const p2y = y - size * Math.sin(angle + Math.PI / 6);
+                const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+                path.setAttribute('d', `M ${p1x} ${p1y} L ${x} ${y} L ${p2x} ${p2y}`);
+                path.setAttribute('stroke', color);
+                path.setAttribute('stroke-width', String(strokeWidth));
+                path.setAttribute('fill', 'none');
+                g.appendChild(path);
+                break;
+            }
+            case 'ClosedArrow': {
+                const p1x = x - size * Math.cos(angle - Math.PI / 6);
+                const p1y = y - size * Math.sin(angle - Math.PI / 6);
+                const p2x = x - size * Math.cos(angle + Math.PI / 6);
+                const p2y = y - size * Math.sin(angle + Math.PI / 6);
+                const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
+                polygon.setAttribute('points', `${x},${y} ${p1x},${p1y} ${p2x},${p2y}`);
+                polygon.setAttribute('fill', interiorColor);
+                polygon.setAttribute('stroke', color);
+                polygon.setAttribute('stroke-width', String(strokeWidth * 0.5));
+                g.appendChild(polygon);
+                break;
+            }
+            case 'Circle': {
+                const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+                circle.setAttribute('cx', String(x));
+                circle.setAttribute('cy', String(y));
+                circle.setAttribute('r', String(size / 2));
+                circle.setAttribute('fill', interiorColor);
+                circle.setAttribute('stroke', color);
+                circle.setAttribute('stroke-width', String(strokeWidth * 0.5));
+                g.appendChild(circle);
+                break;
+            }
+            case 'Square': {
+                const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+                rect.setAttribute('x', String(x - size / 2));
+                rect.setAttribute('y', String(y - size / 2));
+                rect.setAttribute('width', String(size));
+                rect.setAttribute('height', String(size));
+                rect.setAttribute('fill', interiorColor);
+                rect.setAttribute('stroke', color);
+                rect.setAttribute('stroke-width', String(strokeWidth * 0.5));
+                g.appendChild(rect);
+                break;
+            }
+            case 'Diamond': {
+                const dx = size / 2;
+                const points = `${x},${y - dx} ${x + dx},${y} ${x},${y + dx} ${x - dx},${y}`;
+                const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
+                polygon.setAttribute('points', points);
+                polygon.setAttribute('fill', interiorColor);
+                polygon.setAttribute('stroke', color);
+                polygon.setAttribute('stroke-width', String(strokeWidth * 0.5));
+                g.appendChild(polygon);
+                break;
+            }
+            case 'Butt': {
+                // Perpendicular line
+                const perpAngle = angle + Math.PI / 2;
+                const p1x = x + (size / 2) * Math.cos(perpAngle);
+                const p1y = y + (size / 2) * Math.sin(perpAngle);
+                const p2x = x - (size / 2) * Math.cos(perpAngle);
+                const p2y = y - (size / 2) * Math.sin(perpAngle);
+                const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+                line.setAttribute('x1', String(p1x));
+                line.setAttribute('y1', String(p1y));
+                line.setAttribute('x2', String(p2x));
+                line.setAttribute('y2', String(p2y));
+                line.setAttribute('stroke', color);
+                line.setAttribute('stroke-width', String(strokeWidth));
+                g.appendChild(line);
+                break;
+            }
+            case 'ROpenArrow': {
+                // Reversed open arrow (pointing away from line)
+                const p1x = x + size * Math.cos(angle - Math.PI / 6);
+                const p1y = y + size * Math.sin(angle - Math.PI / 6);
+                const p2x = x + size * Math.cos(angle + Math.PI / 6);
+                const p2y = y + size * Math.sin(angle + Math.PI / 6);
+                const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+                path.setAttribute('d', `M ${p1x} ${p1y} L ${x} ${y} L ${p2x} ${p2y}`);
+                path.setAttribute('stroke', color);
+                path.setAttribute('stroke-width', String(strokeWidth));
+                path.setAttribute('fill', 'none');
+                g.appendChild(path);
+                break;
+            }
+            case 'RClosedArrow': {
+                // Reversed closed arrow
+                const p1x = x + size * Math.cos(angle - Math.PI / 6);
+                const p1y = y + size * Math.sin(angle - Math.PI / 6);
+                const p2x = x + size * Math.cos(angle + Math.PI / 6);
+                const p2y = y + size * Math.sin(angle + Math.PI / 6);
+                const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
+                polygon.setAttribute('points', `${x},${y} ${p1x},${p1y} ${p2x},${p2y}`);
+                polygon.setAttribute('fill', interiorColor);
+                polygon.setAttribute('stroke', color);
+                polygon.setAttribute('stroke-width', String(strokeWidth * 0.5));
+                g.appendChild(polygon);
+                break;
+            }
+            case 'Slash': {
+                // Slash line
+                const slashAngle = angle + Math.PI / 4;
+                const p1x = x + (size / 2) * Math.cos(slashAngle);
+                const p1y = y + (size / 2) * Math.sin(slashAngle);
+                const p2x = x - (size / 2) * Math.cos(slashAngle);
+                const p2y = y - (size / 2) * Math.sin(slashAngle);
+                const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+                line.setAttribute('x1', String(p1x));
+                line.setAttribute('y1', String(p1y));
+                line.setAttribute('x2', String(p2x));
+                line.setAttribute('y2', String(p2y));
+                line.setAttribute('stroke', color);
+                line.setAttribute('stroke-width', String(strokeWidth));
+                g.appendChild(line);
+                break;
+            }
+        }
+    }
+    /**
+     * Render a square/rectangle annotation.
+     */
+    renderSquareAnnotation(overlay, annotation) {
+        const svg = this.createSvgOverlay(annotation.bounds);
+        const color = this.colorToRgb(annotation.color, 'rgb(0, 0, 0)');
+        const interiorColor = annotation.interiorColor
+            ? this.colorToRgb(annotation.interiorColor, 'none')
+            : 'none';
+        const strokeWidth = (annotation.borderWidth ?? 1) * this.zoom;
+        const opacity = annotation.opacity ?? 1;
+        const x = annotation.bounds.x * POINTS_TO_CSS_PIXELS * this.zoom;
+        const y = annotation.bounds.y * POINTS_TO_CSS_PIXELS * this.zoom;
+        const width = annotation.bounds.width * POINTS_TO_CSS_PIXELS * this.zoom;
+        const height = annotation.bounds.height * POINTS_TO_CSS_PIXELS * this.zoom;
+        const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+        rect.setAttribute('x', String(x + strokeWidth / 2));
+        rect.setAttribute('y', String(y + strokeWidth / 2));
+        rect.setAttribute('width', String(Math.max(0, width - strokeWidth)));
+        rect.setAttribute('height', String(Math.max(0, height - strokeWidth)));
+        rect.setAttribute('fill', interiorColor);
+        rect.setAttribute('stroke', color);
+        rect.setAttribute('stroke-width', String(strokeWidth));
+        rect.setAttribute('opacity', String(opacity));
+        // Apply dash pattern for dashed style
+        if (annotation.borderStyle === 'dashed') {
+            rect.setAttribute('stroke-dasharray', `${strokeWidth * 3} ${strokeWidth * 2}`);
+        }
+        svg.appendChild(rect);
+        overlay.appendChild(svg);
+    }
+    /**
+     * Render a circle/ellipse annotation.
+     */
+    renderCircleAnnotation(overlay, annotation) {
+        const svg = this.createSvgOverlay(annotation.bounds);
+        const color = this.colorToRgb(annotation.color, 'rgb(0, 0, 0)');
+        const interiorColor = annotation.interiorColor
+            ? this.colorToRgb(annotation.interiorColor, 'none')
+            : 'none';
+        const strokeWidth = (annotation.borderWidth ?? 1) * this.zoom;
+        const opacity = annotation.opacity ?? 1;
+        const x = annotation.bounds.x * POINTS_TO_CSS_PIXELS * this.zoom;
+        const y = annotation.bounds.y * POINTS_TO_CSS_PIXELS * this.zoom;
+        const width = annotation.bounds.width * POINTS_TO_CSS_PIXELS * this.zoom;
+        const height = annotation.bounds.height * POINTS_TO_CSS_PIXELS * this.zoom;
+        const cx = x + width / 2;
+        const cy = y + height / 2;
+        const rx = (width - strokeWidth) / 2;
+        const ry = (height - strokeWidth) / 2;
+        const ellipse = document.createElementNS('http://www.w3.org/2000/svg', 'ellipse');
+        ellipse.setAttribute('cx', String(cx));
+        ellipse.setAttribute('cy', String(cy));
+        ellipse.setAttribute('rx', String(Math.max(0, rx)));
+        ellipse.setAttribute('ry', String(Math.max(0, ry)));
+        ellipse.setAttribute('fill', interiorColor);
+        ellipse.setAttribute('stroke', color);
+        ellipse.setAttribute('stroke-width', String(strokeWidth));
+        ellipse.setAttribute('opacity', String(opacity));
+        // Apply dash pattern for dashed style
+        if (annotation.borderStyle === 'dashed') {
+            ellipse.setAttribute('stroke-dasharray', `${strokeWidth * 3} ${strokeWidth * 2}`);
+        }
+        svg.appendChild(ellipse);
+        overlay.appendChild(svg);
+    }
+    /**
+     * Render a polygon annotation (closed shape).
+     */
+    renderPolygonAnnotation(overlay, annotation) {
+        if (!annotation.vertices || annotation.vertices.length < 3)
+            return;
+        const svg = this.createSvgOverlay(annotation.bounds);
+        const color = this.colorToRgb(annotation.color, 'rgb(0, 0, 0)');
+        const interiorColor = annotation.interiorColor
+            ? this.colorToRgb(annotation.interiorColor, 'none')
+            : 'none';
+        const strokeWidth = (annotation.borderWidth ?? 1) * this.zoom;
+        const opacity = annotation.opacity ?? 1;
+        const scaledPoints = annotation.vertices.map((p) => ({
+            x: p.x * POINTS_TO_CSS_PIXELS * this.zoom,
+            y: p.y * POINTS_TO_CSS_PIXELS * this.zoom,
+        }));
+        const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
+        polygon.setAttribute('points', scaledPoints.map((p) => `${p.x},${p.y}`).join(' '));
+        polygon.setAttribute('fill', interiorColor);
+        polygon.setAttribute('stroke', color);
+        polygon.setAttribute('stroke-width', String(strokeWidth));
+        polygon.setAttribute('opacity', String(opacity));
+        svg.appendChild(polygon);
+        overlay.appendChild(svg);
+    }
+    /**
+     * Render a polyline annotation (open path).
+     */
+    renderPolyLineAnnotation(overlay, annotation) {
+        if (!annotation.vertices || annotation.vertices.length < 2)
+            return;
+        const svg = this.createSvgOverlay(annotation.bounds);
+        const color = this.colorToRgb(annotation.color, 'rgb(0, 0, 0)');
+        const strokeWidth = (annotation.borderWidth ?? 1) * this.zoom;
+        const opacity = annotation.opacity ?? 1;
+        const scaledPoints = annotation.vertices.map((p) => ({
+            x: p.x * POINTS_TO_CSS_PIXELS * this.zoom,
+            y: p.y * POINTS_TO_CSS_PIXELS * this.zoom,
+        }));
+        const polyline = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
+        polyline.setAttribute('points', scaledPoints.map((p) => `${p.x},${p.y}`).join(' '));
+        polyline.setAttribute('fill', 'none');
+        polyline.setAttribute('stroke', color);
+        polyline.setAttribute('stroke-width', String(strokeWidth));
+        polyline.setAttribute('opacity', String(opacity));
+        svg.appendChild(polyline);
+        overlay.appendChild(svg);
+    }
+    /**
+     * Render an ink (freehand) annotation.
+     */
+    renderInkAnnotation(overlay, annotation) {
+        if (!annotation.inkList || annotation.inkList.length === 0)
+            return;
+        const svg = this.createSvgOverlay(annotation.bounds);
+        const color = this.colorToRgb(annotation.color, 'rgb(0, 0, 0)');
+        const strokeWidth = (annotation.borderWidth ?? 1) * this.zoom;
+        const opacity = annotation.opacity ?? 1;
+        const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+        g.setAttribute('opacity', String(opacity));
+        for (const stroke of annotation.inkList) {
+            if (stroke.length < 2)
+                continue;
+            const pathData = stroke
+                .map((p, i) => {
+                const x = p.x * POINTS_TO_CSS_PIXELS * this.zoom;
+                const y = p.y * POINTS_TO_CSS_PIXELS * this.zoom;
+                return `${i === 0 ? 'M' : 'L'} ${x} ${y}`;
+            })
+                .join(' ');
+            const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+            path.setAttribute('d', pathData);
+            path.setAttribute('fill', 'none');
+            path.setAttribute('stroke', color);
+            path.setAttribute('stroke-width', String(strokeWidth));
+            path.setAttribute('stroke-linecap', 'round');
+            path.setAttribute('stroke-linejoin', 'round');
+            g.appendChild(path);
+        }
+        svg.appendChild(g);
+        overlay.appendChild(svg);
+    }
+    // =========================================================================
+    // Additional Annotation Renderers: Caret and Redact
+    // =========================================================================
+    /**
+     * Render a caret (text insertion point) annotation.
+     */
+    renderCaretAnnotation(overlay, annotation) {
+        const svg = this.createSvgOverlay(annotation.bounds);
+        const color = this.colorToRgb(annotation.color, 'rgb(0, 128, 255)'); // Default blue
+        const opacity = annotation.opacity ?? 1;
+        const x = annotation.bounds.x * POINTS_TO_CSS_PIXELS * this.zoom;
+        const y = annotation.bounds.y * POINTS_TO_CSS_PIXELS * this.zoom;
+        const width = annotation.bounds.width * POINTS_TO_CSS_PIXELS * this.zoom;
+        const height = annotation.bounds.height * POINTS_TO_CSS_PIXELS * this.zoom;
+        const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+        g.setAttribute('opacity', String(opacity));
+        // Draw caret symbol (^) or paragraph marker
+        if (annotation.symbol === 'P') {
+            // Paragraph symbol (¶)
+            const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+            text.setAttribute('x', String(x + width / 2));
+            text.setAttribute('y', String(y + height * 0.8));
+            text.setAttribute('fill', color);
+            text.setAttribute('font-size', String(Math.min(height, 16 * this.zoom)));
+            text.setAttribute('text-anchor', 'middle');
+            text.textContent = '¶';
+            g.appendChild(text);
+        }
+        else {
+            // Default caret (^) - draw as an inverted V
+            const caretHeight = Math.min(height, 12 * this.zoom);
+            const caretWidth = caretHeight * 0.8;
+            const centerX = x + width / 2;
+            const bottomY = y + height;
+            const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+            path.setAttribute('d', `M ${centerX - caretWidth / 2} ${bottomY} L ${centerX} ${bottomY - caretHeight} L ${centerX + caretWidth / 2} ${bottomY}`);
+            path.setAttribute('stroke', color);
+            path.setAttribute('stroke-width', String(2 * this.zoom));
+            path.setAttribute('fill', 'none');
+            path.setAttribute('stroke-linecap', 'round');
+            path.setAttribute('stroke-linejoin', 'round');
+            g.appendChild(path);
+        }
+        svg.appendChild(g);
+        overlay.appendChild(svg);
+    }
+    /**
+     * Render a redact annotation (marks content for removal).
+     */
+    renderRedactAnnotation(overlay, annotation) {
+        const svg = this.createSvgOverlay(annotation.bounds);
+        const borderColor = this.colorToRgb(annotation.color, 'rgb(255, 0, 0)'); // Default red border
+        const fillColor = this.colorToRgb(annotation.interiorColor, 'rgb(0, 0, 0)'); // Default black fill
+        const opacity = annotation.opacity ?? 1;
+        const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+        g.setAttribute('opacity', String(opacity));
+        // If we have quads, draw each quad region
+        if (annotation.quads && annotation.quads.length > 0) {
+            for (const quad of annotation.quads) {
+                const scaledPoints = this.scaleQuadPoints(quad.points);
+                const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
+                polygon.setAttribute('points', scaledPoints.map((p) => `${p.x},${p.y}`).join(' '));
+                polygon.setAttribute('fill', fillColor);
+                polygon.setAttribute('fill-opacity', '0.3');
+                polygon.setAttribute('stroke', borderColor);
+                polygon.setAttribute('stroke-width', String(2 * this.zoom));
+                polygon.setAttribute('stroke-dasharray', `${4 * this.zoom} ${2 * this.zoom}`);
+                g.appendChild(polygon);
+            }
+        }
+        else {
+            // Draw the entire bounds as a redaction area
+            const x = annotation.bounds.x * POINTS_TO_CSS_PIXELS * this.zoom;
+            const y = annotation.bounds.y * POINTS_TO_CSS_PIXELS * this.zoom;
+            const width = annotation.bounds.width * POINTS_TO_CSS_PIXELS * this.zoom;
+            const height = annotation.bounds.height * POINTS_TO_CSS_PIXELS * this.zoom;
+            const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+            rect.setAttribute('x', String(x));
+            rect.setAttribute('y', String(y));
+            rect.setAttribute('width', String(width));
+            rect.setAttribute('height', String(height));
+            rect.setAttribute('fill', fillColor);
+            rect.setAttribute('fill-opacity', '0.3');
+            rect.setAttribute('stroke', borderColor);
+            rect.setAttribute('stroke-width', String(2 * this.zoom));
+            rect.setAttribute('stroke-dasharray', `${4 * this.zoom} ${2 * this.zoom}`);
+            g.appendChild(rect);
+            // Add overlay text if present
+            if (annotation.overlayText) {
+                const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+                text.setAttribute('x', String(x + width / 2));
+                text.setAttribute('y', String(y + height / 2));
+                text.setAttribute('fill', borderColor);
+                text.setAttribute('font-size', String(Math.min(height * 0.6, 14 * this.zoom)));
+                text.setAttribute('text-anchor', 'middle');
+                text.setAttribute('dominant-baseline', 'middle');
+                text.textContent = annotation.overlayText;
+                g.appendChild(text);
+            }
+        }
+        svg.appendChild(g);
+        overlay.appendChild(svg);
+    }
+    /**
+     * Create an SVG element sized to cover the annotation overlay.
+     */
+    createSvgOverlay(_bounds) {
+        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svg.style.cssText = `
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            overflow: visible;
+        `;
+        return svg;
+    }
+    /**
+     * Scale quad points from PDF coordinates to screen pixels.
+     */
+    scaleQuadPoints(points) {
+        return points.map((p) => ({
+            x: p.x * POINTS_TO_CSS_PIXELS * this.zoom,
+            y: p.y * POINTS_TO_CSS_PIXELS * this.zoom,
+        }));
+    }
+    /**
+     * Convert annotation color to CSS rgb() string.
+     */
+    colorToRgb(color, defaultColor) {
+        if (!color)
+            return defaultColor;
+        const r = Math.round(color.r * 255);
+        const g = Math.round(color.g * 255);
+        const b = Math.round(color.b * 255);
+        return `rgb(${r}, ${g}, ${b})`;
+    }
+    handleLinkAction(action) {
+        if (action.actionType === 'goTo') {
+            if (this.onNavigate) {
+                this.onNavigate(action.destination);
+                return true;
+            }
+        }
+        else if (action.actionType === 'uri') {
+            if (this.onOpenUri) {
+                this.onOpenUri(action.uri);
+                return true;
+            }
+            else {
+                // Default behavior: open in new tab
+                window.open(action.uri, '_blank', 'noopener,noreferrer');
+                return true;
+            }
+        }
+        return false;
+    }
+}
+//# sourceMappingURL=AnnotationLayer.js.map