self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-11-23 22:36:32 +02:00
Code Issues Releases Activity

Desktop: PDF scroll persistence (#6747)

Browse Source
This commit is contained in:
asrient
2022-08-27 18:02:20 +05:30
committed by GitHub
parent ed2a328616
commit 3ec3a37603
21 changed files with 494 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
packages/pdf-viewer/miniViewer.tsx
View File

@@ -1,31 +1,20 @@
import React, { useRef, useState } from 'react';
import shim from '@joplin/lib/shim';
shim.setReact(React);
import { render } from 'react-dom';
import * as pdfjsLib from 'pdfjs-dist';
import React, { useRef } from 'react';
import useIsFocused from './hooks/useIsFocused';
import { PdfData } from './pdfSource';
import usePdfData from './hooks/usePdfData';
import VerticalPages from './VerticalPages';
import useAsyncEffect, { AsyncEffectEvent } from '@joplin/lib/hooks/useAsyncEffect';
require('./viewer.css');
export interface MiniViewerAppProps {
pdfPath: string;
isDarkTheme: boolean;
anchorPage: number;
pdfId: string;
}
// Setting worker path to worker bundle.
pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdf.worker.js';
function MiniViewerApp(props: { pdfPath: string; isDarkTheme: boolean; anchorPage: number }) {
const [pdf, setPdf] = useState<PdfData>(null);
export default function MiniViewerApp(props: MiniViewerAppProps) {
const pdf = usePdfData(props.pdfPath);
const isFocused = useIsFocused();
const containerEl = useRef<HTMLDivElement>(null);
useAsyncEffect(async (event: AsyncEffectEvent) => {
const pdfData = new PdfData();
await pdfData.loadDoc(props.pdfPath);
if (event.cancelled) return;
setPdf(pdfData);
}, []);
if (!pdf) {
return (
<div className="mini-app loading">
@@ -36,7 +25,8 @@ function MiniViewerApp(props: { pdfPath: string; isDarkTheme: boolean; anchorPag
return (
<div className={`mini-app${isFocused ? ' focused' : ''}`}>
<div className={`app-pages${isFocused ? ' focused' : ''}`} ref={containerEl}>
<VerticalPages pdf={pdf} isDarkTheme={props.isDarkTheme} anchorPage={props.anchorPage} container={containerEl} />
<VerticalPages pdf={pdf} isDarkTheme={props.isDarkTheme} anchorPage={props.anchorPage} pdfId={props.pdfId} rememberScroll={true}
container={containerEl} showPageNumbers={true} />
</div>
<div className='app-bottom-bar'>
<div className='pdf-info'>
@@ -47,14 +37,3 @@ function MiniViewerApp(props: { pdfPath: string; isDarkTheme: boolean; anchorPag
</div>
);
}
const url = window.frameElement.getAttribute('url');
const appearance = window.frameElement.getAttribute('appearance');
const anchorPage = window.frameElement.getAttribute('anchorPage');
document.documentElement.setAttribute('data-theme', appearance);
render(
<MiniViewerApp pdfPath={url} isDarkTheme={appearance === 'dark'} anchorPage={anchorPage ? Number(anchorPage) : null} />,
document.getElementById('pdf-root')
);