1024 lines
32 KiB
TypeScript
1024 lines
32 KiB
TypeScript
import { DeesElement, property, html, customElement, type TemplateResult } from '@design.estate/dees-element';
|
|
import { keyed } from 'lit/directives/keyed.js';
|
|
import { repeat } from 'lit/directives/repeat.js';
|
|
import { PdfManager } from '../dees-pdf-shared/PdfManager.js';
|
|
import { viewerStyles } from './styles.js';
|
|
import { demo as demoFunc } from './demo.js';
|
|
import '../dees-icon.js';
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'dees-pdf-viewer': DeesPdfViewer;
|
|
}
|
|
}
|
|
|
|
type RenderState = 'idle' | 'loading' | 'rendering-main' | 'rendering-thumbs' | 'rendered' | 'error' | 'disposed';
|
|
|
|
@customElement('dees-pdf-viewer')
|
|
export class DeesPdfViewer extends DeesElement {
|
|
public static demo = demoFunc;
|
|
public static styles = viewerStyles;
|
|
|
|
@property({ type: String })
|
|
public pdfUrl: string = '';
|
|
|
|
@property({ type: Number })
|
|
public initialPage: number = 1;
|
|
|
|
@property({ type: String })
|
|
public initialZoom: 'auto' | 'page-fit' | 'page-width' | number = 'auto';
|
|
|
|
@property({ type: Boolean })
|
|
public showToolbar: boolean = true;
|
|
|
|
@property({ type: Boolean })
|
|
public showSidebar: boolean = false;
|
|
|
|
@property({ type: Number })
|
|
private currentPage: number = 1;
|
|
|
|
@property({ type: Number })
|
|
private totalPages: number = 1;
|
|
|
|
@property({ type: Number })
|
|
private currentZoom: number = 1;
|
|
|
|
@property({ type: Boolean })
|
|
private loading: boolean = false;
|
|
|
|
@property({ type: String })
|
|
private documentId: string = '';
|
|
|
|
@property({ type: Array })
|
|
private thumbnailData: Array<{page: number, rendered: boolean}> = [];
|
|
|
|
@property({ type: Array })
|
|
private pageData: Array<{page: number, rendered: boolean, rendering: boolean}> = [];
|
|
|
|
private pdfDocument: any;
|
|
private renderState: RenderState = 'idle';
|
|
private renderAbortController: AbortController | null = null;
|
|
private pageRendering: boolean = false;
|
|
private pageNumPending: number | null = null;
|
|
private currentRenderTask: any = null;
|
|
private currentRenderPromise: Promise<void> | null = null;
|
|
private thumbnailRenderTasks: any[] = [];
|
|
private pageRenderTasks: Map<number, any> = new Map();
|
|
private canvas: HTMLCanvasElement | undefined;
|
|
private ctx: CanvasRenderingContext2D | undefined;
|
|
private viewerMain: HTMLElement | null = null;
|
|
private resizeObserver?: ResizeObserver;
|
|
private intersectionObserver?: IntersectionObserver;
|
|
private scrollThrottleTimeout?: number;
|
|
private viewportDimensions = { width: 0, height: 0 };
|
|
private viewportMode: 'auto' | 'page-fit' | 'page-width' | 'custom' = 'auto';
|
|
private readonly MANUAL_MIN_ZOOM = 0.5;
|
|
private readonly MANUAL_MAX_ZOOM = 3;
|
|
private readonly ABSOLUTE_MIN_ZOOM = 0.1;
|
|
private readonly ABSOLUTE_MAX_ZOOM = 4;
|
|
private readonly PAGE_GAP = 20;
|
|
private readonly RENDER_BUFFER = 3;
|
|
|
|
constructor() {
|
|
super();
|
|
}
|
|
|
|
public render(): TemplateResult {
|
|
return html`
|
|
<div class="pdf-viewer ${this.showSidebar ? 'with-sidebar' : ''}">
|
|
${this.showToolbar ? html`
|
|
<div class="toolbar">
|
|
<div class="toolbar-group">
|
|
<button
|
|
class="toolbar-button"
|
|
@click=${this.previousPage}
|
|
?disabled=${this.currentPage <= 1}
|
|
>
|
|
<dees-icon icon="lucide:ChevronLeft"></dees-icon>
|
|
</button>
|
|
<div class="page-info">
|
|
<input
|
|
type="number"
|
|
min="1"
|
|
max="${this.totalPages}"
|
|
.value=${String(this.currentPage)}
|
|
@change=${this.handlePageInput}
|
|
class="page-input"
|
|
/>
|
|
<span class="page-separator">/</span>
|
|
<span class="page-total">${this.totalPages}</span>
|
|
</div>
|
|
<button
|
|
class="toolbar-button"
|
|
@click=${this.nextPage}
|
|
?disabled=${this.currentPage >= this.totalPages}
|
|
>
|
|
<dees-icon icon="lucide:ChevronRight"></dees-icon>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="toolbar-group">
|
|
<button
|
|
class="toolbar-button"
|
|
@click=${this.zoomOut}
|
|
?disabled=${!this.canZoomOut}
|
|
>
|
|
<dees-icon icon="lucide:ZoomOut"></dees-icon>
|
|
</button>
|
|
<button
|
|
class="toolbar-button"
|
|
@click=${this.resetZoom}
|
|
>
|
|
<span class="zoom-level">${Math.round(this.currentZoom * 100)}%</span>
|
|
</button>
|
|
<button
|
|
class="toolbar-button"
|
|
@click=${this.zoomIn}
|
|
?disabled=${!this.canZoomIn}
|
|
>
|
|
<dees-icon icon="lucide:ZoomIn"></dees-icon>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="toolbar-group">
|
|
<button
|
|
class="toolbar-button"
|
|
@click=${this.fitToPage}
|
|
title="Fit to page"
|
|
>
|
|
<dees-icon icon="lucide:Maximize"></dees-icon>
|
|
</button>
|
|
<button
|
|
class="toolbar-button"
|
|
@click=${this.fitToWidth}
|
|
title="Fit to width"
|
|
>
|
|
<dees-icon icon="lucide:ArrowLeftRight"></dees-icon>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="toolbar-group toolbar-group--end">
|
|
<button
|
|
class="toolbar-button"
|
|
@click=${() => this.showSidebar = !this.showSidebar}
|
|
title="${this.showSidebar ? 'Hide thumbnails' : 'Show thumbnails'}"
|
|
>
|
|
<dees-icon icon="${this.showSidebar ? 'lucide:SidebarClose' : 'lucide:Sidebar'}"></dees-icon>
|
|
</button>
|
|
<button
|
|
class="toolbar-button"
|
|
@click=${this.downloadPdf}
|
|
title="Download"
|
|
>
|
|
<dees-icon icon="lucide:Download"></dees-icon>
|
|
</button>
|
|
<button
|
|
class="toolbar-button"
|
|
@click=${this.printPdf}
|
|
title="Print"
|
|
>
|
|
<dees-icon icon="lucide:Printer"></dees-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
` : ''}
|
|
|
|
<div class="viewer-container">
|
|
${this.showSidebar ? html`
|
|
<div class="sidebar">
|
|
<div class="sidebar-header">
|
|
<span>Pages</span>
|
|
<button
|
|
class="sidebar-close"
|
|
@click=${() => this.showSidebar = false}
|
|
>
|
|
<dees-icon icon="lucide:X"></dees-icon>
|
|
</button>
|
|
</div>
|
|
<div class="sidebar-content">
|
|
${keyed(this.documentId, html`
|
|
${repeat(
|
|
this.thumbnailData,
|
|
(item) => item.page,
|
|
(item) => html`
|
|
<div
|
|
class="thumbnail ${this.currentPage === item.page ? 'active' : ''}"
|
|
data-page="${item.page}"
|
|
@click=${this.handleThumbnailClick}
|
|
>
|
|
<canvas class="thumbnail-canvas" data-page="${item.page}"></canvas>
|
|
<span class="thumbnail-number">${item.page}</span>
|
|
</div>
|
|
`
|
|
)}
|
|
`)}
|
|
</div>
|
|
</div>
|
|
` : ''}
|
|
|
|
<div class="viewer-main" @scroll=${this.handleScroll}>
|
|
${this.loading ? html`
|
|
<div class="loading-container">
|
|
<div class="loading-spinner"></div>
|
|
<div class="loading-text">Loading PDF...</div>
|
|
</div>
|
|
` : html`
|
|
<div class="pages-container">
|
|
${repeat(
|
|
this.pageData,
|
|
(item) => item.page,
|
|
(item) => html`
|
|
<div class="page-wrapper" data-page="${item.page}">
|
|
<div class="canvas-container">
|
|
<canvas class="page-canvas" data-page="${item.page}"></canvas>
|
|
</div>
|
|
</div>
|
|
`
|
|
)}
|
|
</div>
|
|
`}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
public async connectedCallback() {
|
|
await super.connectedCallback();
|
|
await this.updateComplete;
|
|
this.ensureViewerRefs();
|
|
|
|
// Generate a unique document ID for this connection
|
|
if (this.pdfUrl) {
|
|
this.documentId = `${this.pdfUrl}-${Date.now()}-${Math.random()}`;
|
|
await this.loadPdf();
|
|
}
|
|
}
|
|
|
|
public async disconnectedCallback() {
|
|
await super.disconnectedCallback();
|
|
this.resizeObserver?.disconnect();
|
|
this.resizeObserver = undefined;
|
|
this.intersectionObserver?.disconnect();
|
|
this.intersectionObserver = undefined;
|
|
|
|
// Clear scroll timeout
|
|
if (this.scrollThrottleTimeout) {
|
|
clearTimeout(this.scrollThrottleTimeout);
|
|
this.scrollThrottleTimeout = undefined;
|
|
}
|
|
|
|
// Mark as disposed and clean up
|
|
this.renderState = 'disposed';
|
|
await this.cleanupDocument();
|
|
|
|
// Clear all references
|
|
this.canvas = undefined;
|
|
this.ctx = undefined;
|
|
}
|
|
|
|
public async updated(changedProperties: Map<PropertyKey, unknown>) {
|
|
super.updated(changedProperties);
|
|
|
|
if (changedProperties.has('pdfUrl') && this.pdfUrl) {
|
|
const previousUrl = changedProperties.get('pdfUrl') as string | undefined;
|
|
if (previousUrl) {
|
|
PdfManager.releaseDocument(previousUrl);
|
|
}
|
|
// Generate new document ID for new URL
|
|
this.documentId = `${this.pdfUrl}-${Date.now()}-${Math.random()}`;
|
|
await this.loadPdf();
|
|
}
|
|
|
|
// Re-render thumbnails when sidebar becomes visible and document is loaded
|
|
if (changedProperties.has('showSidebar') && this.showSidebar && this.pdfDocument) {
|
|
// Use requestAnimationFrame to ensure DOM is ready
|
|
await new Promise(resolve => requestAnimationFrame(resolve));
|
|
// Force re-render of thumbnails by resetting their rendered state
|
|
this.thumbnailData.forEach(thumb => thumb.rendered = false);
|
|
await this.renderThumbnails();
|
|
// Re-setup intersection observer for lazy loading of pages
|
|
this.setupIntersectionObserver();
|
|
}
|
|
}
|
|
|
|
private async loadPdf() {
|
|
this.loading = true;
|
|
this.renderState = 'loading';
|
|
|
|
try {
|
|
await this.cleanupDocument();
|
|
|
|
// Create new abort controller for this load operation
|
|
this.renderAbortController = new AbortController();
|
|
const signal = this.renderAbortController.signal;
|
|
|
|
this.pdfDocument = await PdfManager.loadDocument(this.pdfUrl);
|
|
if (signal.aborted) return;
|
|
|
|
this.totalPages = this.pdfDocument.numPages;
|
|
this.currentPage = this.initialPage;
|
|
this.resolveInitialViewportMode();
|
|
|
|
// Initialize thumbnail and page data arrays
|
|
this.thumbnailData = Array.from({length: this.totalPages}, (_, i) => ({
|
|
page: i + 1,
|
|
rendered: false
|
|
}));
|
|
|
|
this.pageData = Array.from({length: this.totalPages}, (_, i) => ({
|
|
page: i + 1,
|
|
rendered: false,
|
|
rendering: false
|
|
}));
|
|
|
|
// Set loading to false to render the pages
|
|
this.loading = false;
|
|
await this.updateComplete;
|
|
this.ensureViewerRefs();
|
|
this.setupIntersectionObserver();
|
|
|
|
// Wait for next frame to ensure DOM is ready
|
|
await new Promise(resolve => requestAnimationFrame(resolve));
|
|
if (signal.aborted) return;
|
|
|
|
this.renderState = 'rendering-main';
|
|
|
|
// Render initial visible pages
|
|
await this.renderVisiblePages();
|
|
if (signal.aborted) return;
|
|
|
|
// Scroll to initial page
|
|
if (this.initialPage > 1) {
|
|
await this.scrollToPage(this.initialPage, false);
|
|
}
|
|
|
|
if (this.showSidebar) {
|
|
// Ensure sidebar is in DOM after loading = false
|
|
await this.updateComplete;
|
|
// Wait for next frame to ensure DOM is fully ready
|
|
await new Promise(resolve => requestAnimationFrame(resolve));
|
|
if (signal.aborted) return;
|
|
|
|
await this.renderThumbnails();
|
|
if (signal.aborted) return;
|
|
}
|
|
|
|
this.renderState = 'rendered';
|
|
} catch (error) {
|
|
console.error('Error loading PDF:', error);
|
|
this.loading = false;
|
|
this.renderState = 'error';
|
|
}
|
|
}
|
|
|
|
private setupIntersectionObserver() {
|
|
if (this.intersectionObserver) {
|
|
this.intersectionObserver.disconnect();
|
|
}
|
|
|
|
this.intersectionObserver = new IntersectionObserver(
|
|
(entries) => {
|
|
for (const entry of entries) {
|
|
const pageWrapper = entry.target as HTMLElement;
|
|
const pageNum = parseInt(pageWrapper.dataset.page || '1');
|
|
|
|
if (entry.isIntersecting) {
|
|
this.renderPageIfNeeded(pageNum);
|
|
}
|
|
}
|
|
},
|
|
{
|
|
root: this.viewerMain,
|
|
rootMargin: `${this.RENDER_BUFFER * 100}px 0px`,
|
|
threshold: 0.01
|
|
}
|
|
);
|
|
|
|
// Observe all page wrappers
|
|
const pageWrappers = this.shadowRoot?.querySelectorAll('.page-wrapper');
|
|
if (pageWrappers) {
|
|
pageWrappers.forEach(wrapper => {
|
|
this.intersectionObserver?.observe(wrapper);
|
|
});
|
|
}
|
|
}
|
|
|
|
private async renderVisiblePages() {
|
|
if (!this.viewerMain) return;
|
|
|
|
// Find visible pages based on scroll position
|
|
const clientHeight = this.viewerMain.clientHeight;
|
|
|
|
for (const pageInfo of this.pageData) {
|
|
const pageWrapper = this.shadowRoot?.querySelector(`.page-wrapper[data-page="${pageInfo.page}"]`) as HTMLElement;
|
|
if (!pageWrapper) continue;
|
|
|
|
const rect = pageWrapper.getBoundingClientRect();
|
|
const viewerRect = this.viewerMain.getBoundingClientRect();
|
|
const relativeTop = rect.top - viewerRect.top;
|
|
const relativeBottom = relativeTop + rect.height;
|
|
|
|
// Check if page is visible or within buffer zone
|
|
const buffer = this.RENDER_BUFFER * clientHeight;
|
|
if (relativeBottom >= -buffer && relativeTop <= clientHeight + buffer) {
|
|
await this.renderPageIfNeeded(pageInfo.page);
|
|
}
|
|
}
|
|
}
|
|
|
|
private async renderPageIfNeeded(pageNum: number) {
|
|
const pageInfo = this.pageData.find(p => p.page === pageNum);
|
|
if (!pageInfo || pageInfo.rendered || pageInfo.rendering) return;
|
|
|
|
pageInfo.rendering = true;
|
|
|
|
try {
|
|
const canvas = this.shadowRoot?.querySelector(`.page-canvas[data-page="${pageNum}"]`) as HTMLCanvasElement;
|
|
if (!canvas) {
|
|
pageInfo.rendering = false;
|
|
return;
|
|
}
|
|
|
|
const page = await this.pdfDocument.getPage(pageNum);
|
|
const viewport = this.computeViewport(page);
|
|
|
|
// Set canvas dimensions
|
|
canvas.height = viewport.height;
|
|
canvas.width = viewport.width;
|
|
canvas.style.width = `${viewport.width}px`;
|
|
canvas.style.height = `${viewport.height}px`;
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
if (!ctx) {
|
|
page.cleanup?.();
|
|
pageInfo.rendering = false;
|
|
return;
|
|
}
|
|
|
|
const renderContext = {
|
|
canvasContext: ctx,
|
|
viewport: viewport,
|
|
};
|
|
|
|
const renderTask = page.render(renderContext);
|
|
this.pageRenderTasks.set(pageNum, renderTask);
|
|
|
|
await renderTask.promise;
|
|
|
|
page.cleanup?.();
|
|
pageInfo.rendered = true;
|
|
pageInfo.rendering = false;
|
|
this.pageRenderTasks.delete(pageNum);
|
|
|
|
// Update page data to reflect rendered state
|
|
this.requestUpdate('pageData');
|
|
} catch (error: any) {
|
|
if (error?.name !== 'RenderingCancelledException') {
|
|
console.error(`Error rendering page ${pageNum}:`, error);
|
|
}
|
|
pageInfo.rendering = false;
|
|
this.pageRenderTasks.delete(pageNum);
|
|
}
|
|
}
|
|
|
|
private handleScroll = () => {
|
|
// Throttle scroll events
|
|
if (this.scrollThrottleTimeout) {
|
|
clearTimeout(this.scrollThrottleTimeout);
|
|
}
|
|
|
|
this.scrollThrottleTimeout = window.setTimeout(() => {
|
|
this.updateCurrentPage();
|
|
this.renderVisiblePages();
|
|
}, 50);
|
|
}
|
|
|
|
private updateCurrentPage() {
|
|
if (!this.viewerMain) return;
|
|
|
|
const scrollTop = this.viewerMain.scrollTop;
|
|
const clientHeight = this.viewerMain.clientHeight;
|
|
const centerY = scrollTop + clientHeight / 2;
|
|
|
|
// Find which page is at the center of the viewport
|
|
for (let i = 0; i < this.pageData.length; i++) {
|
|
const pageWrapper = this.shadowRoot?.querySelector(`.page-wrapper[data-page="${i + 1}"]`) as HTMLElement;
|
|
if (!pageWrapper) continue;
|
|
|
|
const rect = pageWrapper.getBoundingClientRect();
|
|
const viewerRect = this.viewerMain.getBoundingClientRect();
|
|
const relativeTop = rect.top - viewerRect.top + scrollTop;
|
|
const relativeBottom = relativeTop + rect.height;
|
|
|
|
if (centerY >= relativeTop && centerY <= relativeBottom) {
|
|
if (this.currentPage !== i + 1) {
|
|
this.currentPage = i + 1;
|
|
// Scroll the thumbnail into view if sidebar is visible
|
|
if (this.showSidebar) {
|
|
this.scrollThumbnailIntoView(i + 1);
|
|
}
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
private scrollThumbnailIntoView(pageNum: number) {
|
|
const thumbnail = this.shadowRoot?.querySelector(`.thumbnail[data-page="${pageNum}"]`) as HTMLElement;
|
|
const sidebarContent = this.shadowRoot?.querySelector('.sidebar-content') as HTMLElement;
|
|
|
|
if (thumbnail && sidebarContent) {
|
|
// Get the thumbnail's position relative to the sidebar
|
|
const thumbnailRect = thumbnail.getBoundingClientRect();
|
|
const sidebarRect = sidebarContent.getBoundingClientRect();
|
|
|
|
// Check if thumbnail is outside the visible area
|
|
const isAbove = thumbnailRect.top < sidebarRect.top;
|
|
const isBelow = thumbnailRect.bottom > sidebarRect.bottom;
|
|
|
|
if (isAbove || isBelow) {
|
|
// Calculate the scroll position to center the thumbnail
|
|
const thumbnailOffset = thumbnail.offsetTop;
|
|
const thumbnailHeight = thumbnail.offsetHeight;
|
|
const sidebarHeight = sidebarContent.clientHeight;
|
|
const targetScrollTop = thumbnailOffset - (sidebarHeight / 2) + (thumbnailHeight / 2);
|
|
|
|
// Scroll the sidebar to center the thumbnail
|
|
sidebarContent.scrollTo({
|
|
top: Math.max(0, targetScrollTop),
|
|
behavior: 'smooth'
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
private async scrollToPage(pageNum: number, smooth: boolean = true) {
|
|
await this.updateComplete;
|
|
const pageWrapper = this.shadowRoot?.querySelector(`.page-wrapper[data-page="${pageNum}"]`) as HTMLElement;
|
|
if (pageWrapper && this.viewerMain) {
|
|
// Calculate the offset of the page wrapper relative to the viewer
|
|
const pageRect = pageWrapper.getBoundingClientRect();
|
|
const viewerRect = this.viewerMain.getBoundingClientRect();
|
|
const currentScrollTop = this.viewerMain.scrollTop;
|
|
|
|
// Calculate the target scroll position
|
|
const targetScrollTop = currentScrollTop + (pageRect.top - viewerRect.top) - this.viewerMain.clientTop;
|
|
|
|
// Scroll to the calculated position
|
|
if (smooth) {
|
|
this.viewerMain.scrollTo({
|
|
top: targetScrollTop,
|
|
behavior: 'smooth'
|
|
});
|
|
} else {
|
|
this.viewerMain.scrollTop = targetScrollTop;
|
|
}
|
|
|
|
// Update current page
|
|
this.currentPage = pageNum;
|
|
|
|
// Ensure the page is rendered
|
|
await this.renderPageIfNeeded(pageNum);
|
|
}
|
|
}
|
|
|
|
private async renderThumbnails() {
|
|
// Check if document is loaded
|
|
if (!this.pdfDocument) {
|
|
return;
|
|
}
|
|
|
|
// Check if already rendered
|
|
if (this.thumbnailData.length > 0 && this.thumbnailData.every(t => t.rendered)) {
|
|
return;
|
|
}
|
|
|
|
// Check abort signal
|
|
if (this.renderAbortController?.signal.aborted) {
|
|
return;
|
|
}
|
|
|
|
const signal = this.renderAbortController?.signal;
|
|
this.renderState = 'rendering-thumbs';
|
|
|
|
// Cancel any existing thumbnail render tasks
|
|
for (const task of this.thumbnailRenderTasks) {
|
|
try {
|
|
task.cancel();
|
|
} catch (error) {
|
|
// Ignore cancellation errors
|
|
}
|
|
}
|
|
this.thumbnailRenderTasks = [];
|
|
|
|
try {
|
|
await this.updateComplete;
|
|
const thumbnails = this.shadowRoot?.querySelectorAll('.thumbnail') as NodeListOf<HTMLElement>;
|
|
const thumbnailCanvases = this.shadowRoot?.querySelectorAll('.thumbnail-canvas') as NodeListOf<HTMLCanvasElement>;
|
|
const sidebarContent = this.shadowRoot?.querySelector('.sidebar-content') as HTMLElement;
|
|
|
|
// Get the actual available width for thumbnails (sidebar width minus padding)
|
|
const sidebarStyles = window.getComputedStyle(sidebarContent);
|
|
const sidebarPadding = parseFloat(sidebarStyles.paddingLeft) + parseFloat(sidebarStyles.paddingRight);
|
|
const maxThumbnailWidth = 200 - sidebarPadding - 4; // Account for border
|
|
|
|
// Clear all canvases first to prevent conflicts
|
|
for (const canvas of Array.from(thumbnailCanvases)) {
|
|
const context = canvas.getContext('2d');
|
|
if (context) {
|
|
context.clearRect(0, 0, canvas.width, canvas.height);
|
|
}
|
|
}
|
|
|
|
for (let i = 0; i < thumbnailCanvases.length; i++) {
|
|
if (signal?.aborted) return;
|
|
|
|
const canvas = thumbnailCanvases[i];
|
|
const thumbnail = thumbnails[i];
|
|
const pageNum = parseInt(canvas.dataset.page || '1');
|
|
const page = await this.pdfDocument.getPage(pageNum);
|
|
|
|
// Get the page's natural dimensions
|
|
const initialViewport = page.getViewport({ scale: 1 });
|
|
|
|
// Calculate scale to fit within the max thumbnail width
|
|
const scale = maxThumbnailWidth / initialViewport.width;
|
|
const viewport = page.getViewport({ scale });
|
|
|
|
// Set canvas dimensions to actual render size
|
|
canvas.width = viewport.width;
|
|
canvas.height = viewport.height;
|
|
|
|
// Set the display size via style to ensure proper display
|
|
canvas.style.width = `${viewport.width}px`;
|
|
canvas.style.height = `${viewport.height}px`;
|
|
|
|
// Set the actual thumbnail container height
|
|
thumbnail.style.height = `${viewport.height}px`;
|
|
thumbnail.style.minHeight = `${viewport.height}px`;
|
|
|
|
const context = canvas.getContext('2d');
|
|
if (!context) {
|
|
page.cleanup?.();
|
|
continue;
|
|
}
|
|
|
|
const renderContext = {
|
|
canvasContext: context,
|
|
viewport: viewport,
|
|
};
|
|
|
|
const renderTask = page.render(renderContext);
|
|
this.thumbnailRenderTasks.push(renderTask);
|
|
await renderTask.promise;
|
|
page.cleanup?.();
|
|
|
|
// Mark this thumbnail as rendered
|
|
const thumbData = this.thumbnailData.find(t => t.page === pageNum);
|
|
if (thumbData) {
|
|
thumbData.rendered = true;
|
|
}
|
|
}
|
|
|
|
// Trigger update to reflect rendered state
|
|
this.requestUpdate('thumbnailData');
|
|
} catch (error: any) {
|
|
// Only log non-cancellation errors
|
|
if (error?.name !== 'RenderingCancelledException') {
|
|
console.error('Error rendering thumbnails:', error);
|
|
}
|
|
} finally {
|
|
this.thumbnailRenderTasks = [];
|
|
}
|
|
}
|
|
|
|
private previousPage() {
|
|
if (this.currentPage > 1) {
|
|
this.scrollToPage(this.currentPage - 1);
|
|
}
|
|
}
|
|
|
|
private nextPage() {
|
|
if (this.currentPage < this.totalPages) {
|
|
this.scrollToPage(this.currentPage + 1);
|
|
}
|
|
}
|
|
|
|
|
|
private handleThumbnailClick(e: Event) {
|
|
const target = e.currentTarget as HTMLElement;
|
|
const pageNum = parseInt(target.dataset.page || '1');
|
|
this.scrollToPage(pageNum);
|
|
}
|
|
|
|
private handlePageInput(e: Event) {
|
|
const input = e.target as HTMLInputElement;
|
|
const pageNum = parseInt(input.value);
|
|
this.scrollToPage(pageNum);
|
|
}
|
|
|
|
private zoomIn() {
|
|
const nextZoom = Math.min(this.MANUAL_MAX_ZOOM, this.currentZoom * 1.2);
|
|
this.viewportMode = 'custom';
|
|
if (nextZoom !== this.currentZoom) {
|
|
this.currentZoom = nextZoom;
|
|
this.reRenderAllPages();
|
|
}
|
|
}
|
|
|
|
private zoomOut() {
|
|
const nextZoom = Math.max(this.MANUAL_MIN_ZOOM, this.currentZoom / 1.2);
|
|
this.viewportMode = 'custom';
|
|
if (nextZoom !== this.currentZoom) {
|
|
this.currentZoom = nextZoom;
|
|
this.reRenderAllPages();
|
|
}
|
|
}
|
|
|
|
private resetZoom() {
|
|
this.viewportMode = 'custom';
|
|
this.currentZoom = 1;
|
|
this.reRenderAllPages();
|
|
}
|
|
|
|
private fitToPage() {
|
|
this.viewportMode = 'page-fit';
|
|
this.reRenderAllPages();
|
|
}
|
|
|
|
private fitToWidth() {
|
|
this.viewportMode = 'page-width';
|
|
this.reRenderAllPages();
|
|
}
|
|
|
|
private reRenderAllPages() {
|
|
// Clear all rendered pages to force re-render with new zoom
|
|
this.pageData.forEach(page => {
|
|
page.rendered = false;
|
|
page.rendering = false;
|
|
});
|
|
|
|
// Cancel any ongoing render tasks
|
|
this.pageRenderTasks.forEach(task => {
|
|
try {
|
|
task.cancel();
|
|
} catch (error) {
|
|
// Ignore cancellation errors
|
|
}
|
|
});
|
|
this.pageRenderTasks.clear();
|
|
|
|
// Request update to re-render pages
|
|
this.requestUpdate();
|
|
|
|
// Render visible pages after update
|
|
this.updateComplete.then(() => {
|
|
this.renderVisiblePages();
|
|
});
|
|
}
|
|
|
|
private downloadPdf() {
|
|
const link = document.createElement('a');
|
|
link.href = this.pdfUrl;
|
|
link.download = this.pdfUrl.split('/').pop() || 'document.pdf';
|
|
link.click();
|
|
}
|
|
|
|
private printPdf() {
|
|
window.open(this.pdfUrl, '_blank')?.print();
|
|
}
|
|
|
|
/**
|
|
* Provide context menu items for right-click functionality
|
|
*/
|
|
public getContextMenuItems() {
|
|
return [
|
|
{
|
|
name: 'Open PDF in New Tab',
|
|
iconName: 'lucide:ExternalLink',
|
|
action: async () => {
|
|
window.open(this.pdfUrl, '_blank');
|
|
}
|
|
},
|
|
{ divider: true },
|
|
{
|
|
name: 'Copy PDF URL',
|
|
iconName: 'lucide:Copy',
|
|
action: async () => {
|
|
await navigator.clipboard.writeText(this.pdfUrl);
|
|
}
|
|
},
|
|
{
|
|
name: 'Download PDF',
|
|
iconName: 'lucide:Download',
|
|
action: async () => {
|
|
this.downloadPdf();
|
|
}
|
|
},
|
|
{
|
|
name: 'Print PDF',
|
|
iconName: 'lucide:Printer',
|
|
action: async () => {
|
|
this.printPdf();
|
|
}
|
|
}
|
|
];
|
|
}
|
|
|
|
private get canZoomIn(): boolean {
|
|
return this.viewportMode !== 'custom' || this.currentZoom < this.MANUAL_MAX_ZOOM;
|
|
}
|
|
|
|
private get canZoomOut(): boolean {
|
|
return this.viewportMode !== 'custom' || this.currentZoom > this.MANUAL_MIN_ZOOM;
|
|
}
|
|
|
|
private ensureViewerRefs() {
|
|
if (!this.viewerMain) {
|
|
this.viewerMain = this.shadowRoot?.querySelector('.viewer-main') as HTMLElement;
|
|
}
|
|
if (this.viewerMain && !this.resizeObserver) {
|
|
this.resizeObserver = new ResizeObserver(() => {
|
|
this.measureViewportDimensions();
|
|
if (this.pdfDocument) {
|
|
// Re-render all pages when viewport size changes
|
|
this.reRenderAllPages();
|
|
}
|
|
});
|
|
this.resizeObserver.observe(this.viewerMain);
|
|
this.measureViewportDimensions();
|
|
|
|
// Prevent scroll propagation to parent when scrolling inside viewer
|
|
this.viewerMain.addEventListener('wheel', (e) => {
|
|
const element = e.currentTarget as HTMLElement;
|
|
const scrollTop = element.scrollTop;
|
|
const scrollHeight = element.scrollHeight;
|
|
const clientHeight = element.clientHeight;
|
|
const deltaY = e.deltaY;
|
|
|
|
// Check if we're at the boundaries
|
|
const isAtTop = scrollTop === 0;
|
|
const isAtBottom = Math.abs(scrollTop + clientHeight - scrollHeight) < 1;
|
|
|
|
// Prevent propagation if we're scrolling within bounds
|
|
if ((deltaY < 0 && !isAtTop) || (deltaY > 0 && !isAtBottom)) {
|
|
e.stopPropagation();
|
|
} else if ((deltaY < 0 && isAtTop) || (deltaY > 0 && isAtBottom)) {
|
|
// Prevent default and propagation when at boundaries
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}
|
|
}, { passive: false });
|
|
}
|
|
}
|
|
|
|
private measureViewportDimensions() {
|
|
if (!this.viewerMain) {
|
|
this.viewportDimensions = { width: 0, height: 0 };
|
|
return;
|
|
}
|
|
|
|
const styles = getComputedStyle(this.viewerMain);
|
|
const paddingX = parseFloat(styles.paddingLeft || '0') + parseFloat(styles.paddingRight || '0');
|
|
const paddingY = parseFloat(styles.paddingTop || '0') + parseFloat(styles.paddingBottom || '0');
|
|
const width = Math.max(this.viewerMain.clientWidth - paddingX, 0);
|
|
const height = Math.max(this.viewerMain.clientHeight - paddingY, 0);
|
|
this.viewportDimensions = { width, height };
|
|
}
|
|
|
|
private resolveInitialViewportMode() {
|
|
if (typeof this.initialZoom === 'number') {
|
|
this.viewportMode = 'custom';
|
|
this.currentZoom = this.normalizeZoom(this.initialZoom, true);
|
|
} else if (this.initialZoom === 'page-width') {
|
|
this.viewportMode = 'page-width';
|
|
} else if (this.initialZoom === 'page-fit' || this.initialZoom === 'auto') {
|
|
this.viewportMode = 'page-fit';
|
|
} else {
|
|
this.viewportMode = 'auto';
|
|
}
|
|
|
|
if (this.viewportMode !== 'custom') {
|
|
this.currentZoom = 1;
|
|
}
|
|
}
|
|
|
|
private computeViewport(page: any) {
|
|
this.measureViewportDimensions();
|
|
const baseViewport = page.getViewport({ scale: 1 });
|
|
let scale: number;
|
|
|
|
switch (this.viewportMode) {
|
|
case 'page-width': {
|
|
const availableWidth = this.viewportDimensions.width || baseViewport.width;
|
|
scale = availableWidth / baseViewport.width;
|
|
break;
|
|
}
|
|
case 'page-fit':
|
|
case 'auto': {
|
|
const availableWidth = this.viewportDimensions.width || baseViewport.width;
|
|
const availableHeight = this.viewportDimensions.height || baseViewport.height;
|
|
const widthScale = availableWidth / baseViewport.width;
|
|
const heightScale = availableHeight / baseViewport.height;
|
|
scale = Math.min(widthScale, heightScale);
|
|
break;
|
|
}
|
|
case 'custom':
|
|
default: {
|
|
scale = this.normalizeZoom(this.currentZoom || 1, false);
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (!Number.isFinite(scale) || scale <= 0) {
|
|
scale = 1;
|
|
}
|
|
|
|
const clampedScale = this.viewportMode === 'custom'
|
|
? this.normalizeZoom(scale, true)
|
|
: this.normalizeZoom(scale, false);
|
|
|
|
if (this.viewportMode !== 'custom') {
|
|
this.currentZoom = clampedScale;
|
|
}
|
|
|
|
return page.getViewport({ scale: clampedScale });
|
|
}
|
|
|
|
private normalizeZoom(value: number, clampToManualRange: boolean) {
|
|
const min = clampToManualRange ? this.MANUAL_MIN_ZOOM : this.ABSOLUTE_MIN_ZOOM;
|
|
const max = clampToManualRange ? this.MANUAL_MAX_ZOOM : this.ABSOLUTE_MAX_ZOOM;
|
|
return Math.min(Math.max(value, min), max);
|
|
}
|
|
|
|
private async cleanupDocument() {
|
|
// Abort any ongoing render operations
|
|
if (this.renderAbortController) {
|
|
this.renderAbortController.abort();
|
|
this.renderAbortController = null;
|
|
}
|
|
|
|
// Wait for any existing render to complete
|
|
if (this.currentRenderPromise) {
|
|
try {
|
|
await this.currentRenderPromise;
|
|
} catch (error) {
|
|
// Ignore errors
|
|
}
|
|
this.currentRenderPromise = null;
|
|
}
|
|
|
|
// Clear the render task reference
|
|
this.currentRenderTask = null;
|
|
|
|
// Cancel any page render tasks
|
|
this.pageRenderTasks.forEach(task => {
|
|
try {
|
|
task.cancel();
|
|
} catch (error) {
|
|
// Ignore cancellation errors
|
|
}
|
|
});
|
|
this.pageRenderTasks.clear();
|
|
|
|
// Cancel any thumbnail render tasks
|
|
for (const task of (this.thumbnailRenderTasks || [])) {
|
|
try {
|
|
task.cancel();
|
|
} catch (error) {
|
|
// Ignore cancellation errors
|
|
}
|
|
}
|
|
this.thumbnailRenderTasks = [];
|
|
|
|
// Reset all state flags
|
|
this.renderState = 'idle';
|
|
this.pageRendering = false;
|
|
this.pageNumPending = null;
|
|
this.thumbnailData = [];
|
|
this.pageData = [];
|
|
this.documentId = '';
|
|
|
|
// Clear canvas content
|
|
if (this.canvas && this.ctx) {
|
|
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
}
|
|
|
|
// Destroy the document to free memory
|
|
if (this.pdfDocument) {
|
|
try {
|
|
this.pdfDocument.destroy();
|
|
} catch (error) {
|
|
console.error('Error destroying PDF document:', error);
|
|
}
|
|
}
|
|
|
|
// Finally null the document reference
|
|
this.pdfDocument = null;
|
|
|
|
// Request update to reflect state changes
|
|
this.requestUpdate();
|
|
}
|
|
}
|