fix(pdf): prevent scroll-sync effect from hijacking page navigation
Some checks failed
CI / Unit & Component Tests (push) Has been cancelled
CI / Backend Unit Tests (push) Has been cancelled
CI / E2E Tests (push) Has been cancelled
CI / Backend Unit Tests (pull_request) Has been cancelled
CI / E2E Tests (pull_request) Has been cancelled
CI / Unit & Component Tests (pull_request) Has been cancelled

The scroll-sync $effect was re-triggering on every dependency change
(including currentPage), forcing the PDF back to the annotation's page
when the user clicked next/prev. Fix: track prevActiveAnnotationId
and only scroll when the active annotation actually changes.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-05 23:27:52 +02:00
parent d389dc2023
commit 676d3cb6a7

View File

@@ -218,9 +218,16 @@ $effect(() => {
}); });
// Scroll-sync: when activeAnnotationId changes, navigate to its page // Scroll-sync: when activeAnnotationId changes, navigate to its page
let prevActiveAnnotationId: string | null = null;
$effect(() => { $effect(() => {
if (!activeAnnotationId || !pdfDoc) return; const id = activeAnnotationId;
const ann = annotations.find((a) => a.id === activeAnnotationId); if (!id || id === prevActiveAnnotationId || !pdfDoc) {
prevActiveAnnotationId = id;
return;
}
prevActiveAnnotationId = id;
const ann = annotations.find((a) => a.id === id);
if (!ann) return; if (!ann) return;
if (ann.pageNumber !== currentPage) { if (ann.pageNumber !== currentPage) {
@@ -228,10 +235,9 @@ $effect(() => {
} }
// After page renders, scroll the annotation into view (double-rAF for async render) // After page renders, scroll the annotation into view (double-rAF for async render)
const targetId = activeAnnotationId;
requestAnimationFrame(() => { requestAnimationFrame(() => {
requestAnimationFrame(() => { requestAnimationFrame(() => {
const el = document.querySelector(`[data-testid="annotation-${targetId}"]`); const el = document.querySelector(`[data-testid="annotation-${id}"]`);
el?.scrollIntoView({ behavior: 'smooth', block: 'center' }); el?.scrollIntoView({ behavior: 'smooth', block: 'center' });
}); });
}); });