fix(pdf): merge setElements and render effects so canvas remount triggers re-render
The refactor made pdfDoc a plain variable so renderer.isLoaded was not reactive. Svelte only tracked currentPage and scale — but when the canvas reappeared after loading, neither changed, so the PDF stayed blank. Fix: merge the two effects into one that reads canvasEl synchronously. Svelte now tracks canvasEl as a dependency; when the canvas remounts (loading spinner → false), the effect re-fires and renders the already-loaded PDF document. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -56,21 +56,20 @@ onMount(async () => {
|
|||||||
await renderer.init();
|
await renderer.init();
|
||||||
});
|
});
|
||||||
|
|
||||||
// Wire DOM elements to the renderer after they mount
|
|
||||||
$effect(() => {
|
|
||||||
if (canvasEl && textLayerEl) {
|
|
||||||
renderer.setElements(canvasEl, textLayerEl);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
if (renderer.pdfjsReady && url) {
|
if (renderer.pdfjsReady && url) {
|
||||||
renderer.loadDocument(url);
|
renderer.loadDocument(url);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Wire DOM elements to the renderer and trigger rendering.
|
||||||
|
// canvasEl is read synchronously so Svelte tracks it as a dependency:
|
||||||
|
// when the canvas reappears after the loading spinner (loading → false),
|
||||||
|
// this effect re-fires and renders the already-loaded PDF.
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
// Read scale and currentPage synchronously so Svelte tracks them as dependencies.
|
if (!canvasEl || !textLayerEl) return;
|
||||||
|
renderer.setElements(canvasEl, textLayerEl);
|
||||||
|
// Also track currentPage and scale so page-nav / zoom re-renders work.
|
||||||
if (renderer.isLoaded && renderer.currentPage && renderer.scale > 0) {
|
if (renderer.isLoaded && renderer.currentPage && renderer.scale > 0) {
|
||||||
renderer.renderCurrentPage().then(() => renderer.prerender());
|
renderer.renderCurrentPage().then(() => renderer.prerender());
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user