2022-08-27 14:32:20 +02:00
|
|
|
import { useRef, useState, MutableRefObject } from 'react';
|
|
|
|
import useAsyncEffect, { AsyncEffectEvent } from '@joplin/lib/hooks/useAsyncEffect';
|
2022-09-05 13:35:38 +02:00
|
|
|
import PdfDocument from '../PdfDocument';
|
|
|
|
import { ScaledSize } from '../types';
|
2022-08-27 14:32:20 +02:00
|
|
|
|
|
|
|
export interface ScaledSizeParams {
|
2022-09-05 13:35:38 +02:00
|
|
|
pdfDocument: PdfDocument;
|
2022-08-27 14:32:20 +02:00
|
|
|
pdfId: string;
|
|
|
|
containerWidth: number;
|
|
|
|
rememberScroll: boolean;
|
|
|
|
anchorPage: number;
|
|
|
|
container: MutableRefObject<HTMLElement>;
|
|
|
|
innerContainerEl: MutableRefObject<HTMLElement>;
|
|
|
|
pageGap: number;
|
2022-08-28 13:18:51 +02:00
|
|
|
zoom: number;
|
2022-08-27 14:32:20 +02:00
|
|
|
}
|
|
|
|
|
2022-09-05 13:35:38 +02:00
|
|
|
const useScaledSize = ({ pdfDocument, pdfId, containerWidth, rememberScroll, anchorPage, container, innerContainerEl, pageGap, zoom }: ScaledSizeParams) => {
|
2022-08-27 14:32:20 +02:00
|
|
|
const [scaledSize, setScaledSize] = useState<ScaledSize>(null);
|
|
|
|
const currentScaleSize = useRef(scaledSize);
|
|
|
|
|
|
|
|
useAsyncEffect(async (event: AsyncEffectEvent) => {
|
2022-09-05 13:35:38 +02:00
|
|
|
if (!pdfDocument || !containerWidth) return;
|
2022-08-27 14:32:20 +02:00
|
|
|
// console.log('scaledSize calculation triggered');
|
2022-08-28 13:18:51 +02:00
|
|
|
const effectiveWidth = Math.min(containerWidth - 20, 900) * (zoom || 1);
|
2022-09-05 13:35:38 +02:00
|
|
|
const scaledSize_ = await pdfDocument.getScaledSize(null, effectiveWidth);
|
2022-08-27 14:32:20 +02:00
|
|
|
if (event.cancelled) return;
|
|
|
|
|
|
|
|
const oldScaleSize = currentScaleSize.current;
|
|
|
|
const oldScrollTop = container.current.scrollTop;
|
|
|
|
|
2022-09-05 13:35:38 +02:00
|
|
|
innerContainerEl.current.style.height = `${(scaledSize_.height + pageGap) * pdfDocument.pageCount}px`;
|
2022-08-27 14:32:20 +02:00
|
|
|
|
|
|
|
// Adjust scroll position after window resize to keep the same page visible
|
|
|
|
if (oldScaleSize && container.current) {
|
|
|
|
container.current.scrollTop = oldScrollTop * (scaledSize_.scale / oldScaleSize.scale);
|
|
|
|
}
|
|
|
|
|
|
|
|
currentScaleSize.current = scaledSize_;
|
|
|
|
setScaledSize(scaledSize_);
|
|
|
|
|
|
|
|
// If loading after note rerender, try to retirive the old scroll position
|
|
|
|
if (rememberScroll && pdfId && !oldScaleSize && !anchorPage) {
|
|
|
|
const scrollOffset = parseInt(sessionStorage.getItem(`pdf.${pdfId}.scrollTop`), 10) || null;
|
|
|
|
if (scrollOffset) {
|
2022-08-28 13:18:51 +02:00
|
|
|
// Adjusting it according to the new scale
|
|
|
|
container.current.scrollTop = scrollOffset * scaledSize_.scale;
|
2022-08-27 14:32:20 +02:00
|
|
|
// console.log('scroll set',container.current.scrollTop);
|
|
|
|
}
|
|
|
|
}
|
2022-09-05 13:35:38 +02:00
|
|
|
}, [pdfDocument, pdfId, rememberScroll, anchorPage, containerWidth, zoom]);
|
2022-08-27 14:32:20 +02:00
|
|
|
|
|
|
|
return scaledSize;
|
|
|
|
};
|
|
|
|
|
|
|
|
export default useScaledSize;
|