Untitled
unknown
plain_text
22 days ago
1.9 kB
3
Indexable
import React, { useState } from "react"; import { Page } from "react-pdf"; import DrawingLayer from "./DrawingLayer"; import { useSelector } from "react-redux"; export default function PdfPageWithNotes({ pageNumber, containerWidth, ebookId, onPageClick, scale, // optional: you can incorporate this into the width calculation if desired }) { const noteTakingLayer = useSelector(state => state.ebook.noteTakingLayer); const [pageDimensions, setPageDimensions] = useState({ width: 0, height: 0 }); // When the page renders at scale 1, store its intrinsic dimensions. const onRenderSuccess = (pdfPage) => { const viewport = pdfPage.getViewport({ scale: 1 }); setPageDimensions({ width: viewport.width, height: viewport.height }); }; // Instead of using a fixed baseWidth, we compute the page width from the container. // Here we use 90% of the container width (with a minimum value for readability) const pageWidth = Math.max(containerWidth * 0.9, 300); const pageHeight = pageDimensions.width > 0 ? (pageDimensions.height / pageDimensions.width) * pageWidth : "auto"; return ( <div className="relative mb-6 w-full flex justify-center" onClick={onPageClick} style={{ overflow: "hidden", width: pageWidth, height: pageHeight }} > <Page pageNumber={pageNumber} renderTextLayer={false} width={pageWidth} onRenderSuccess={onRenderSuccess} className="bg-white shadow-md rounded" /> {noteTakingLayer && pageDimensions.width > 0 && ( <div className="pointer-events-none absolute top-0 left-0" style={{ width: pageWidth, height: pageHeight, }} > <DrawingLayer ebookId={ebookId} pageId={pageNumber} width={pageWidth} height={pageHeight} /> </div> )} </div> ); }
Editor is loading...
Leave a Comment