Desktop: Added PDF viewer options (#6800)

.eslintignore

@@ -2001,6 +2001,9 @@ packages/lib/versionInfo.js.map
 packages/pdf-viewer/Page.d.ts
 packages/pdf-viewer/Page.js
 packages/pdf-viewer/Page.js.map
+packages/pdf-viewer/PdfDocument.d.ts
+packages/pdf-viewer/PdfDocument.js
+packages/pdf-viewer/PdfDocument.js.map
 packages/pdf-viewer/VerticalPages.d.ts
 packages/pdf-viewer/VerticalPages.js
 packages/pdf-viewer/VerticalPages.js.map
@@ -2010,9 +2013,9 @@ packages/pdf-viewer/hooks/useIsFocused.js.map
 packages/pdf-viewer/hooks/useIsVisible.d.ts
 packages/pdf-viewer/hooks/useIsVisible.js
 packages/pdf-viewer/hooks/useIsVisible.js.map
-packages/pdf-viewer/hooks/usePdfData.d.ts
-packages/pdf-viewer/hooks/usePdfData.js
-packages/pdf-viewer/hooks/usePdfData.js.map
+packages/pdf-viewer/hooks/usePdfDocument.d.ts
+packages/pdf-viewer/hooks/usePdfDocument.js
+packages/pdf-viewer/hooks/usePdfDocument.js.map
 packages/pdf-viewer/hooks/useScaledSize.d.ts
 packages/pdf-viewer/hooks/useScaledSize.js
 packages/pdf-viewer/hooks/useScaledSize.js.map
@@ -2025,12 +2028,15 @@ packages/pdf-viewer/main.js.map
 packages/pdf-viewer/miniViewer.d.ts
 packages/pdf-viewer/miniViewer.js
 packages/pdf-viewer/miniViewer.js.map
-packages/pdf-viewer/pdfSource.d.ts
-packages/pdf-viewer/pdfSource.js
-packages/pdf-viewer/pdfSource.js.map
 packages/pdf-viewer/pdfSource.test.d.ts
 packages/pdf-viewer/pdfSource.test.js
 packages/pdf-viewer/pdfSource.test.js.map
+packages/pdf-viewer/types.d.ts
+packages/pdf-viewer/types.js
+packages/pdf-viewer/types.js.map
+packages/pdf-viewer/ui/IconButtons.d.ts
+packages/pdf-viewer/ui/IconButtons.js
+packages/pdf-viewer/ui/IconButtons.js.map
 packages/pdf-viewer/ui/ZoomControls.d.ts
 packages/pdf-viewer/ui/ZoomControls.js
 packages/pdf-viewer/ui/ZoomControls.js.map

.gitignore

@@ -1989,6 +1989,9 @@ packages/lib/versionInfo.js.map
 packages/pdf-viewer/Page.d.ts
 packages/pdf-viewer/Page.js
 packages/pdf-viewer/Page.js.map
+packages/pdf-viewer/PdfDocument.d.ts
+packages/pdf-viewer/PdfDocument.js
+packages/pdf-viewer/PdfDocument.js.map
 packages/pdf-viewer/VerticalPages.d.ts
 packages/pdf-viewer/VerticalPages.js
 packages/pdf-viewer/VerticalPages.js.map
@@ -1998,9 +2001,9 @@ packages/pdf-viewer/hooks/useIsFocused.js.map
 packages/pdf-viewer/hooks/useIsVisible.d.ts
 packages/pdf-viewer/hooks/useIsVisible.js
 packages/pdf-viewer/hooks/useIsVisible.js.map
-packages/pdf-viewer/hooks/usePdfData.d.ts
-packages/pdf-viewer/hooks/usePdfData.js
-packages/pdf-viewer/hooks/usePdfData.js.map
+packages/pdf-viewer/hooks/usePdfDocument.d.ts
+packages/pdf-viewer/hooks/usePdfDocument.js
+packages/pdf-viewer/hooks/usePdfDocument.js.map
 packages/pdf-viewer/hooks/useScaledSize.d.ts
 packages/pdf-viewer/hooks/useScaledSize.js
 packages/pdf-viewer/hooks/useScaledSize.js.map
@@ -2013,12 +2016,15 @@ packages/pdf-viewer/main.js.map
 packages/pdf-viewer/miniViewer.d.ts
 packages/pdf-viewer/miniViewer.js
 packages/pdf-viewer/miniViewer.js.map
-packages/pdf-viewer/pdfSource.d.ts
-packages/pdf-viewer/pdfSource.js
-packages/pdf-viewer/pdfSource.js.map
 packages/pdf-viewer/pdfSource.test.d.ts
 packages/pdf-viewer/pdfSource.test.js
 packages/pdf-viewer/pdfSource.test.js.map
+packages/pdf-viewer/types.d.ts
+packages/pdf-viewer/types.js
+packages/pdf-viewer/types.js.map
+packages/pdf-viewer/ui/IconButtons.d.ts
+packages/pdf-viewer/ui/IconButtons.js
+packages/pdf-viewer/ui/IconButtons.js.map
 packages/pdf-viewer/ui/ZoomControls.d.ts
 packages/pdf-viewer/ui/ZoomControls.js
 packages/pdf-viewer/ui/ZoomControls.js.map

packages/pdf-viewer/Page.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useRef, useState, MutableRefObject } from 'react';
 import * as React from 'react';
 import useIsVisible from './hooks/useIsVisible';
-import { PdfData, ScaledSize } from './pdfSource';
+import PdfDocument from './PdfDocument';
+import { ScaledSize } from './types';
 import useAsyncEffect, { AsyncEffectEvent } from '@joplin/lib/hooks/useAsyncEffect';
 import styled from 'styled-components';
 
@@ -35,7 +36,7 @@ const PageInfo = styled.div`
 `;
 
 export interface PageProps {
-	pdf: PdfData;
+	pdfDocument: PdfDocument;
 	pageNo: number;
 	focusOnLoad: boolean;
 	isAnchored: boolean;
@@ -87,9 +88,9 @@ export default function Page(props: PageProps) {
 	}, [page, props.scaledSize, isVisible, props.pageNo]);
 
 	useAsyncEffect(async (event: AsyncEffectEvent) => {
-		if (page || !isVisible || !props.pdf) return;
+		if (page || !isVisible || !props.pdfDocument) return;
 		try {
-			const _page = await props.pdf.getPage(props.pageNo);
+			const _page = await props.pdfDocument.getPage(props.pageNo);
 			if (event.cancelled) return;
 			setPage(_page);
 		} catch (error) {

packages/pdf-viewer/pdfSource.ts → packages/pdf-viewer/PdfDocument.ts

@@ -1,13 +1,7 @@
 import * as pdfjsLib from 'pdfjs-dist';
+import { ScaledSize } from './types';
 
-
-export interface ScaledSize {
-	height: number;
-	width: number;
-	scale: number;
-}
-
-export class PdfData {
+export default class PdfDocument {
 	public url: string | Uint8Array;
 	private doc: any = null;
 	public pageCount: number = null;
@@ -16,8 +10,10 @@ export class PdfData {
 		height: number;
 		width: number;
 	} = null;
+	private document: HTMLDocument = null;
 
-	public constructor() {
+	public constructor(document: HTMLDocument) {
+		this.document = document;
 	}
 
 	public loadDoc = async (url: string | Uint8Array) => {
@@ -71,4 +67,36 @@ export class PdfData {
 			scale,
 		};
 	};
+
+	public getActivePageNo = (scaledSize: ScaledSize, pageGap: number, scrollTop: number): number => {
+		const pageHeight = scaledSize.height + pageGap;
+		const pageNo = Math.floor(scrollTop / pageHeight) + 1;
+		return Math.min(pageNo, this.pageCount);
+	};
+
+	public printPdf = () => {
+		const frame = this.document.createElement('iframe');
+		frame.style.position = 'fixed';
+		frame.style.display = 'none';
+		frame.style.height = '100%';
+		frame.style.width = '100%';
+		this.document.body.appendChild(frame);
+		frame.onload = () => {
+			frame.contentWindow.onafterprint = () => {
+				frame.remove();
+			};
+			frame.focus();
+			frame.contentWindow.print();
+		};
+		frame.src = this.url as string;
+	};
+
+	public downloadPdf = async () => {
+		const url = this.url as string;
+		const link = this.document.createElement('a');
+		link.href = url;
+		link.download = url;
+		link.click();
+		link.remove();
+	};
 }

packages/pdf-viewer/VerticalPages.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState, MutableRefObject } from 'react';
 import * as React from 'react';
-import { PdfData } from './pdfSource';
+import PdfDocument from './PdfDocument';
 import Page from './Page';
 import styled from 'styled-components';
 import useScaledSize, { ScaledSizeParams } from './hooks/useScaledSize';
@@ -14,28 +14,29 @@ const PagesHolder = styled.div<{ pageGap: number }>`
 	flex-flow: column;
 	width: fit-content;
 	min-width: 100%;
-	min-height: 100%;
+	min-height: fit-content;
 	row-gap: ${(props)=> props.pageGap || 2}px;
 `;
 
 export interface VerticalPagesProps {
-	pdf: PdfData;
+	pdfDocument: PdfDocument;
 	isDarkTheme: boolean;
 	anchorPage?: number;
 	rememberScroll?: boolean;
 	pdfId?: string;
 	zoom?: number;
 	container: MutableRefObject<HTMLElement>;
-	pageGap?: number;
+	pageGap: number;
 	showPageNumbers?: boolean;
+	onActivePageChange: (page: number)=> void;
 }
 
 export default function VerticalPages(props: VerticalPagesProps) {
 	const [containerWidth, setContainerWidth] = useState<number>(null);
 	const innerContainerEl = useRef<HTMLDivElement>(null);
 
 	const scaledSize = useScaledSize({
-		pdf: props.pdf,
+		pdfDocument: props.pdfDocument,
 		pdfId: props.pdfId,
 		containerWidth,
 		rememberScroll: props.rememberScroll,
@@ -51,6 +52,9 @@ export default function VerticalPages(props: VerticalPagesProps) {
 		scaledSize,
 		pdfId: props.pdfId,
 		rememberScroll: props.rememberScroll,
+		pdfDocument: props.pdfDocument,
+		pageGap: props.pageGap,
+		onActivePageChange: props.onActivePageChange,
 	} as ScrollSaver);
 
 	useEffect(() => {
@@ -81,13 +85,13 @@ export default function VerticalPages(props: VerticalPagesProps) {
 				resizeTimer = null;
 			}
 		};
-	}, [props.container, props.pdf]);
+	}, [props.container, props.pdfDocument]);
 
 	return (<PagesHolder pageGap={props.pageGap || 2} ref={innerContainerEl} >
 		{scaledSize ?
-			Array.from(Array(props.pdf.pageCount).keys()).map((i: number) => {
+			Array.from(Array(props.pdfDocument.pageCount).keys()).map((i: number) => {
 				// setting focusOnLoad only after scaledSize is set so that the container height is set correctly
-				return <Page pdf={props.pdf} pageNo={i + 1} focusOnLoad={scaledSize && props.anchorPage && props.anchorPage === i + 1}
+				return <Page pdfDocument={props.pdfDocument} pageNo={i + 1} focusOnLoad={scaledSize && props.anchorPage && props.anchorPage === i + 1}
 					isAnchored={props.anchorPage && props.anchorPage === i + 1}
 					showPageNumbers={props.showPageNumbers}
 					isDarkTheme={props.isDarkTheme} scaledSize={scaledSize} container={props.container} key={i} />;

packages/pdf-viewer/viewer.css → packages/pdf-viewer/common.css

@@ -19,15 +19,15 @@
 }
 
 ::-webkit-scrollbar-thumb {
-	background: var(--grey);
+	background: rgb(112, 112, 112);
 	border-radius: 5px;
 }
 
 :root {
 	--white: rgb(255, 255, 255);
 	--light: rgb(219, 219, 219);
 	--grey: rgb(128, 128, 128);
-	--dark: rgb(1, 0, 34);
+	--dark: rgb(38, 38, 38);
 	--black: rgb(24, 24, 24);
 
 	--red: #ff000d;
@@ -77,68 +77,11 @@ hr {
 	overflow: visible;
 }
 
-.mini-app {
-	display: grid;
-	grid-template-rows: auto 2rem;
-	height: 100vh;
-	width: 100vw;
-	background-color: var(--bg);
-	overflow: hidden;
-	border-radius: 0.4rem;
-	border: solid thin var(--tertiary);
-	padding-top: 0.6rem;
-	padding-right: 0.25rem;
-	background-color: rgb(240, 241, 245);
+.dark-bg{
+	background-color: rgb(171, 171, 171);
 }
 
-.mini-app.focused {
-	border: solid thin var(--grey);
-}
-
-.mini-app.loading {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-[data-theme="dark"] .mini-app {
+[data-theme="dark"] .dark-bg {
 	background-color: rgb(54, 54, 54);
 }
 
-.app-bottom-bar {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	align-items: center;
-	padding: 0.2rem 0.5rem;
-	font-size: 0.8rem;
-	color: var(--grey);
-}
-
-.app-pages {
-	display: block;
-	margin: 0px auto;
-	overflow-x: hidden;
-	width: 100%;
-	height: 100%;
-	padding: 0.5rem;
-	padding-top: 0px;
-	padding-bottom: 0px;
-	overflow-y: hidden;
-	padding-right: 0.25rem;
-	position: relative;
-}
-
-.app-pages.focused {
-	padding-right: 0px;
-	overflow-y: auto;
-	overflow-x: auto;
-}
-
-.pdf-info {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-around;
-	align-items: center;
-	column-gap: 0.2rem;
-}

packages/pdf-viewer/hooks/usePdfDocument.ts

@@ -0,0 +1,19 @@
+import { useState } from 'react';
+import useAsyncEffect, { AsyncEffectEvent } from '@joplin/lib/hooks/useAsyncEffect';
+import PdfDocument from '../PdfDocument';
+
+
+const usePdfDocument = (pdfPath: string) => {
+	const [pdfDocument, setPdfDocument] = useState<PdfDocument>(null);
+
+	useAsyncEffect(async (event: AsyncEffectEvent) => {
+		const pdfData = new PdfDocument(document);
+		await pdfData.loadDoc(pdfPath);
+		if (event.cancelled) return;
+		setPdfDocument(pdfData);
+	}, [pdfPath]);
+
+	return pdfDocument;
+};
+
+export default usePdfDocument;