Something went wrong. Try again.
Starship Simulator Controls thoriumsim.com
Something went wrong. Try again.
3.0 kB · 108 lines
TSX
at develop
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109import { AnnotationsLayer } from "@thorium/components/AnnotationsLayer";
import "react-pdf/dist/Page/TextLayer.css";import "react-pdf/dist/Page/AnnotationLayer.css";import Button from "@thorium/ui/Button";import { Icon } from "@thorium/ui/Icon";import { useState } from "react";import { pdfjs } from "react-pdf";import { Document, Page } from "react-pdf";
import "./PDFViewer.css";
pdfjs.GlobalWorkerOptions.workerSrc = new URL( "pdfjs-dist/build/pdf.worker.min.mjs", import.meta.url,).toString();
export function PDFViewer({ url, annotations, onNewAnnotation, onClearAnnotations, onUndoAnnotation,}: { url: string; annotations: [number, number, number][][][]; onNewAnnotation: (points: [number, number, number][], page: number) => Promise<void>; onClearAnnotations: (page: number) => void; onUndoAnnotation: (page: number) => void;}) { const [numPages, setNumPages] = useState<number>(); const [pageNumber, setPageNumber] = useState<number>(1);
function onDocumentLoadSuccess({ numPages }: { numPages: number }): void { setNumPages(numPages); } const [dims, setDims] = useState({ height: 0, left: 0, top: 0, });
return ( <> {annotations[pageNumber - 1] && annotations[pageNumber - 1].length > 0 ? ( <> <div className="absolute top-2 right-2 z-10 flex flex-col gap-2"> <Button className="btn-warning btn-sm" onClick={() => onClearAnnotations(pageNumber - 1)} > Clear Annotations </Button> <Button className="btn-info btn-sm" onClick={() => onUndoAnnotation(pageNumber - 1)}> Undo Annotation </Button> </div> </> ) : null}
<div className="pdf-viewer flex h-full min-h-0 flex-col items-center"> <div className="relative flex-1 overflow-hidden" ref={(node) => { const rect = node?.getBoundingClientRect(); if (!rect) return; if (rect.height !== dims.height || rect.left !== dims.left || rect.top !== dims.top) { const { height, left, top } = rect; setDims({ height, left, top }); } }} > {dims.height && ( <Document file={url} onLoadSuccess={onDocumentLoadSuccess} loading=""> <Page canvasBackground="white" pageNumber={pageNumber} height={dims.height} // width={(dims.height * 8.5) / 11} /> </Document> )}
<AnnotationsLayer points={annotations[pageNumber - 1]} onNewAnnotation={async (points) => { await onNewAnnotation(points, pageNumber - 1); }} /> </div> <div className="flex items-center justify-between gap-4"> <Button className="btn-sm" onClick={() => setPageNumber((page) => Math.max(1, page - 1))}> <Icon name="arrow-left" /> </Button> <span> Page {pageNumber} of {numPages} </span> <Button className="btn-sm" onClick={() => setPageNumber((page) => Math.min(numPages || 1, page + 1))} > <Icon name="arrow-right" /> </Button> </div> </div> </> );}