saulteafarmer/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2025-09-18 09:29:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

improved scaling and fix grey void

Browse Source
This commit is contained in:
Reece Browne 2025-09-11 20:07:43 +01:00
parent 93607937f6
commit fb9b01f53b
4 changed files with 70 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/package-lock.json generated
View File

@ -17,6 +17,7 @@
"@embedpdf/plugin-render": "^1.1.1",
"@embedpdf/plugin-scroll": "^1.1.1",
"@embedpdf/plugin-selection": "^1.1.1",
"@embedpdf/plugin-tiling": "^1.1.1",
"@embedpdf/plugin-viewport": "^1.1.1",
"@embedpdf/plugin-zoom": "^1.1.1",
"@emotion/react": "^11.14.0",
@ -726,6 +727,24 @@
"vue": ">=3.2.0"
}
},
"node_modules/@embedpdf/plugin-tiling": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@embedpdf/plugin-tiling/-/plugin-tiling-1.1.1.tgz",
"integrity": "sha512-KxpouPRsDZ1rnxsxnusywlI92L0l9+WilMAa+RzLDDuesOrtDWL2ry/MAhT0A/lhZP6NdPZNjlqqZGBWcFZhHA==",
"dependencies": {
"@embedpdf/models": "1.1.1"
},
"peerDependencies": {
"@embedpdf/core": "1.1.1",
"@embedpdf/plugin-render": "1.1.1",
"@embedpdf/plugin-scroll": "1.1.1",
"@embedpdf/plugin-viewport": "1.1.1",
"preact": "^10.26.4",
"react": ">=16.8.0",
"react-dom": ">=16.8.0",
"vue": ">=3.2.0"
}
},
"node_modules/@embedpdf/plugin-viewport": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@embedpdf/plugin-viewport/-/plugin-viewport-1.1.1.tgz",

1
frontend/package.json
View File

@ -13,6 +13,7 @@
"@embedpdf/plugin-render": "^1.1.1",
"@embedpdf/plugin-scroll": "^1.1.1",
"@embedpdf/plugin-selection": "^1.1.1",
"@embedpdf/plugin-tiling": "^1.1.1",
"@embedpdf/plugin-viewport": "^1.1.1",
"@embedpdf/plugin-zoom": "^1.1.1",
"@emotion/react": "^11.14.0",

19
frontend/src/components/viewer/EmbedPdfViewer.tsx
View File

@ -57,7 +57,14 @@ const EmbedPdfViewer = ({
}, [previewFile, fileWithUrl]);
return (
<Box style={{ position: 'relative', height: '100%', display: 'flex', flexDirection: 'column' }}>
<Box style={{
position: 'relative',
height: '100%',
display: 'flex',
flexDirection: 'column',
overflow: 'hidden',
contain: 'layout style paint'
}}>
{/* Close Button - Only show in preview mode */}
{onClose && previewFile && (
<ActionIcon
@ -87,7 +94,15 @@ const EmbedPdfViewer = ({
)}
{/* EmbedPDF Viewer with Toolbar Overlay */}
<Box style={{ position: 'relative', flex: 1, overflow: 'hidden' }}>
<Box style={{
position: 'relative',
flex: 1,
overflow: 'hidden',
minHeight: 0,
minWidth: 0,
display: 'flex',
flexDirection: 'column'
}}>
<LocalEmbedPDF
file={effectiveFile.file}
url={effectiveFile.url}

37
frontend/src/components/viewer/LocalEmbedPDF.tsx
View File

@ -11,6 +11,7 @@ import { RenderLayer, RenderPluginPackage } from '@embedpdf/plugin-render/react'
import { ZoomPluginPackage, ZoomMode } from '@embedpdf/plugin-zoom/react';
import { InteractionManagerPluginPackage, PagePointerProvider } from '@embedpdf/plugin-interaction-manager/react';
import { SelectionLayer, SelectionPluginPackage } from '@embedpdf/plugin-selection/react';
import { TilingLayer, TilingPluginPackage } from '@embedpdf/plugin-tiling/react';
import { ZoomControlsExporter } from './ZoomControlsExporter';
import { ScrollControlsExporter } from './ScrollControlsExporter';
import { SelectionControlsExporter } from './SelectionControlsExporter';
@ -71,7 +72,14 @@ export function LocalEmbedPDF({ file, url, colorScheme }: LocalEmbedPDFProps) {
createPluginRegistration(ZoomPluginPackage, {
defaultZoomLevel: ZoomMode.FitPage,
minZoom: 0.2,
maxZoom: 5.0,
maxZoom: 3.0,
}),
// Register tiling plugin (depends on Render, Scroll, Viewport)
createPluginRegistration(TilingPluginPackage, {
tileSize: 768,
overlapPx: 5,
extraRings: 1,
}),
];
}, [pdfUrl]);
@ -137,7 +145,15 @@ export function LocalEmbedPDF({ file, url, colorScheme }: LocalEmbedPDFProps) {
// Wrap your UI with the <EmbedPDF> provider
return (
<div style={{ height: '100%', width: '100%', overflow: 'hidden' }}>
<div style={{
height: '100%',
width: '100%',
position: 'relative',
overflow: 'hidden',
flex: 1,
minHeight: 0,
minWidth: 0
}}>
<EmbedPDF engine={engine} plugins={plugins}>
<ZoomControlsExporter />
<ScrollControlsExporter />
@ -147,13 +163,26 @@ export function LocalEmbedPDF({ file, url, colorScheme }: LocalEmbedPDFProps) {
backgroundColor: actualColorScheme === 'dark' ? '#1a1b1e' : '#f1f3f5',
height: '100%',
width: '100%',
maxHeight: '100%',
maxWidth: '100%',
overflow: 'auto',
position: 'relative',
flex: 1,
minHeight: 0,
minWidth: 0,
contain: 'strict',
}}
>
<Scroller
renderPage={({ width, height, pageIndex, scale, rotation }: { width: number; height: number; pageIndex: number; scale: number; rotation?: number }) => (
<PagePointerProvider width={width} height={height} pageIndex={pageIndex} scale={scale} rotation={rotation}>
<RenderLayer pageIndex={pageIndex} scale={scale} />
<PagePointerProvider {...{ width, height, pageIndex, scale, rotation: rotation || 0 }}>
{/* 1. Low-resolution base layer for immediate feedback */}
<RenderLayer pageIndex={pageIndex} scale={0.5} />
{/* 2. High-resolution tile layer on top */}
<TilingLayer pageIndex={pageIndex} scale={scale} />
{/* 3. Selection layer for text interaction */}
<SelectionLayer pageIndex={pageIndex} scale={scale} />
</PagePointerProvider>
)}