Which product are you using?
PDF.js Express Viewer
PDF.js Express Version
8.7.4
Detailed description of issue
We use PDF JS viewer with custom regions selection tool which basically allows user to select some area in pdf and adds rectangular shape to display selection. The issue we faced is that when we have multi page pdf and we scroll between pages the added selections disappear. They are added to div with id=pageContainer{pageNumber}. So far we have noticed that this is caused by div element with id=virtualListBody being updated on scroll and all child divs also updates therefore any added elements disappear, but it’s not clear what event happens here. Could you explain? We added event listener on pageNumberUpdated but it’s not it, it fires on different time. We cannot identify any other event among document viewer events that would look like something we need. Could you advice how to handle this and how to keep added visual selections on screen all the time?
Expected behaviour
There should be a specific event dedicated for any updates that can influence UI.
Does your issue happen with every document, or just one?
All multi page pdfs and happens on scroll but not necessarily on page number change.
Link to document
Any document with more than one page.
Code snippet
If it would help that’s the function we use to add selections:
const updateRegionsForPage = useCallback(
(pageNumber: number, zoom: number) => {
const regionsInPage = regions.current.filter((region) => region.page === pageNumber);
if (!iframeDocumentRef.current || !documentViewerRef.current || !regionsInPage.length) return;
const pageContainer = iframeDocumentRef.current?.getElementById(`pageContainer${pageNumber}`);
const pageRotation = documentViewerRef.current?.getCompleteRotation([pageNumber]);
regionsInPage.forEach((region) => {
const {left, top, width, height} = rotateRegion(region, pageRotation);
const style = region.element.style;
style.left = `${left * zoom}px`;
style.top = `${top * zoom}px`;
style.width = `${width * zoom}px`;
style.height = `${height * zoom}px`;
pageContainer?.appendChild(region.element);
});
},
[regions]
);
And we update them on events: “pageComplete”, “zoomUpdated”, “pageNumberUpdated”, but it’s not enough, on scroll some other event happens which causes added rectangular to disappear and it reappears only when one of these events happen again. Please advise how to keep added elements on the screen.