feat: Update PDF components to improve rendering performance and manage document lifecycle without caching
This commit is contained in:
@@ -37,6 +37,7 @@
|
||||
"apexcharts": "^5.3.5",
|
||||
"highlight.js": "11.11.1",
|
||||
"ibantools": "^4.5.1",
|
||||
"lit": "^3.3.1",
|
||||
"lucide": "^0.544.0",
|
||||
"monaco-editor": "0.52.2",
|
||||
"pdfjs-dist": "^4.10.38",
|
||||
|
||||
39
pnpm-lock.yaml
generated
39
pnpm-lock.yaml
generated
@@ -71,6 +71,9 @@ importers:
|
||||
ibantools:
|
||||
specifier: ^4.5.1
|
||||
version: 4.5.1
|
||||
lit:
|
||||
specifier: ^3.3.1
|
||||
version: 3.3.1
|
||||
lucide:
|
||||
specifier: ^0.544.0
|
||||
version: 0.544.0
|
||||
@@ -853,15 +856,9 @@ packages:
|
||||
'@leichtgewicht/ip-codec@2.0.5':
|
||||
resolution: {integrity: sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==}
|
||||
|
||||
'@lit-labs/ssr-dom-shim@1.3.0':
|
||||
resolution: {integrity: sha512-nQIWonJ6eFAvUUrSlwyHDm/aE8PBDu5kRpL0vHMg6K8fK3Diq1xdPjTnsJSwxABhaZ+5eBi1btQB5ShUTKo4nQ==}
|
||||
|
||||
'@lit-labs/ssr-dom-shim@1.4.0':
|
||||
resolution: {integrity: sha512-ficsEARKnmmW5njugNYKipTm4SFnbik7CXtoencDZzmzo/dQ+2Q0bgkzJuoJP20Aj0F+izzJjOqsnkd6F/o1bw==}
|
||||
|
||||
'@lit/reactive-element@2.1.0':
|
||||
resolution: {integrity: sha512-L2qyoZSQClcBmq0qajBVbhYEcG6iK0XfLn66ifLe/RfC0/ihpc+pl0Wdn8bJ8o+hj38cG0fGXRgSS20MuXn7qA==}
|
||||
|
||||
'@lit/reactive-element@2.1.1':
|
||||
resolution: {integrity: sha512-N+dm5PAYdQ8e6UlywyyrgI2t++wFGXfHx+dSJ1oBrg6FAxUj40jId++EaRm80MKX5JnlH1sBsyZ5h0bcZKemCg==}
|
||||
|
||||
@@ -3850,9 +3847,6 @@ packages:
|
||||
linkifyjs@4.3.1:
|
||||
resolution: {integrity: sha512-DRSlB9DKVW04c4SUdGvKK5FR6be45lTU9M76JnngqPeeGDqPwYc0zdUErtsNVMtxPXgUWV4HbXbnC4sNyBxkYg==}
|
||||
|
||||
lit-element@4.2.0:
|
||||
resolution: {integrity: sha512-MGrXJVAI5x+Bfth/pU9Kst1iWID6GHDLEzFEnyULB/sFiRLgkd8NPK/PeeXxktA3T6EIIaq8U3KcbTU5XFcP2Q==}
|
||||
|
||||
lit-element@4.2.1:
|
||||
resolution: {integrity: sha512-WGAWRGzirAgyphK2urmYOV72tlvnxw7YfyLDgQ+OZnM9vQQBQnumQ7jUJe6unEzwGU3ahFOjuz1iz1jjrpCPuw==}
|
||||
|
||||
@@ -3862,9 +3856,6 @@ packages:
|
||||
lit-html@3.3.1:
|
||||
resolution: {integrity: sha512-S9hbyDu/vs1qNrithiNyeyv64c9yqiW9l+DBgI18fL+MTvOtWoFR0FWiyq1TxaYef5wNlpEmzlXoBlZEO+WjoA==}
|
||||
|
||||
lit@3.3.0:
|
||||
resolution: {integrity: sha512-DGVsqsOIHBww2DqnuZzW7QsuCdahp50ojuDaBPC7jUDRpYoH0z7kHBBYZewRzer75FwtrkmkKk7iOAwSaWdBmw==}
|
||||
|
||||
lit@3.3.1:
|
||||
resolution: {integrity: sha512-Ksr/8L3PTapbdXJCk+EJVB78jDodUMaP54gD24W186zGRARvwrsPfS60wae/SSCTCNZVPd1chXqio1qHQmu4NA==}
|
||||
|
||||
@@ -6466,7 +6457,7 @@ snapshots:
|
||||
'@push.rocks/websetup': 3.0.19
|
||||
'@push.rocks/webstore': 2.0.20
|
||||
lenis: 1.3.4
|
||||
lit: 3.3.0
|
||||
lit: 3.3.1
|
||||
sweet-scroll: 4.0.0
|
||||
transitivePeerDependencies:
|
||||
- '@nuxt/kit'
|
||||
@@ -6866,14 +6857,8 @@ snapshots:
|
||||
|
||||
'@leichtgewicht/ip-codec@2.0.5': {}
|
||||
|
||||
'@lit-labs/ssr-dom-shim@1.3.0': {}
|
||||
|
||||
'@lit-labs/ssr-dom-shim@1.4.0': {}
|
||||
|
||||
'@lit/reactive-element@2.1.0':
|
||||
dependencies:
|
||||
'@lit-labs/ssr-dom-shim': 1.3.0
|
||||
|
||||
'@lit/reactive-element@2.1.1':
|
||||
dependencies:
|
||||
'@lit-labs/ssr-dom-shim': 1.4.0
|
||||
@@ -6994,7 +6979,7 @@ snapshots:
|
||||
'@open-wc/scoped-elements@3.0.5':
|
||||
dependencies:
|
||||
'@open-wc/dedupe-mixin': 1.4.0
|
||||
lit: 3.3.0
|
||||
lit: 3.3.1
|
||||
|
||||
'@open-wc/semantic-dom-diff@0.20.1':
|
||||
dependencies:
|
||||
@@ -7008,7 +6993,7 @@ snapshots:
|
||||
'@open-wc/testing-helpers@3.0.1':
|
||||
dependencies:
|
||||
'@open-wc/scoped-elements': 3.0.5
|
||||
lit: 3.3.0
|
||||
lit: 3.3.1
|
||||
lit-html: 3.3.0
|
||||
|
||||
'@open-wc/testing@4.0.0':
|
||||
@@ -10989,12 +10974,6 @@ snapshots:
|
||||
|
||||
linkifyjs@4.3.1: {}
|
||||
|
||||
lit-element@4.2.0:
|
||||
dependencies:
|
||||
'@lit-labs/ssr-dom-shim': 1.3.0
|
||||
'@lit/reactive-element': 2.1.0
|
||||
lit-html: 3.3.0
|
||||
|
||||
lit-element@4.2.1:
|
||||
dependencies:
|
||||
'@lit-labs/ssr-dom-shim': 1.4.0
|
||||
@@ -11009,12 +10988,6 @@ snapshots:
|
||||
dependencies:
|
||||
'@types/trusted-types': 2.0.7
|
||||
|
||||
lit@3.3.0:
|
||||
dependencies:
|
||||
'@lit/reactive-element': 2.1.0
|
||||
lit-element: 4.2.0
|
||||
lit-html: 3.3.0
|
||||
|
||||
lit@3.3.1:
|
||||
dependencies:
|
||||
'@lit/reactive-element': 2.1.1
|
||||
|
||||
BIN
readme.plan.md
BIN
readme.plan.md
Binary file not shown.
@@ -42,10 +42,16 @@ export class DeesPdfPreview extends DeesElement {
|
||||
@property({ type: Boolean })
|
||||
private error: boolean = false;
|
||||
|
||||
private renderPagesTask: Promise<void> | null = null;
|
||||
private renderPagesQueued: boolean = false;
|
||||
|
||||
private observer: IntersectionObserver;
|
||||
private pdfDocument: any;
|
||||
private canvases: PooledCanvas[] = [];
|
||||
private renderRequestId: number;
|
||||
private resizeObserver?: ResizeObserver;
|
||||
private previewContainer: HTMLElement | null = null;
|
||||
private stackElement: HTMLElement | null = null;
|
||||
private loadedPdfUrl: string | null = null;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
@@ -118,13 +124,21 @@ export class DeesPdfPreview extends DeesElement {
|
||||
}
|
||||
|
||||
public async connectedCallback() {
|
||||
super.connectedCallback();
|
||||
await super.connectedCallback();
|
||||
this.setupIntersectionObserver();
|
||||
await this.updateComplete;
|
||||
this.cacheElements();
|
||||
this.setupResizeObserver();
|
||||
}
|
||||
|
||||
public async disconnectedCallback() {
|
||||
super.disconnectedCallback();
|
||||
await super.disconnectedCallback();
|
||||
this.cleanup();
|
||||
if (this.observer) {
|
||||
this.observer.disconnect();
|
||||
}
|
||||
this.resizeObserver?.disconnect();
|
||||
this.resizeObserver = undefined;
|
||||
}
|
||||
|
||||
private setupIntersectionObserver() {
|
||||
@@ -161,9 +175,11 @@ export class DeesPdfPreview extends DeesElement {
|
||||
try {
|
||||
this.pdfDocument = await PdfManager.loadDocument(this.pdfUrl);
|
||||
this.pageCount = this.pdfDocument.numPages;
|
||||
this.loadedPdfUrl = this.pdfUrl;
|
||||
|
||||
await this.updateComplete;
|
||||
await this.renderPages();
|
||||
this.cacheElements();
|
||||
await this.scheduleRenderPages();
|
||||
|
||||
this.rendered = true;
|
||||
|
||||
@@ -177,17 +193,46 @@ export class DeesPdfPreview extends DeesElement {
|
||||
}
|
||||
}
|
||||
|
||||
private async renderPages() {
|
||||
private scheduleRenderPages(): Promise<void> {
|
||||
if (!this.pdfDocument) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
if (this.renderPagesTask) {
|
||||
this.renderPagesQueued = true;
|
||||
return this.renderPagesTask;
|
||||
}
|
||||
|
||||
this.renderPagesTask = (async () => {
|
||||
try {
|
||||
await this.performRenderPages();
|
||||
} catch (error) {
|
||||
console.error('Failed to render PDF preview pages:', error);
|
||||
}
|
||||
})().finally(() => {
|
||||
this.renderPagesTask = null;
|
||||
if (this.renderPagesQueued) {
|
||||
this.renderPagesQueued = false;
|
||||
void this.scheduleRenderPages();
|
||||
}
|
||||
});
|
||||
|
||||
return this.renderPagesTask;
|
||||
}
|
||||
|
||||
private async performRenderPages() {
|
||||
if (!this.pdfDocument) return;
|
||||
const canvasElements = this.shadowRoot?.querySelectorAll('.preview-canvas') as NodeListOf<HTMLCanvasElement>;
|
||||
const pagesToRender = Math.min(this.pageCount, this.maxPages);
|
||||
|
||||
// Release old canvases
|
||||
this.clearCanvases();
|
||||
|
||||
// Calculate available width for preview (container width minus padding and stacking offset)
|
||||
const containerWidth = 160; // 200px container - 40px padding
|
||||
const maxStackOffset = (pagesToRender - 1) * this.stackOffset;
|
||||
const availableWidth = containerWidth - maxStackOffset;
|
||||
|
||||
this.cacheElements();
|
||||
|
||||
const { availableWidth, availableHeight } = this.getAvailableStackSize(maxStackOffset);
|
||||
|
||||
// Render pages in reverse order (back to front for stacking)
|
||||
for (let i = 0; i < pagesToRender; i++) {
|
||||
@@ -197,9 +242,15 @@ export class DeesPdfPreview extends DeesElement {
|
||||
const pageNum = parseInt(canvas.dataset.page || '1');
|
||||
const page = await this.pdfDocument.getPage(pageNum);
|
||||
|
||||
// Calculate scale to fit within available width
|
||||
// Calculate scale to fit within available area while keeping aspect ratio
|
||||
const initialViewport = page.getViewport({ scale: 1 });
|
||||
const scale = Math.min(availableWidth / initialViewport.width, 0.5); // Cap at 0.5 for quality
|
||||
const scaleX = availableWidth > 0 ? availableWidth / initialViewport.width : 0;
|
||||
const scaleY = availableHeight > 0 ? availableHeight / initialViewport.height : 0;
|
||||
const scale = Math.min(scaleX || 0.5, scaleY || scaleX || 0.5, 0.75);
|
||||
if (!Number.isFinite(scale) || scale <= 0) {
|
||||
page.cleanup?.();
|
||||
continue;
|
||||
}
|
||||
const viewport = page.getViewport({ scale });
|
||||
|
||||
// Acquire canvas from pool
|
||||
@@ -231,12 +282,6 @@ export class DeesPdfPreview extends DeesElement {
|
||||
}
|
||||
|
||||
private clearCanvases() {
|
||||
// Cancel any pending render
|
||||
if (this.renderRequestId) {
|
||||
cancelAnimationFrame(this.renderRequestId);
|
||||
this.renderRequestId = 0;
|
||||
}
|
||||
|
||||
// Release pooled canvases
|
||||
for (const pooledCanvas of this.canvases) {
|
||||
CanvasPool.release(pooledCanvas);
|
||||
@@ -245,18 +290,22 @@ export class DeesPdfPreview extends DeesElement {
|
||||
}
|
||||
|
||||
private cleanup() {
|
||||
if (this.observer) {
|
||||
this.observer.disconnect();
|
||||
}
|
||||
|
||||
this.clearCanvases();
|
||||
|
||||
if (this.pdfUrl && this.pdfDocument) {
|
||||
PdfManager.releaseDocument(this.pdfUrl);
|
||||
if (this.pdfDocument) {
|
||||
PdfManager.releaseDocument(this.loadedPdfUrl ?? this.pdfUrl);
|
||||
this.pdfDocument = null;
|
||||
}
|
||||
|
||||
this.renderPagesQueued = false;
|
||||
|
||||
this.pageCount = 0;
|
||||
this.previewContainer = null;
|
||||
this.stackElement = null;
|
||||
this.loadedPdfUrl = null;
|
||||
this.rendered = false;
|
||||
this.loading = false;
|
||||
this.error = false;
|
||||
}
|
||||
|
||||
private handleClick() {
|
||||
@@ -277,6 +326,10 @@ export class DeesPdfPreview extends DeesElement {
|
||||
super.updated(changedProperties);
|
||||
|
||||
if (changedProperties.has('pdfUrl') && this.pdfUrl) {
|
||||
const previousUrl = changedProperties.get('pdfUrl') as string | undefined;
|
||||
if (previousUrl) {
|
||||
PdfManager.releaseDocument(previousUrl);
|
||||
}
|
||||
this.cleanup();
|
||||
this.rendered = false;
|
||||
|
||||
@@ -288,6 +341,10 @@ export class DeesPdfPreview extends DeesElement {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if ((changedProperties.has('maxPages') || changedProperties.has('stackOffset')) && this.rendered) {
|
||||
await this.scheduleRenderPages();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -351,4 +408,40 @@ export class DeesPdfPreview extends DeesElement {
|
||||
|
||||
return items;
|
||||
}
|
||||
|
||||
private cacheElements() {
|
||||
if (!this.previewContainer) {
|
||||
this.previewContainer = this.shadowRoot?.querySelector('.preview-container') as HTMLElement;
|
||||
}
|
||||
if (!this.stackElement) {
|
||||
this.stackElement = this.shadowRoot?.querySelector('.preview-stack') as HTMLElement;
|
||||
}
|
||||
}
|
||||
|
||||
private setupResizeObserver() {
|
||||
if (!this.previewContainer || this.resizeObserver) return;
|
||||
|
||||
this.resizeObserver = new ResizeObserver(() => {
|
||||
if (this.rendered && this.pdfDocument && !this.loading) {
|
||||
void this.scheduleRenderPages();
|
||||
}
|
||||
});
|
||||
|
||||
this.resizeObserver.observe(this);
|
||||
}
|
||||
|
||||
private getAvailableStackSize(maxStackOffset: number) {
|
||||
if (!this.stackElement) {
|
||||
return {
|
||||
availableWidth: 0,
|
||||
availableHeight: 0,
|
||||
};
|
||||
}
|
||||
|
||||
const rect = this.stackElement.getBoundingClientRect();
|
||||
const availableWidth = Math.max(rect.width - maxStackOffset, 0);
|
||||
const availableHeight = Math.max(rect.height - maxStackOffset, 0);
|
||||
|
||||
return { availableWidth, availableHeight };
|
||||
}
|
||||
}
|
||||
@@ -1,15 +1,6 @@
|
||||
import { domtools } from '@design.estate/dees-element';
|
||||
|
||||
interface CachedDocument {
|
||||
url: string;
|
||||
document: any;
|
||||
lastAccessed: number;
|
||||
refCount: number;
|
||||
}
|
||||
|
||||
export class PdfManager {
|
||||
private static cache = new Map<string, CachedDocument>();
|
||||
private static maxCacheSize = 10;
|
||||
private static pdfjsLib: any;
|
||||
private static initialized = false;
|
||||
|
||||
@@ -26,83 +17,20 @@ export class PdfManager {
|
||||
public static async loadDocument(url: string): Promise<any> {
|
||||
await this.initialize();
|
||||
|
||||
// Check cache first
|
||||
const cached = this.cache.get(url);
|
||||
if (cached) {
|
||||
cached.lastAccessed = Date.now();
|
||||
cached.refCount++;
|
||||
return cached.document;
|
||||
}
|
||||
|
||||
// Load new document
|
||||
// IMPORTANT: Disabled caching to ensure component isolation
|
||||
// Each viewer instance gets its own document to prevent state sharing
|
||||
// This fixes issues where multiple viewers interfere with each other
|
||||
const loadingTask = this.pdfjsLib.getDocument(url);
|
||||
const document = await loadingTask.promise;
|
||||
|
||||
// Add to cache with LRU eviction if needed
|
||||
if (this.cache.size >= this.maxCacheSize) {
|
||||
this.evictLeastRecentlyUsed();
|
||||
}
|
||||
|
||||
this.cache.set(url, {
|
||||
url,
|
||||
document,
|
||||
lastAccessed: Date.now(),
|
||||
refCount: 1,
|
||||
});
|
||||
|
||||
return document;
|
||||
}
|
||||
|
||||
public static releaseDocument(url: string) {
|
||||
const cached = this.cache.get(url);
|
||||
if (cached) {
|
||||
cached.refCount--;
|
||||
if (cached.refCount <= 0) {
|
||||
// Don't immediately remove, keep for potential reuse
|
||||
cached.refCount = 0;
|
||||
}
|
||||
}
|
||||
public static releaseDocument(_url: string) {
|
||||
// No-op since we're not caching documents anymore
|
||||
// Each viewer manages its own document lifecycle
|
||||
}
|
||||
|
||||
private static evictLeastRecentlyUsed() {
|
||||
let oldestTime = Infinity;
|
||||
let oldestKey: string | null = null;
|
||||
|
||||
for (const [key, value] of this.cache.entries()) {
|
||||
// Only evict if not currently in use
|
||||
if (value.refCount === 0 && value.lastAccessed < oldestTime) {
|
||||
oldestTime = value.lastAccessed;
|
||||
oldestKey = key;
|
||||
}
|
||||
}
|
||||
|
||||
if (oldestKey) {
|
||||
const cached = this.cache.get(oldestKey);
|
||||
if (cached?.document) {
|
||||
cached.document.destroy?.();
|
||||
}
|
||||
this.cache.delete(oldestKey);
|
||||
}
|
||||
}
|
||||
|
||||
public static clearCache() {
|
||||
for (const cached of this.cache.values()) {
|
||||
if (cached.document) {
|
||||
cached.document.destroy?.();
|
||||
}
|
||||
}
|
||||
this.cache.clear();
|
||||
}
|
||||
|
||||
public static getCacheStats() {
|
||||
return {
|
||||
size: this.cache.size,
|
||||
maxSize: this.maxCacheSize,
|
||||
entries: Array.from(this.cache.entries()).map(([url, data]) => ({
|
||||
url,
|
||||
refCount: data.refCount,
|
||||
lastAccessed: new Date(data.lastAccessed).toISOString(),
|
||||
})),
|
||||
};
|
||||
}
|
||||
// Cache methods removed to ensure component isolation
|
||||
// Each viewer now manages its own document lifecycle
|
||||
}
|
||||
@@ -1,4 +1,6 @@
|
||||
import { DeesElement, property, html, customElement, domtools, type TemplateResult, type CSSResult, css, cssManager } from '@design.estate/dees-element';
|
||||
import { keyed } from 'lit/directives/keyed.js';
|
||||
import { repeat } from 'lit/directives/repeat.js';
|
||||
import { DeesInputBase } from '../dees-input-base.js';
|
||||
import { PdfManager } from '../dees-pdf-shared/PdfManager.js';
|
||||
import { viewerStyles } from './styles.js';
|
||||
@@ -12,6 +14,8 @@ declare global {
|
||||
}
|
||||
}
|
||||
|
||||
type RenderState = 'idle' | 'loading' | 'rendering-main' | 'rendering-thumbs' | 'rendered' | 'error' | 'disposed';
|
||||
|
||||
@customElement('dees-pdf-viewer')
|
||||
export class DeesPdfViewer extends DeesElement {
|
||||
public static demo = demoFunc;
|
||||
@@ -44,11 +48,31 @@ export class DeesPdfViewer extends DeesElement {
|
||||
@property({ type: Boolean })
|
||||
private loading: boolean = false;
|
||||
|
||||
@property({ type: String })
|
||||
private documentId: string = '';
|
||||
|
||||
@property({ type: Array })
|
||||
private thumbnailData: Array<{page: number, rendered: boolean}> = [];
|
||||
|
||||
private pdfDocument: any;
|
||||
private renderState: RenderState = 'idle';
|
||||
private renderAbortController: AbortController | null = null;
|
||||
private pageRendering: boolean = false;
|
||||
private pageNumPending: number | null = null;
|
||||
private canvas: HTMLCanvasElement;
|
||||
private ctx: CanvasRenderingContext2D;
|
||||
private currentRenderTask: any = null;
|
||||
private currentRenderPromise: Promise<void> | null = null;
|
||||
private thumbnailRenderTasks: any[] = [];
|
||||
private canvas: HTMLCanvasElement | undefined;
|
||||
private ctx: CanvasRenderingContext2D | undefined;
|
||||
private viewerMain: HTMLElement | null = null;
|
||||
private resizeObserver?: ResizeObserver;
|
||||
private viewportDimensions = { width: 0, height: 0 };
|
||||
private viewportMode: 'auto' | 'page-fit' | 'page-width' | 'custom' = 'auto';
|
||||
private loadedPdfUrl: string | null = null;
|
||||
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;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
@@ -92,7 +116,7 @@ export class DeesPdfViewer extends DeesElement {
|
||||
<button
|
||||
class="toolbar-button"
|
||||
@click=${this.zoomOut}
|
||||
?disabled=${this.currentZoom <= 0.5}
|
||||
?disabled=${!this.canZoomOut}
|
||||
>
|
||||
<dees-icon icon="lucide:ZoomOut"></dees-icon>
|
||||
</button>
|
||||
@@ -105,7 +129,7 @@ export class DeesPdfViewer extends DeesElement {
|
||||
<button
|
||||
class="toolbar-button"
|
||||
@click=${this.zoomIn}
|
||||
?disabled=${this.currentZoom >= 3}
|
||||
?disabled=${!this.canZoomIn}
|
||||
>
|
||||
<dees-icon icon="lucide:ZoomIn"></dees-icon>
|
||||
</button>
|
||||
@@ -160,14 +184,21 @@ export class DeesPdfViewer extends DeesElement {
|
||||
</button>
|
||||
</div>
|
||||
<div class="sidebar-content">
|
||||
${Array(this.totalPages).fill(0).map((_, i) => html`
|
||||
${keyed(this.documentId, html`
|
||||
${repeat(
|
||||
this.thumbnailData,
|
||||
(item) => item.page,
|
||||
(item) => html`
|
||||
<div
|
||||
class="thumbnail ${this.currentPage === i + 1 ? 'active' : ''}"
|
||||
@click=${() => this.goToPage(i + 1)}
|
||||
class="thumbnail ${this.currentPage === item.page ? 'active' : ''}"
|
||||
data-page="${item.page}"
|
||||
@click=${this.handleThumbnailClick}
|
||||
>
|
||||
<canvas class="thumbnail-canvas" data-page="${i + 1}"></canvas>
|
||||
<span class="thumbnail-number">${i + 1}</span>
|
||||
<canvas class="thumbnail-canvas" data-page="${item.page}"></canvas>
|
||||
<span class="thumbnail-number">${item.page}</span>
|
||||
</div>
|
||||
`
|
||||
)}
|
||||
`)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -191,90 +222,193 @@ export class DeesPdfViewer extends DeesElement {
|
||||
}
|
||||
|
||||
public async connectedCallback() {
|
||||
super.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;
|
||||
|
||||
// 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();
|
||||
}
|
||||
|
||||
// Only re-render thumbnails when sidebar becomes visible and document is loaded
|
||||
if (changedProperties.has('showSidebar') && this.showSidebar && this.pdfDocument && this.renderState === 'rendered') {
|
||||
// Use requestAnimationFrame to ensure DOM is ready
|
||||
await new Promise(resolve => requestAnimationFrame(resolve));
|
||||
await this.renderThumbnails();
|
||||
}
|
||||
}
|
||||
|
||||
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 data array
|
||||
this.thumbnailData = Array.from({length: this.totalPages}, (_, i) => ({
|
||||
page: i + 1,
|
||||
rendered: false
|
||||
}));
|
||||
|
||||
// Set loading to false to render the canvas
|
||||
this.loading = false;
|
||||
await this.updateComplete;
|
||||
this.canvas = this.shadowRoot?.querySelector('#pdf-canvas') as HTMLCanvasElement;
|
||||
this.ctx = this.canvas?.getContext('2d') as CanvasRenderingContext2D;
|
||||
this.ensureViewerRefs();
|
||||
|
||||
// Wait for next frame to ensure DOM is ready
|
||||
await new Promise(resolve => requestAnimationFrame(resolve));
|
||||
if (signal.aborted) return;
|
||||
|
||||
// Always re-acquire canvas references
|
||||
this.canvas = this.shadowRoot?.querySelector('#pdf-canvas') as HTMLCanvasElement;
|
||||
|
||||
if (!this.canvas) {
|
||||
console.error('Canvas element not found in DOM');
|
||||
this.renderState = 'error';
|
||||
return;
|
||||
}
|
||||
|
||||
this.ctx = this.canvas.getContext('2d');
|
||||
|
||||
if (!this.ctx) {
|
||||
console.error('Failed to acquire 2D rendering context');
|
||||
this.renderState = 'error';
|
||||
return;
|
||||
}
|
||||
|
||||
this.renderState = 'rendering-main';
|
||||
await this.renderPage(this.currentPage);
|
||||
if (signal.aborted) return;
|
||||
|
||||
if (this.showSidebar) {
|
||||
this.renderThumbnails();
|
||||
// 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';
|
||||
this.loadedPdfUrl = this.pdfUrl;
|
||||
} catch (error) {
|
||||
console.error('Error loading PDF:', error);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
this.renderState = 'error';
|
||||
}
|
||||
}
|
||||
|
||||
private async renderPage(pageNum: number) {
|
||||
if (!this.pdfDocument || !this.canvas || !this.ctx) return;
|
||||
|
||||
// Wait for any existing render to complete
|
||||
if (this.currentRenderPromise) {
|
||||
try {
|
||||
await this.currentRenderPromise;
|
||||
} catch (error) {
|
||||
// Ignore errors from previous renders
|
||||
}
|
||||
}
|
||||
|
||||
// Create a new promise for this render
|
||||
this.currentRenderPromise = this._doRenderPage(pageNum);
|
||||
|
||||
try {
|
||||
await this.currentRenderPromise;
|
||||
} finally {
|
||||
this.currentRenderPromise = null;
|
||||
}
|
||||
}
|
||||
|
||||
private async _doRenderPage(pageNum: number) {
|
||||
if (!this.pdfDocument || !this.canvas || !this.ctx) return;
|
||||
|
||||
this.pageRendering = true;
|
||||
|
||||
try {
|
||||
const page = await this.pdfDocument.getPage(pageNum);
|
||||
|
||||
let viewport;
|
||||
if (this.initialZoom === 'auto' || this.initialZoom === 'page-fit') {
|
||||
const tempViewport = page.getViewport({ scale: 1 });
|
||||
const containerWidth = this.canvas.parentElement?.clientWidth || 800;
|
||||
const containerHeight = this.canvas.parentElement?.clientHeight || 600;
|
||||
const scaleX = containerWidth / tempViewport.width;
|
||||
const scaleY = containerHeight / tempViewport.height;
|
||||
this.currentZoom = Math.min(scaleX, scaleY);
|
||||
viewport = page.getViewport({ scale: this.currentZoom });
|
||||
} else if (this.initialZoom === 'page-width') {
|
||||
const tempViewport = page.getViewport({ scale: 1 });
|
||||
const containerWidth = this.canvas.parentElement?.clientWidth || 800;
|
||||
this.currentZoom = containerWidth / tempViewport.width;
|
||||
viewport = page.getViewport({ scale: this.currentZoom });
|
||||
} else {
|
||||
this.currentZoom = typeof this.initialZoom === 'number' ? this.initialZoom : 1;
|
||||
viewport = page.getViewport({ scale: this.currentZoom });
|
||||
if (!this.ctx) {
|
||||
console.error('Unable to acquire canvas rendering context');
|
||||
this.pageRendering = false;
|
||||
return;
|
||||
}
|
||||
const viewport = this.computeViewport(page);
|
||||
|
||||
this.canvas.height = viewport.height;
|
||||
this.canvas.width = viewport.width;
|
||||
this.canvas.style.width = `${viewport.width}px`;
|
||||
this.canvas.style.height = `${viewport.height}px`;
|
||||
|
||||
const renderContext = {
|
||||
canvasContext: this.ctx,
|
||||
viewport: viewport,
|
||||
};
|
||||
|
||||
await page.render(renderContext).promise;
|
||||
// Store the render task
|
||||
this.currentRenderTask = page.render(renderContext);
|
||||
await this.currentRenderTask.promise;
|
||||
|
||||
this.currentRenderTask = null;
|
||||
this.pageRendering = false;
|
||||
|
||||
// Clean up the page object
|
||||
page.cleanup?.();
|
||||
|
||||
if (this.pageNumPending !== null) {
|
||||
await this.renderPage(this.pageNumPending);
|
||||
const nextPage = this.pageNumPending;
|
||||
this.pageNumPending = null;
|
||||
await this.renderPage(nextPage);
|
||||
}
|
||||
} catch (error) {
|
||||
// Ignore cancellation errors
|
||||
if (error?.name !== 'RenderingCancelledException') {
|
||||
console.error('Error rendering page:', error);
|
||||
}
|
||||
this.currentRenderTask = null;
|
||||
this.pageRendering = false;
|
||||
}
|
||||
}
|
||||
@@ -288,11 +422,50 @@ export class DeesPdfViewer extends DeesElement {
|
||||
}
|
||||
|
||||
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-canvas') as NodeListOf<HTMLCanvasElement>;
|
||||
const thumbnailWidth = 176; // Fixed width for thumbnails (200px container - 24px padding)
|
||||
|
||||
// Clear all canvases first to prevent conflicts
|
||||
for (const canvas of Array.from(thumbnails)) {
|
||||
const context = canvas.getContext('2d');
|
||||
if (context) {
|
||||
context.clearRect(0, 0, canvas.width, canvas.height);
|
||||
}
|
||||
}
|
||||
|
||||
for (const canvas of Array.from(thumbnails)) {
|
||||
if (signal?.aborted) return;
|
||||
|
||||
const pageNum = parseInt(canvas.dataset.page || '1');
|
||||
const page = await this.pdfDocument.getPage(pageNum);
|
||||
|
||||
@@ -310,12 +483,36 @@ export class DeesPdfViewer extends DeesElement {
|
||||
canvas.style.height = `${viewport.height}px`;
|
||||
|
||||
const context = canvas.getContext('2d');
|
||||
if (!context) {
|
||||
page.cleanup?.();
|
||||
continue;
|
||||
}
|
||||
const renderContext = {
|
||||
canvasContext: context,
|
||||
viewport: viewport,
|
||||
};
|
||||
|
||||
await page.render(renderContext).promise;
|
||||
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 = [];
|
||||
}
|
||||
}
|
||||
|
||||
@@ -333,12 +530,28 @@ export class DeesPdfViewer extends DeesElement {
|
||||
}
|
||||
}
|
||||
|
||||
private goToPage(pageNum: number) {
|
||||
private async goToPage(pageNum: number) {
|
||||
if (pageNum >= 1 && pageNum <= this.totalPages) {
|
||||
this.currentPage = pageNum;
|
||||
|
||||
// Ensure canvas references are available
|
||||
if (!this.canvas || !this.ctx) {
|
||||
await this.updateComplete;
|
||||
this.canvas = this.shadowRoot?.querySelector('#pdf-canvas') as HTMLCanvasElement;
|
||||
this.ctx = this.canvas?.getContext('2d') || null;
|
||||
}
|
||||
|
||||
if (this.canvas && this.ctx) {
|
||||
this.queueRenderPage(this.currentPage);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private handleThumbnailClick(e: Event) {
|
||||
const target = e.currentTarget as HTMLElement;
|
||||
const pageNum = parseInt(target.dataset.page || '1');
|
||||
this.goToPage(pageNum);
|
||||
}
|
||||
|
||||
private handlePageInput(e: Event) {
|
||||
const input = e.target as HTMLInputElement;
|
||||
@@ -347,31 +560,36 @@ export class DeesPdfViewer extends DeesElement {
|
||||
}
|
||||
|
||||
private zoomIn() {
|
||||
if (this.currentZoom < 3) {
|
||||
this.currentZoom = Math.min(3, this.currentZoom * 1.2);
|
||||
const nextZoom = Math.min(this.MANUAL_MAX_ZOOM, this.currentZoom * 1.2);
|
||||
this.viewportMode = 'custom';
|
||||
if (nextZoom !== this.currentZoom) {
|
||||
this.currentZoom = nextZoom;
|
||||
this.queueRenderPage(this.currentPage);
|
||||
}
|
||||
}
|
||||
|
||||
private zoomOut() {
|
||||
if (this.currentZoom > 0.5) {
|
||||
this.currentZoom = Math.max(0.5, this.currentZoom / 1.2);
|
||||
const nextZoom = Math.max(this.MANUAL_MIN_ZOOM, this.currentZoom / 1.2);
|
||||
this.viewportMode = 'custom';
|
||||
if (nextZoom !== this.currentZoom) {
|
||||
this.currentZoom = nextZoom;
|
||||
this.queueRenderPage(this.currentPage);
|
||||
}
|
||||
}
|
||||
|
||||
private resetZoom() {
|
||||
this.viewportMode = 'custom';
|
||||
this.currentZoom = 1;
|
||||
this.queueRenderPage(this.currentPage);
|
||||
}
|
||||
|
||||
private fitToPage() {
|
||||
this.initialZoom = 'page-fit';
|
||||
this.viewportMode = 'page-fit';
|
||||
this.queueRenderPage(this.currentPage);
|
||||
}
|
||||
|
||||
private fitToWidth() {
|
||||
this.initialZoom = 'page-width';
|
||||
this.viewportMode = 'page-width';
|
||||
this.queueRenderPage(this.currentPage);
|
||||
}
|
||||
|
||||
@@ -422,4 +640,168 @@ export class DeesPdfViewer extends DeesElement {
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
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) {
|
||||
this.queueRenderPage(this.currentPage);
|
||||
}
|
||||
});
|
||||
this.resizeObserver.observe(this.viewerMain);
|
||||
this.measureViewportDimensions();
|
||||
}
|
||||
}
|
||||
|
||||
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 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.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);
|
||||
}
|
||||
}
|
||||
|
||||
// Clear the loaded URL reference
|
||||
this.loadedPdfUrl = null;
|
||||
|
||||
// Finally null the document reference
|
||||
this.pdfDocument = null;
|
||||
|
||||
// Request update to reflect state changes
|
||||
this.requestUpdate();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user