Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

added currentPageCallBack for the process of the current page #2437

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

added currentPageCallBack for the process of the current page #2437

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0a61c6e
added currentPageCallBack for the process of the current page
KMJ-007 Nov 4, 2023
14b24ca
merge conflict resolved
KMJ-007 Feb 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 12 additions & 11 deletions packages/layout/src/steps/resolvePagination.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,7 +245,7 @@ const dissocSubPageData = (page) => {
return omit(['subPageNumber', 'subPageTotalPages'], page);
};

const paginate = (page, pageNumber, fontStore, yoga) => {
const paginate = (page, pageNumber, fontStore, yoga,currentPageCallBack) => {
if (!page) return [];

if (page.props?.wrap === false) return [page];
Expand All @@ -254,17 +254,17 @@ const paginate = (page, pageNumber, fontStore, yoga) => {

const pages = [splittedPage[0]];
let nextPage = splittedPage[1];

let pageCount = 1;
while (nextPage !== null) {
splittedPage = splitPage(
nextPage,
pageNumber + pages.length,
fontStore,
yoga,
);

splittedPage = splitPage(nextPage, pageNumber + pages.length, fontStore,yoga);
pageCount++;

pages.push(splittedPage[0]);
nextPage = splittedPage[1];
// Call the progressCallback to update progress
if (currentPageCallBack) {
currentPageCallBack(pageCount);
}
}

return pages;
Expand All @@ -276,15 +276,16 @@ const paginate = (page, pageNumber, fontStore, yoga) => {
*
* @param {Object} doc node
* @param {Object} fontStore font store
* @param {Function} currentPageCallBack Callback to track progress
* @returns {Object} layout node
*/
const resolvePagination = (doc, fontStore) => {
const resolvePagination = (doc, fontStore, currentPageCallBack) => {
let pages = [];
let pageNumber = 1;

for (let i = 0; i < doc.children.length; i += 1) {
const page = doc.children[i];
let subpages = paginate(page, pageNumber, fontStore, doc.yoga);
let subpages = paginate(page, pageNumber, fontStore, doc.yoga, currentPageCallBack);

subpages = assocSubPageData(subpages);
pageNumber += subpages.length;
Expand Down
4 changes: 3 additions & 1 deletion packages/renderer/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -460,6 +460,7 @@ declare namespace ReactPDF {
style?: Style | Style[];
className?: string;
children?: React.ReactElement<DocumentProps>;
currentPageCallBack? : ( value:Number ) => void;
innerRef?: React.Ref<HTMLIFrameElement>;
showToolbar?: boolean;
}
Expand Down Expand Up @@ -502,7 +503,8 @@ declare namespace ReactPDF {
* React hook for creating and updating a PDF document instance
* @platform web
*/
function usePDF(options?: {
function usePDF(options: {
currentPageCallBack? : ( value:Number ) => void;
document?: React.ReactElement<DocumentProps>;
}): [
UsePDFInstance,
Expand Down
3 changes: 2 additions & 1 deletion packages/renderer/src/dom/PDFViewer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,12 @@ export const PDFViewer = ({
style,
className,
children,
currentPageCallBack,
innerRef,
showToolbar = true,
...props
}) => {
const [instance, updateInstance] = usePDF();
const [instance, updateInstance] = usePDF({undefined,currentPageCallBack});

useEffect(() => updateInstance(children), [children]);

Expand Down
10 changes: 2 additions & 8 deletions packages/renderer/src/dom/usePDF.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,7 @@ import { useState, useRef, useEffect, useCallback } from 'react';

import { pdf } from '../index';

/**
* PDF hook
*
* @param {Object} [options] hook options
* @returns {[Object, Function]} pdf state and update function
*/
export const usePDF = ({ document } = {}) => {
export const usePDF = ({ document, currentPageCallBack } = {}) => {
const pdfInstance = useRef(null);

const [state, setState] = useState({
Expand Down Expand Up @@ -47,7 +41,7 @@ export const usePDF = ({ document } = {}) => {
});
};

pdfInstance.current = pdf();
pdfInstance.current = pdf(undefined,currentPageCallBack);
pdfInstance.current.on('change', queueDocumentRender);
if (document) {
pdfInstance.current.updateContainer(document);
Expand Down
4 changes: 2 additions & 2 deletions packages/renderer/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ let renderer;
// We only want to trigger an update when PDF content changes
const events = {};

const pdf = (initialValue) => {
const pdf = (initialValue,currentPageCallBack) => {
const onChange = () => {
const listeners = events.change?.slice() || [];
for (let i = 0; i < listeners.length; i += 1) listeners[i]();
Expand Down Expand Up @@ -47,7 +47,7 @@ const pdf = (initialValue) => {
pageMode,
});

const layout = await layoutDocument(container.document, fontStore);
const layout = await layoutDocument(container.document, fontStore, currentPageCallBack);
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems very specific to this case. Seems likely we want to report more things to the outside. Maybe we can pass an event emitter to layout, and internally emit events?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

call back looks fairly simple and straightforward, but as you are saying to pass an event to layout, when i was doing the call back, i tried to add the calllback to all the 12 functions, but it was slowing the speed of pdf creation, so i just added them to few, worried about the performance overhead if we implement in all the steps,

emitting events also makes senes to me, both works!

const fileStream = renderPDF(ctx, layout);
return { layout, fileStream };
};
Expand Down