arsvendg/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/arsvendg/Stirling-PDF.git synced 2026-07-16 11:23:10 +02:00
Code Issues Actions 3 Packages Projects Releases 1 Wiki Activity

Viewer update and autozoom (#4800)

Browse Source 
Updated embed PDF
Added Autozoom
Added file page size to metadata for use in calculations for autozoom,
will come in handy elsewhere.

---------

Co-authored-by: James Brunton <[email protected]>
This commit is contained in:
Reece Browne
2025-11-10 13:52:13 +00:00
committed by GitHub
co-authored by James Brunton
parent 3cf89b6ede
commit ce6b2460d8
15 changed files with 1214 additions and 622 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/core/components/viewer/PdfViewerToolbar.tsx
+32 -15
View File
@@ -14,30 +14,32 @@ interface PdfViewerToolbarProps {
currentPage?: number;
totalPages?: number;
onPageChange?: (page: number) => void;
// Dual page toggle (placeholder for now)
dualPage?: boolean;
onDualPageToggle?: () => void;
// Zoom controls (connected via ViewerContext)
currentZoom?: number;
}
export function PdfViewerToolbar({
currentPage = 1,
totalPages: _totalPages = 1,
onPageChange,
dualPage = false,
onDualPageToggle,
currentZoom: _currentZoom = 100,
}: PdfViewerToolbarProps) {
const { t } = useTranslation();
const { getScrollState, getZoomState, scrollActions, zoomActions, registerImmediateZoomUpdate, registerImmediateScrollUpdate } = useViewer();
const {
getScrollState,
getZoomState,
getSpreadState,
scrollActions,
zoomActions,
spreadActions,
registerImmediateZoomUpdate,
registerImmediateScrollUpdate,
registerImmediateSpreadUpdate,
} = useViewer();
const scrollState = getScrollState();
const zoomState = getZoomState();
const spreadState = getSpreadState();
const [pageInput, setPageInput] = useState(scrollState.currentPage || currentPage);
const [displayZoomPercent, setDisplayZoomPercent] = useState(zoomState.zoomPercent || 140);
const [isDualPageActive, setIsDualPageActive] = useState(spreadState.isDualPage);
// Register for immediate scroll updates and sync with actual scroll state
useEffect(() => {
@@ -53,6 +55,13 @@ export function PdfViewerToolbar({
setDisplayZoomPercent(zoomState.zoomPercent || 140);
}, [zoomState.zoomPercent, registerImmediateZoomUpdate]);
useEffect(() => {
registerImmediateSpreadUpdate((_mode, isDual) => {
setIsDualPageActive(isDual);
});
setIsDualPageActive(spreadState.isDualPage);
}, [registerImmediateSpreadUpdate, spreadState.isDualPage]);
const handleZoomOut = () => {
zoomActions.zoomOut();
};
@@ -69,6 +78,10 @@ export function PdfViewerToolbar({
setPageInput(page);
};
const handleDualPageToggle = () => {
spreadActions.toggleSpreadMode();
};
const handleFirstPage = () => {
scrollActions.scrollToFirstPage();
};
@@ -188,15 +201,19 @@ export function PdfViewerToolbar({
{/* Dual Page Toggle */}
<Button
variant={dualPage ? "filled" : "light"}
variant={isDualPageActive ? "filled" : "light"}
color="blue"
size="md"
radius="xl"
onClick={onDualPageToggle}
onClick={handleDualPageToggle}
style={{ minWidth: '2.5rem' }}
title={dualPage ? t("viewer.singlePageView", "Single Page View") : t("viewer.dualPageView", "Dual Page View")}
title={
isDualPageActive
? t("viewer.singlePageView", "Single Page View")
: t("viewer.dualPageView", "Dual Page View")
}
>
{dualPage ? <DescriptionIcon fontSize="small" /> : <ViewWeekIcon fontSize="small" />}
{isDualPageActive ? <DescriptionIcon fontSize="small" /> : <ViewWeekIcon fontSize="small" />}
</Button>
{/* Zoom Controls */}