This commit is contained in:
Timothy Jaeryang Baek
2026-08-10 01:36:09 -06:00
parent 61110677d4
commit 060648f939
2 changed files with 25 additions and 25 deletions

View File

@@ -148,7 +148,7 @@
</script>
<div
class="relative min-h-full bg-transparent [&_.docx-wrapper]:flex [&_.docx-wrapper]:flex-col [&_.docx-wrapper]:items-center [&_.docx-wrapper]:bg-transparent [&_.docx-wrapper]:pt-4 [&_.docx-wrapper]:pb-14 [&_.docx-wrapper>section.docx]:!mx-auto [&_.docx-wrapper>section.docx]:!mt-0 [&_.docx-wrapper>section.docx]:!mb-1 [&_.docx-wrapper>section.docx]:!shadow-[0_1px_4px_rgba(0,0,0,0.18)] [&_.docx-wrapper>section.docx]:[zoom:var(--docx-scale)] {className}"
class="relative min-h-full bg-transparent [&_.docx-wrapper]:flex [&_.docx-wrapper]:flex-col [&_.docx-wrapper]:items-center [&_.docx-wrapper]:!bg-transparent [&_.docx-wrapper]:pt-4 [&_.docx-wrapper]:pb-14 [&_.docx-wrapper>section.docx]:!mx-auto [&_.docx-wrapper>section.docx]:!mt-0 [&_.docx-wrapper>section.docx]:!mb-1 [&_.docx-wrapper>section.docx]:!bg-white [&_.docx-wrapper>section.docx]:!shadow-[0_1px_4px_rgba(0,0,0,0.18)] [&_.docx-wrapper>section.docx]:[zoom:var(--docx-scale)] {className}"
style="--docx-scale: {docxScale};"
>
<div bind:this={styleEl}></div>

View File

@@ -8,18 +8,32 @@
export let data: ArrayBuffer | Uint8Array | null = null;
export let className = 'w-full h-[70vh]';
type PdfDocument = import('pdfjs-dist').PDFDocumentProxy;
type PdfTextLayer = InstanceType<typeof import('pdfjs-dist').TextLayer>;
let outerContainer: HTMLDivElement;
let sceneElement: HTMLDivElement;
let loading = true;
let error = '';
let pdfDoc: any = null;
let pdfDoc: PdfDocument | null = null;
let pzInstance: PanZoom | null = null;
let zoomLevel = 1;
let rerenderTimer: ReturnType<typeof setTimeout> | null = null;
let lastRenderedZoom = 1;
// Keep a reference to TextLayer instances so we can update/cancel them
let textLayerInstances: any[] = [];
let textLayerInstances: PdfTextLayer[] = [];
const cancelTextLayers = () => {
for (const tl of textLayerInstances) {
try {
tl.cancel();
} catch {
// Text layers can already be resolved or canceled during rerenders.
}
}
textLayerInstances = [];
};
const initPanzoom = () => {
if (pzInstance) {
@@ -37,7 +51,7 @@
}
return false;
},
beforeMouseDown: (e) => {
beforeMouseDown: () => {
// Only allow drag-to-pan when zoomed in (not at default scale)
const transform = pzInstance?.getTransform();
if (transform && Math.abs(transform.scale - 1) < 0.01) {
@@ -93,13 +107,7 @@
const pageWrappers = sceneElement.querySelectorAll('.pdf-page-wrapper');
// Cancel old text layers
for (const tl of textLayerInstances) {
try {
tl.cancel();
} catch (_) {}
}
textLayerInstances = [];
cancelTextLayers();
for (let i = 0; i < pageWrappers.length; i++) {
const page = await pdfDoc.getPage(i + 1);
@@ -119,7 +127,7 @@
const ctx = canvas.getContext('2d');
if (ctx) {
await page.render({ canvasContext: ctx, viewport: scaledViewport }).promise;
await page.render({ canvas, canvasContext: ctx, viewport: scaledViewport }).promise;
}
// Rebuild text layer
@@ -146,13 +154,7 @@
// Clear previous content
sceneElement.innerHTML = '';
// Cancel old text layers
for (const tl of textLayerInstances) {
try {
tl.cancel();
} catch (_) {}
}
textLayerInstances = [];
cancelTextLayers();
const pdfjs = await import('pdfjs-dist');
const dpr = window.devicePixelRatio || 1;
@@ -194,7 +196,10 @@
wrapper.appendChild(canvas);
const ctx = canvas.getContext('2d');
if (!ctx) continue;
await page.render({
canvas,
canvasContext: ctx,
viewport: scaledViewport
}).promise;
@@ -256,12 +261,7 @@
onDestroy(() => {
if (rerenderTimer) clearTimeout(rerenderTimer);
pzInstance?.dispose();
for (const tl of textLayerInstances) {
try {
tl.cancel();
} catch (_) {}
}
textLayerInstances = [];
cancelTextLayers();
if (pdfDoc) {
pdfDoc.destroy();
pdfDoc = null;