diff --git a/frontend/package-lock.json b/frontend/package-lock.json index ad99f086c..fff464cbc 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -18,6 +18,7 @@ "@embedpdf/plugin-render": "^1.1.1", "@embedpdf/plugin-scroll": "^1.1.1", "@embedpdf/plugin-selection": "^1.1.1", + "@embedpdf/plugin-spread": "^1.1.1", "@embedpdf/plugin-tiling": "^1.1.1", "@embedpdf/plugin-viewport": "^1.1.1", "@embedpdf/plugin-zoom": "^1.1.1", @@ -745,6 +746,22 @@ "vue": ">=3.2.0" } }, + "node_modules/@embedpdf/plugin-spread": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@embedpdf/plugin-spread/-/plugin-spread-1.1.1.tgz", + "integrity": "sha512-UyzPKx96f96qKqtGKLv0wT26NbCUi2D+pBdk+/CUQFbe7PJfNIIpECPp0bZJAwQ6MwBWnIwCVT1OwK+egqji5A==", + "dependencies": { + "@embedpdf/models": "1.1.1" + }, + "peerDependencies": { + "@embedpdf/core": "1.1.1", + "@embedpdf/plugin-loader": "1.1.1", + "preact": "^10.26.4", + "react": ">=16.8.0", + "react-dom": ">=16.8.0", + "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", diff --git a/frontend/package.json b/frontend/package.json index 2ffffea8e..d5a6ce969 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -14,6 +14,7 @@ "@embedpdf/plugin-render": "^1.1.1", "@embedpdf/plugin-scroll": "^1.1.1", "@embedpdf/plugin-selection": "^1.1.1", + "@embedpdf/plugin-spread": "^1.1.1", "@embedpdf/plugin-tiling": "^1.1.1", "@embedpdf/plugin-viewport": "^1.1.1", "@embedpdf/plugin-zoom": "^1.1.1", diff --git a/frontend/src/components/viewer/EmbedPdfViewer.tsx b/frontend/src/components/viewer/EmbedPdfViewer.tsx index 1d26b5830..e59f034ae 100644 --- a/frontend/src/components/viewer/EmbedPdfViewer.tsx +++ b/frontend/src/components/viewer/EmbedPdfViewer.tsx @@ -132,8 +132,7 @@ const EmbedPdfViewer = ({ }} dualPage={false} onDualPageToggle={() => { - // Placeholder - will implement dual page toggle later - console.log('Toggle dual page view'); + (window as any).embedPdfSpread?.toggleSpreadMode(); }} currentZoom={100} /> diff --git a/frontend/src/components/viewer/LocalEmbedPDF.tsx b/frontend/src/components/viewer/LocalEmbedPDF.tsx index 9a0423609..91da33f14 100644 --- a/frontend/src/components/viewer/LocalEmbedPDF.tsx +++ b/frontend/src/components/viewer/LocalEmbedPDF.tsx @@ -13,10 +13,12 @@ import { InteractionManagerPluginPackage, PagePointerProvider, GlobalPointerProv import { SelectionLayer, SelectionPluginPackage } from '@embedpdf/plugin-selection/react'; import { TilingLayer, TilingPluginPackage } from '@embedpdf/plugin-tiling/react'; import { PanPluginPackage } from '@embedpdf/plugin-pan/react'; +import { SpreadPluginPackage, SpreadMode } from '@embedpdf/plugin-spread/react'; import { ZoomControlsExporter } from './ZoomControlsExporter'; import { ScrollControlsExporter } from './ScrollControlsExporter'; import { SelectionControlsExporter } from './SelectionControlsExporter'; import { PanControlsExporter } from './PanControlsExporter'; +import { SpreadControlsExporter } from './SpreadControlsExporter'; interface LocalEmbedPDFProps { file?: File | Blob; @@ -88,6 +90,11 @@ export function LocalEmbedPDF({ file, url, colorScheme }: LocalEmbedPDFProps) { overlapPx: 5, extraRings: 1, }), + + // Register spread plugin for dual page layout + createPluginRegistration(SpreadPluginPackage, { + defaultSpreadMode: SpreadMode.None, // Start with single page view + }), ]; }, [pdfUrl]); @@ -166,6 +173,7 @@ export function LocalEmbedPDF({ file, url, colorScheme }: LocalEmbedPDFProps) { + { + if (spread) { + // Export spread controls to global window for toolbar access + (window as any).embedPdfSpread = { + setSpreadMode: (mode: SpreadMode) => { + console.log('EmbedPDF: Setting spread mode to:', mode); + spread.setSpreadMode(mode); + }, + getSpreadMode: () => spread.getSpreadMode(), + toggleSpreadMode: () => { + // Toggle between None and Odd (most common dual-page mode) + const newMode = spreadMode === SpreadMode.None ? SpreadMode.Odd : SpreadMode.None; + console.log('EmbedPDF: Toggling spread mode from', spreadMode, 'to', newMode); + spread.setSpreadMode(newMode); + }, + currentSpreadMode: spreadMode, + isDualPage: spreadMode !== SpreadMode.None, + SpreadMode: SpreadMode, // Export enum for reference + }; + + console.log('EmbedPDF spread controls exported to window.embedPdfSpread', { + currentSpreadMode: spreadMode, + isDualPage: spreadMode !== SpreadMode.None, + spreadAPI: spread, + availableMethods: Object.keys(spread) + }); + } else { + console.warn('EmbedPDF spread API not available yet'); + } + }, [spread, spreadMode]); + + return null; // This component doesn't render anything +} \ No newline at end of file