This commit is contained in:
Timothy Jaeryang Baek 2026-08-30 17:44:39 -04:00
parent 492ccf3ac0
commit b356b80f8c
2 changed files with 29 additions and 19 deletions

View file

@ -386,6 +386,10 @@
void selectPage(selectedPage + (e.key === 'ArrowUp' || e.key === 'ArrowLeft' ? -1 : 1));
};
const focusViewer = () => {
if (!outerContainer?.contains(document.activeElement)) outerContainer?.focus();
};
const loadPdf = async () => {
if (!url && !data) return;
@ -462,9 +466,7 @@
});
</script>
<svelte:window on:keydown={handleKeyDown} />
<div class="relative {className}">
<div class="relative {className}">
{#if loading}
<div class="absolute inset-0 flex items-center justify-center">
<Spinner className="size-5" />
@ -475,14 +477,17 @@
</div>
{/if}
<div
class={singlePage
? 'overflow-hidden h-full flex items-center justify-center overscroll-contain'
: 'overflow-y-auto h-full'}
bind:this={outerContainer}
on:scroll={handleScroll}
on:wheel|nonpassive={handleWheel}
>
<div
class={singlePage
? 'overflow-hidden h-full flex items-center justify-center overscroll-contain'
: 'overflow-y-auto h-full'}
bind:this={outerContainer}
tabindex="0"
on:scroll={handleScroll}
on:wheel|nonpassive={handleWheel}
on:pointerdown={focusViewer}
on:keydown={handleKeyDown}
>
<div bind:this={sceneElement} class={singlePage ? '' : 'w-full'}></div>
</div>

View file

@ -121,6 +121,10 @@
}
};
const focusPreview = () => {
if (!rootEl?.contains(document.activeElement)) rootEl?.focus();
};
const zoomIn = () => {
if (!pzInstance || !stageEl) return;
pzInstance.zoomTo(stageEl.clientWidth / 2, stageEl.clientHeight / 2, 1.25);
@ -227,14 +231,15 @@
});
</script>
<svelte:window on:keydown={handleKeyDown} />
<div
bind:this={rootEl}
class="relative grid {hideThumbs
? 'grid-cols-[minmax(0,1fr)]'
: 'grid-cols-[144px_minmax(0,1fr)]'} min-h-0 bg-transparent text-gray-900 dark:text-gray-100 {className}"
>
<div
bind:this={rootEl}
tabindex="0"
on:keydown={handleKeyDown}
on:pointerdown={focusPreview}
class="relative grid {hideThumbs
? 'grid-cols-[minmax(0,1fr)]'
: 'grid-cols-[144px_minmax(0,1fr)]'} min-h-0 bg-transparent text-gray-900 dark:text-gray-100 {className}"
>
<aside
class={hideThumbs
? 'hidden'